Newer
Older
2022-miiiii / map / 03 / 03.js
@みのさんじょー みのさんじょー on 25 Jan 2023 1 KB ai
(() => {
	function MyMap(id) {
		var mymap;
		function init(id) {
		// 例: コントロールレイヤ
		var osmTile =	// OSMのタイル
			L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			attribution:
			'&copy; <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(manoma, { // manoma変数は manoma.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
		});
		geojsonLayer.addTo(mymap);
		// 以下、コントロールレイヤの設定
		//   ベースレイヤは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);
	})();