diff --git a/map/app2/mapobj.html b/map/app2/mapobj.html index ae6b8d7..8ae59a2 100644 --- a/map/app2/mapobj.html +++ b/map/app2/mapobj.html @@ -4,8 +4,8 @@ マップ: Objects on a Map! + - + + + +
+ + + diff --git a/map/app3/markerlayer.js b/map/app3/markerlayer.js new file mode 100644 index 0000000..20ca277 --- /dev/null +++ b/map/app3/markerlayer.js @@ -0,0 +1,34 @@ +document.addEventListener("DOMContentLoaded", () => { + // 例: コントロールレイヤ + var mlCenter = [38.891, 139.824]; + var otherPoint = [38.890, 139.822]; + 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 markerLayer1 = L.marker(mlCenter); //センターマーカー設置 + var markerLayer2 = L.marker(otherPoint); //もう一つのマーカー設置 + var mlmap = L.map("markerlayer", { + layers: [gsiTile, markerLayer1, markerLayer2], //gsiTileレイヤにマーカーを二つ追加 + center: mlCenter, zoom: 16, scrollWheelZoom: false //センターマーカーを中心にズーム + }); + /* 上記4行は以下のようにするのと同じ効果 + var mlmap = L.map("markerlayer").setView(mlCenter, 16); + gsiTile.addTo(mlmap); + markerLayer1.addTo(mlmap); + markerLayer2.addTo(mlmap); */ + // 以下、コントロールレイヤの設定 + // ベースレイヤはOSMと国土地理院2つをJSON形式で指定 + var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile}; + // マーカーを2つオーバーレイレイヤに指定 + var ovlLayers = {'マーク1': markerLayer1, 'マーク2': markerLayer2}; + // ベースレイヤとオーバーレイレイヤをマップに追加 + L.control.layers(baseLayers, ovlLayers).addTo(mlmap); +}, false); // HTML文書がロードされたら上のアロー関数を呼ばせる