Newer
Older
sakatakonjaku / src / test-multi.js
@HIROSE Yuuji HIROSE Yuuji on 14 Sep 2019 6 KB Move system files under src/
(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:
		 '&copy; <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:
		 '&copy; <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:
		 '&copy; <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:
		 '&copy; <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:
		 '&copy; <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:
		 '&copy; <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:
		 '&copy; <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:
		 '&copy; <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;
})();