milkbread · January 26, 2021 10:22
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
 	<title>Compare maps</title>
 	<meta charset="utf-8" />
 	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 	<script src="http://d3js.org/d3.v3.min.js"></script>
 	<style>
 	@import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);

 	.mapContainer {
 		display: inline-block;
 		width: 33%;
 		height: 500px;
 	}

 	/*
 	source on how to hide default leaflet marker:;
 	https://stackoverflow.com/a/41232864
 	*/
 	.leaflet-grab {
 		cursor: none;
 	}

 	</style>
 </head>

 <body>
 	<script>
 	//initialise an array for the automatic visualisation
 	var maps_ = [],
 		numMaps = 3;
 	var crosshairs = [];
 	for (var i = 0; i < numMaps; i++) maps_.push(i)
 	//set the heading
 	d3.select('body').append('div')
 		.style('text-align', 'center')
 		.style('font-size', '24pt')
 		.append('text')
 		.text('Compare ' + maps_.length + ' maps & and share crosshair!');
 	//add a map-Container for each element in the initial array
 	d3.select('body').selectAll('.maps').data(maps_).enter().append('div')
 		.attr('class', 'mapContainer')
 		.attr('id', function(d) { return 'map' + d });
 	//make a map for each element in the initial array AND return the corresponding map-Elements
 	var maps = maps_.map(showMap);

 	//function, that adds a leaflet-map to each map-Container
 	function showMap(d) {
 		//initial view
 		var map = L.map('map' + d).setView([51, 11], 5);
 		var data_attrib = " | Data: <a href='http://www.openstreetmap.org/'>&copy; OpenStreetMap </a>contributers | <a href='http://d3js.org/'>D3.js</a>"
 		var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://www.openstreetmap.org/'>&copy; OpenStreetMap </a>contributers" + data_attrib });
 		var esri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}.png', { attribution: "Map: <a href='http://www.arcgis.com/home/item.html?id=c4ec722a1cd34cf0a23904aadf8923a0'>ArcGIS - World Physical Map</a>" + data_attrib }).addTo(map);
 		var stamen1 = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://maps.stamen.com/#toner/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib });
 		var stamen2 = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://maps.stamen.com/#watercolor/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib });
 		var cycle = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://www.opencyclemap.org/'>Andy Allan</a>" + data_attrib });
 		var hike = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://hikebikemap.de/'>Hike&BikeMap</a>" + data_attrib });

 		//add the favored layers to an JSON-object
 		var baseLayers = { "Stamen_Toner": stamen1, "Stamen_Watercolor": stamen2, "OpenStreetMap": osm, "World Physical Map": esri, "OpenCycleMap": cycle, "Hike&BikeMap": hike };
 		//add the layer-JSON-object to a layer-control AND add it to the map
 		L.control.layers(baseLayers).addTo(map);
 		//add the automatic map-view-updating to the corresponding events
 		map.on("viewreset", reset);
 		map.on("drag", reset);

 		// source for crosshair-marker:
 		// https://gis.stackexchange.com/a/90230
 		// define a marker for the shared crosshair-visualisation
 		var crosshairIcon = L.icon({
 			iconUrl: 'https://freepikpsd.com/wp-content/uploads/2019/10/csgo-crosshair-png-6-Transparent-Images.png',
 			iconSize: [20, 20], // size of the icon
 			iconAnchor: [10, 10], // point of the icon which will correspond to marker's location
 		});
 		var _crosshair = new L.marker(map.getCenter(), { icon: crosshairIcon, clickable: false });
 		_crosshair.addTo(map);
 		crosshairs.push(_crosshair);

 		map.addEventListener('mousemove', function(ev) {
 			crosshairs.forEach(function(crosshair) {
 				crosshair.setLatLng(ev.latlng);
 			});
 		});

 		return map;
 	}

 	function reset(e) {
 		var current = this._container.id.replace('map', '');
 		maps_.forEach(function(d) {
 			if (d != current) {
 				maps[d].setView(maps[current].getCenter(), maps[current].getZoom());
 			}
 		});
 	}

 	</script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Compare maps</title>
	<meta charset="utf-8" />
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	@import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css);

	.mapContainer {
	display: inline-block;
	width: 33%;
	height: 500px;
	}

	/*
	source on how to hide default leaflet marker:;
	https://stackoverflow.com/a/41232864
	*/
	.leaflet-grab {
	cursor: none;
	}

	</style>
	</head>

	<body>
	<script>
	//initialise an array for the automatic visualisation
	var maps_ = [],
	numMaps = 3;
	var crosshairs = [];
	for (var i = 0; i < numMaps; i++) maps_.push(i)
	//set the heading
	d3.select('body').append('div')
	.style('text-align', 'center')
	.style('font-size', '24pt')
	.append('text')
	.text('Compare ' + maps_.length + ' maps & and share crosshair!');
	//add a map-Container for each element in the initial array
	d3.select('body').selectAll('.maps').data(maps_).enter().append('div')
	.attr('class', 'mapContainer')
	.attr('id', function(d) { return 'map' + d });
	//make a map for each element in the initial array AND return the corresponding map-Elements
	var maps = maps_.map(showMap);

	//function, that adds a leaflet-map to each map-Container
	function showMap(d) {
	//initial view
	var map = L.map('map' + d).setView([51, 11], 5);
	var data_attrib = " \| Data: <a href='http://www.openstreetmap.org/'>© OpenStreetMap </a>contributers \| <a href='http://d3js.org/'>D3.js</a>"
	var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://www.openstreetmap.org/'>© OpenStreetMap </a>contributers" + data_attrib });
	var esri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer/tile/{z}/{y}/{x}.png', { attribution: "Map: <a href='http://www.arcgis.com/home/item.html?id=c4ec722a1cd34cf0a23904aadf8923a0'>ArcGIS - World Physical Map</a>" + data_attrib }).addTo(map);
	var stamen1 = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://maps.stamen.com/#toner/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib });
	var stamen2 = L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://maps.stamen.com/#watercolor/12/37.7706/-122.3782'>Stamen Design</a>" + data_attrib });
	var cycle = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://www.opencyclemap.org/'>Andy Allan</a>" + data_attrib });
	var hike = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', { attribution: "Map: <a href='http://hikebikemap.de/'>Hike&BikeMap</a>" + data_attrib });

	//add the favored layers to an JSON-object
	var baseLayers = { "Stamen_Toner": stamen1, "Stamen_Watercolor": stamen2, "OpenStreetMap": osm, "World Physical Map": esri, "OpenCycleMap": cycle, "Hike&BikeMap": hike };
	//add the layer-JSON-object to a layer-control AND add it to the map
	L.control.layers(baseLayers).addTo(map);
	//add the automatic map-view-updating to the corresponding events
	map.on("viewreset", reset);
	map.on("drag", reset);

	// source for crosshair-marker:
	// https://gis.stackexchange.com/a/90230
	// define a marker for the shared crosshair-visualisation
	var crosshairIcon = L.icon({
	iconUrl: 'https://freepikpsd.com/wp-content/uploads/2019/10/csgo-crosshair-png-6-Transparent-Images.png',
	iconSize: [20, 20], // size of the icon
	iconAnchor: [10, 10], // point of the icon which will correspond to marker's location
	});
	var _crosshair = new L.marker(map.getCenter(), { icon: crosshairIcon, clickable: false });
	_crosshair.addTo(map);
	crosshairs.push(_crosshair);

	map.addEventListener('mousemove', function(ev) {
	crosshairs.forEach(function(crosshair) {
	crosshair.setLatLng(ev.latlng);
	});
	});

	return map;
	}

	function reset(e) {
	var current = this._container.id.replace('map', '');
	maps_.forEach(function(d) {
	if (d != current) {
	maps[d].setView(maps[current].getCenter(), maps[current].getZoom());
	}
	});
	}

	</script>
	</body>

	</html>