(function myself() { var maps = []; var bases = []; function syncOn() { for (var m of maps) m.on('moveend', samerange); } function syncOff() { for (var m of maps) m.off('moveend', samerange); } function samerange(me) { var map = me.target, tmap; tmap = (map == map1 ? map2 : map1); try { syncOff(); for (var m of maps) { if (map != m) { m.setZoom(map.getZoom()); // setZoom() First!! m.fitBounds(map.getBounds()); } } } finally { syncOn(); } } // Function for uMap-Style markdown conversion function wikiRepl(s) { // uMap風マークダウン変換 return s.replace(/{{(.*)\|([0-9][0-9]*)}}/g, '<img class="popup" src="$1" width="$2">'). replace(/{{(.*)}}/g, '<img class="popup" src="$1">'). replace(/\[\[(.*)\|(.*)\]\]/g, '<a href="$1">$2</a>'). replace(/\[\[(.*)\]\]/g, '<a href="$1">$1</a>'). replace(/^### (.*)/, '<h4>$1</h4>'). replace(/^## (.*)/, '<h3>$1</h4>'). replace(/^# (.*)/, '<h2>$1</h4>'); } var lastPopup; function syncPopup(ev) { var t = ev.target; if (!t.getLatLng) { // When CLOSING try { for (var m of maps) m.off('popupclose', syncPopup); lastPopup.closePopup(); } finally { for (var m of maps) m.on('popupclose', syncPopup); } return; } let latlng = t.getLatLng(), ll = [latlng.lng, latlng.lat]; var popups = markerConstruction[ll]; if (!popups) return; try { for (let p of popups) { p.off('popupopen', syncPopup); } for (let p of popups) { if (p != ev.target) if (ev.type=="popupopen") lastPopup=p.openPopup(); else p.closePopup(); } } finally { for (let p of popups) { p.on('popupopen', syncPopup); } } } var markerCollection = {}; function markerConstruction(feature, layer) { let p = feature.properties, // "properties" in GeoJSON format g = feature.geometry; if (p) { let name = p.name, desc = p.description; let popup = "<h3>" + name + "</h3>" + wikiRepl(desc||""); layer.bindPopup(popup); layer.on('popupopen', syncPopup); } if (g && g.type == "Point" && g.coordinates) { let co = g.coordinates; markerConstruction[co] || (markerConstruction[co]=[]) markerConstruction[co].push(layer) // console.log(co); } } function newGejsonLayer() { return L.geoJson(null, { // Layer for omnivore onEachFeature: markerConstruction}); } function init() { var m, n; for (let i=1; n = "map"+i, m=document.getElementById(n); i++) { maps.push(L.map(n).setView([38.914979,139.836581], 13)); } function genBaseLayers() { let bk='AjtFpRWR9qZlBZvZtFapZdeSeMm-rFV5EbHyvfBOEOtkdCHXUzSL5J9LxZYtrrcH', bprop = {bingMapsKey: bk, maxZoom: 20, maxNativeZoom: 18, attribution: '<a href="https://docs.microsoft.com/en-us/bingmaps/rest-services/imagery/get-imagery-metadata">Bing</a>', culture: 'ja'}; var basemaps = { 'OpenStreetMap': {url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxZoom: 20, maxNativeZoom: 18}, '空中写真(国土地理院1961-1969年)': {url: 'https://cyberjapandata.gsi.go.jp/xyz/ort_old10/{z}/{x}/{y}.png', attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 20, maxNativeZoom: 17}, '空中写真(国土地理院2007年-)': {url: 'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 20, maxNativeZoom: 18}, '簡易空中写真(国土地理院1974-1978年)': {url: 'https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg', attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 20, maxNativeZoom: 17}, '空中写真(国土地理院1988-1990年)': {url: 'https://cyberjapandata.gsi.go.jp/xyz/gazo4/{z}/{x}/{y}.jpg', attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 20, maxNativeZoom: 17}, '国土地理院(標準)': {url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', attribution: '© <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>', maxZoom: 20, maxNativeZoom: 18}, 'OSM HikiBikeMap': {url: 'https://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxZoom: 20, maxNativeZoom: 18}, 'OSM HikiBikeMap': {url: 'https://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxZoom: 20, maxNativeZoom: 18}, 'BingMaps Road': {provider: 'bing', attr: Object.assign({}, bprop, {imagerySet: 'Road'})}, 'BingMaps 航空写真': {provider: 'bing', attr: Object.assign({}, bprop, {imagerySet: 'Aerial'})}, 'BingMaps 写真+ラベル': {provider: 'bing', attr: Object.assign({}, bprop, {imagerySet: 'AerialWithLabels'})}, /* 'BingMaps 明': {provider: 'bing', attr: Object.assign({}, bprop, {imagerySet: 'RoadOnDemand'})}, */ }; var layers = {}; for (let i in basemaps) { if (basemaps[i].provider == 'bing') { layers[i] = L.tileLayer.bing(basemaps[i].attr); } else layers[i] = L.tileLayer(basemaps[i].url, basemaps[i]); } return layers; } var gj1 = omnivore.geojson("src/past.geojson", null, newGejsonLayer()); var gj2 = omnivore.geojson("src/present.geojson", null, newGejsonLayer()); var ovls = [{"今昔": gj1}, {"今昔": gj2}]; //alert(Object.keys(Object.create(baseLayer))); for (let i=0; i<maps.length; i++) { let p = {"selectedBaseLayerIndex": i}; let bl = genBaseLayers(); L.control.layers(bl, ovls[i], p).addTo(maps[i]); bl[Object.keys(bl)[i]].addTo(maps[i]); L.control.scale({ maxWidth: 200, imperial: false }).addTo(maps[i]); } gj1.addTo(maps[0]); gj2.addTo(maps[1]); syncOn(); for (m of maps) m.on('popupclose', syncPopup); } window.onload = init; })();