Newer
Older
matsugaoka / web / map / test.mado / map.js
@mamadoka mamadoka on 29 Aug 2019 1 KB create map sample
var jsonmap = L.map("load-json").setView([38.891, 139.824], 16);
var layer = L.tileLayer(
    'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
    {attribution:
     '&copy; <a href="//www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html">国土地理院</a>'
    }).addTo(mymap);

var customLayer = L.geoJson(null, {	// omnivoreに引き渡すGeoJSONレイヤ
    onEachFeature: function(f, layer) {	// このブロックは
	let p = f.properties;		// triangle-umap.js と同じ
	if (p) {			// 
	    let name = p.name, desc = p.description;
	    let popup = "<h3>" + name + "</h3>" + "<p>" + (desc||"") + "</p>";
	    layer.bindPopup(popup);	// 
	}
    }
});

// geojson外部ファイルの読み込みは次の行
var gjl = omnivore.geojson("sample.geojson", null, customLayer);
// ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ
gjl.on("ready", function() {	// 'ready' イベントに読み終わったときの処理
    mymap.fitBounds(gjl.getBounds());	// 読み取り失敗時は 'error' イベント
});
gjl.addTo(mymap);		// マップに足す
//L.control.layers(null, {"Triangle": gjl}).addTo(mymap);