LeafletのGISを使おう!

LeafletのGISを使う

Google Maps APIはGCPに登録していないと使えませんし、それにはクレカが必要です。yahoo! のマップのAPIも地味に発行がめんどくさいです。
手軽に使えるlefletのマップを使ってみるといいかもしれません。

Leafletとは

web地図用のJSライブラリです。読み込むだけで使えます。ほとんどのプラットフォームに対応しています。

使ってみる

JSで読み込む

road.js

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
map = L.map('div id').setView([緯度,経度], ズーム);
          L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
          attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);

これだけで読み込めちゃいます。強くないですか？

ピンを指してみる

pin.js

map.on('click', function(e) {
            if(marker){
                map.removeLayer(marker);
            }
            marker = L.marker([緯度,経度]).bindPopup(L.popup({ maxWidth: 550 }).setContent("ピンのメッセージ")).addTo(map);
} );

これでピンもさせちゃいます。
これでDBとかと連携させたら簡易的なアプリすぐ作れる!!

すごく参考にさせてもらってます。もっと知りたい方は...
Leafletの使い方