diff --git a/map/03/03.html b/map/03/03.html new file mode 100644 index 0000000..201bc21 --- /dev/null +++ b/map/03/03.html @@ -0,0 +1,20 @@ + + + + 道案内 + + + + + + + + + + +

学校からmanoma

+
+ + diff --git a/map/03/03.js b/map/03/03.js new file mode 100644 index 0000000..6b8e66e --- /dev/null +++ b/map/03/03.js @@ -0,0 +1,48 @@ +(() => { + function MyMap(id) { + var mymap; + function init(id) { + // 例: コントロールレイヤ + var osmTile = // OSMのタイル + L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap \ + contributors' + }); + var gsiTile = // 国土地理院タイル + L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { + attribution: + '国土地理院' + }); + var geojsonLayer = + L.geoJson(famiraini, { // ここの変数は.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 = "

" + name + "

" + "

" + desc + "

"; + layer.bindPopup(popup); + } + } + }) + mymap = L.map("mymap", { + layers: [gsiTile], + center: [38.917962,139.840853], zoom: 15, 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); + })(); \ No newline at end of file diff --git a/map/michi/michi.js b/map/michi/michi.js index a188abe..71de5e3 100644 --- a/map/michi/michi.js +++ b/map/michi/michi.js @@ -75,7 +75,7 @@ cloakTenpo.bindPopup("cloakだよ"); cloakRoute.bindPopup("公益大から喫茶CLOAKまでの道のりなのです") - L.control.layers( + L.control.layers( {'地理院地図': gsimap, '地理院衛星画像': gsiSatellite, 'OSM Topo': osmtopo}, {'cloakの道順': cloakRoute, 'cloak店舗': cloakTenpo}