【Web】記事に地図を載せたい件

記事に地図を載せたい!
というのは、
せっかくいろいろと出かけているのに地名だけ載せていては場所の想像がつかない。
記事を読んでいる人が。
読む人なんかいるんですか?というツッコミはなしで。

なにかいい方法はないかググってみる

  1. Googleマップを載せる
  2. Leafletとやらを使ってみる
  3. OpenLayersとやらを使ってみる

Googleマップは、芸がない?うえに、最近APIの料金体系が変わって高くなったとかならないとか。
Googleマップは突如仕様が変わったりするし、地図が劣化した噂もあり却下。

あとはLeafletOpenLayers
どっちも機能的には差はなく、どちらも初体験。

なんとなく名前的に気に入ったLeafletを使ってみることにするw

Leaflet公式

物は試しである。とりあえず。簡単なものを作ってみた。

少々ゴリゴリとプログラムを書きますわ。本業ですハイ。
HTML
LaefletのJS、CSSを読み込み
そして、マップ用のdivを用意
マップ描画用のボタンも設置

<head>
  ・・略・・
  <link href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" type="text/css" rel="stylesheet">
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
  ・・略・・
</head>
<body>
  ・・略・・
  <input type="button" class="button" value="押してみてもいいんだよ" onClick="mapView();">
  <div id="map_div" class="map_div">
  </div>
  ・・略・・
</body>

JS

    function mapView()
    {
          var map = L.map('map_div');

          L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
              attribution: "<a href='https://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
          }).addTo(map);

          L.marker([43.069174, 141.350658]).bindPopup("札幌駅北口").addTo(map);

          L.marker([43.067775, 141.351216]).bindPopup("札幌駅南口").addTo(map);

          map.setView([43.068543, 141.350720], 15);

    }

どうぞ押してみてください。

国土地理院の淡色地図を表示し、札幌駅の北口と南口付近にマーカーを追加。
地図の中心を札幌駅に設定し、ズームレベルを15とした。

いいじゃん。このライブラリ。使いやすいわ
もっと勉強が必要。

2019/05/31 追記
その後、さらにLeafletを弄ってみました。
Leafletを試す!

前の記事 次の記事