Webページ上にに地図を表示する（OpenLayers）【無料】

実際にやってみた

以下のHTMLをWebページに記載するだけです。
地図データはオープンデータベースの「Open Street Map」を使用しています

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA=" crossorigin="anonymous"></script>

    <div id="map" style="width:200px; height:300px"></div>
    <script>
      // 表示位置
      var tottori = ol.proj.fromLonLat([134.227352, 35.539909]);
      var view = new ol.View({
        center: tottori,
        zoom: 13
      });
      
      // マーカーの配置
      var marker = new ol.Feature(new ol.geom.Point(tottori));
      var markerStyle =  new ol.style.Style({
        image: new ol.style.Icon ({
            anchor: [0.5, 46],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            opacity: 0.95,
            src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        }),
        stroke: new ol.style.Stroke({
          width: 3,
          color: [255, 0, 0, 1]
        }),
        fill: new ol.style.Fill({
          color: [0, 0, 255, 0.6]
        })
      });
      marker.setStyle(markerStyle);

      // 地図の初期化
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            preload: 4,
            source: new ol.source.OSM()
          }), 
          new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [marker]
            })
          })
        ],
        loadTilesWhileAnimating: true,
        view: view
      });
      
    </script>

上記のソースを実行した結果が以下になります。
地図を表示した上で、鳥取砂丘にマーカーを配置しています。

解説

6行目、7行目でOpenLayersのjavascriptファイルをWeb上から取得しています。
つまり、本ソースコードはインターネットが使用できない場所では利用できません。

10行目のdivタグがOpenLayersが地図を構築する基準のタグとなります。id属性は41行目のtargetと合わせる必要があります。

style=”width:200px; height:300px” とすることで、画面上での地図の大きさを設定できます。

13～17行目で初期表示位置とズームの設定を行っています。
fromLonLat([経度, 緯度])で任意の場所に合わせることができます。

20～37行目で、鳥取砂丘の地点にマーカーを配置しています。
OpenLayersではマーカー以外にも「円」「線」「矩形」「多角形」といった図形を地図上に配置できます。

40～55行目で地図の初期化を行っています。
初期表示位置やマーカーとの関連付けも本処理内で行っております。

まとめ

本記事では手っ取り早く地図を表示する方法を解説いたしました。

OpenLayersは少量のHTMLを記述するだけで、Webページ上に地図を載せることができるjavascriptライブラリです。

単純に地図を表示するだけでなく、マーカー等の図形を地図上に配置することが可能です。

OpenLayersは非常に高機能なライブラリであるため、この他にも地図に関連した役立つ機能が搭載されています。
次回以降の投稿で詳しく解説させていただきます。

OpenLayersについての別記事もぜひご覧ください！

①図形を描画する（マーカー、線、円、多角形）
②テキストを書き込む（矩形）
③フリーハンドで書き込む
 ④矢印で強調する
 ⑤固定画像を配置する
 ⑥図形を選択する
 ⑦図形を移動させる
 ⑧固定画像の移動
 ⑨図形を変形させる
 ⑩長方形を変形させる
 ⑪図形を複数選択する
 ⑫図形をJSON形式で保存＆読込
 ⑬図形を削除する
 ⑭線のスタイルを設定する
 ⑮図形の色を設定する

 【入門】地図を表示させる方法
 ボタンを配置する方法
 ミニマップを表示する方法

Webページ上にに地図を表示する（OpenLayers）【無料】

目次

実際にやってみた

解説

まとめ

コメント