(() => {
function MyMap(id) {
var mymap;
function init(id) {
// 例: コントロールレイヤ
var osmTile = // OSMのタイル
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> \
contributors'
});
var gsiTile = // 国土地理院タイル
L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution:
'<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
});
var geojsonLayer =
L.geoJson(karubi, { // karubi変数は karubi.geojson からロードした
style: function (feature) {
return feature.properties;
},
onEachFeature: function(j, layer) {
let p = j.properties;
if (p) {
let name = p.name, desc = p.description;
let popup = "<h3>" + name + "</h3>" + "<p>" + desc + "</p>";
layer.bindPopup(popup);
}
}
})
mymap = L.map("mymap", {
layers: [gsiTile],
center: [38.9165,139.8297], zoom: 13, scrollWheelZoom: false
});
// 以下、コントロールレイヤの設定
// ベースレイヤはOSMと国土地理院2つをJSON形式で指定
var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
// マーカーを2つオーバーレイレイヤに指定
var ovlLayers = {'カルビーハウス': geojsonLayer};
// ベースレイヤとオーバーレイレイヤをマップに追加
L.control.layers(baseLayers, ovlLayers).addTo(mymap);
}
// ↓初期化時にすぐ実行される
init(id);
};
document.addEventListener("DOMContentLoaded", function(){
MyMap("mymap");}, false);
})();