おいしいブログ

地図をLeafletで扱う時のためのテンプレートを作っておく

Leaflet

そう頻度は多くないのとそんなに大した作業でないのでついついほったらかしてしまっていて、作る時に毎回検索していて面倒なのでいい加減テンプレートのHTMLを作っておくことにする。

Leaflet - a JavaScript library for interactive maps

GISとか面倒な話はどうでもいいので地図をぐりぐり動かしたい!という時によく使われるLeafletを使って、あとはよしなにコードを書いてくれ!というHTMLをペタっと置いておく。

GitHub - leaflet-template

var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var gsi = 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>"
});

地図タイルの定義。OSMか国土地理院のタイルがあればひとまず良い。必要になったらその時に探すということで、頻出検索のこの2つだけ定義しておく。

var layer = L.layerGroup([]);
var map = L.map('map', {layers: [gsi, layer]});
var base_maps = {
  OSM: osm,
  GSI: gsi
};
var overlays = {
  'layer 1': layer
};
L.control.layers(base_maps, overlays).addTo(map);

MapとLayerを作るところまで。Mapは良いとして、Layerがなぜか毎回探すのが面倒・・という記憶がある。なんでだろうか?よくわからない。とりあえずレイヤー化もよくするので書いておく。

map.setView([35.65857769191824,139.74544465541842], 16);
map.on('click', function(e) {console.log(e);})

この緯度経度は東京タワーです?

// marker
var marker = L.marker(L.latLng([35.65857769191824,139.74544465541842])).addTo(layer);
marker.bindPopup('Tokyo Tower');
// circle
L.circle(L.latLng([35.65857769191824,139.74544465541842]), {radius: 75}).addTo(layer);
// polyline
var polyline = [
  L.latLng([35.659370956360576,139.74439859390262]),
  L.latLng([35.65774955030204,139.74439859390262]),
  L.latLng([35.65774955030204,139.7465014457703]),
  L.latLng([35.659370956360576,139.7465014457703]),
  L.latLng([35.659370956360576,139.74439859390262])
];
L.polyline(polyline, {weight: 6, color: 'red'}).addTo(layer);

マーカー落としたり、ポップアップをバインドしたり、円を描いたり、線を描いたり。この辺はあまり迷うことがないのであまり書き下していても意味はないものの、とりあえず書いてていいでしょ的なオブジェ。

ということで、こういうのがパッと用意できます。これでいつでもOKですね。? ?