Newer
Older
2022-miiiii / map / saaaaaigo / saaaaaigo.js
@みのさんじょー みのさんじょー on 27 Jan 2023 3 KB aaaaai
(() => {
	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>'
			});

			//manoma-------------------
		var manomaLayer = 
			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);
					}
				}
			})

			//ひよりべーかりー-----------------
			var hiyoriLayer = 
			L.geoJson(hiyori, { // 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);
					}
				}
			})

			//Cafe First Penguin--------------------
			var penguinLayer = 
			L.geoJson(penguin, { // 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
		});
		manomaLayer.addTo(mymap);
		hiyoriLayer.addTo(mymap);
		penguinLayer.addTo(mymap);

		//manoma--------------
		var manomaTenpo = L.polygon(manoma).addTo(mymap);
		manomaTenpo.bindPopup("manomaだよ");
		manomaLayer.bindPopup("公益大からmanomaまでの道のりなのです")

		//ひよりべーかりー---------------
		var hiyoriTenpo = L.polygon(hiyori).addTo(mymap);
		hiyoriTenpo.bindPopup("ヒヨリベーカリー&カフェだよ");
		hiyoriLayer.bindPopup("公益大からヒヨリベーカリー&カフェまでの道のりなのです")

		//Cafe Fast Penguin----------------------
		var penguinTenpo = L.polygon(penguin).addTo(mymap);
		penguinTenpo.bindPopup("Cafe First Penguinだよ");
		penguinLayer.bindPopup("公益大からCafe First Penguinまでの道のりなのです")

		// 以下、コントロールレイヤの設定
		//   ベースレイヤはOSMと国土地理院2つをJSON形式で指定
		var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
		//   マーカーを2つオーバーレイレイヤに指定
		var ovlLayers  = {'manoma': manomaLayer, 'hiyori':hiyoriLayer, 'penguin':penguinLayer};
		//   ベースレイヤとオーバーレイレイヤをマップに追加
		L.control.layers(baseLayers, ovlLayers).addTo(mymap);
		}
		// ↓初期化時にすぐ実行される
		init(id);
	};
	document.addEventListener("DOMContentLoaded", function(){
		MyMap("mymap");}, false);
	})();