Skip to content

Instantly share code, notes, and snippets.

@milkbread

milkbread/index.html

Last active January 26, 2021 10:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save milkbread/9890452f4acac6817a93e6eb37961a38 to your computer and use it in GitHub Desktop.
Save milkbread/9890452f4acac6817a93e6eb37961a38 to your computer and use it in GitHub Desktop.
Download ZIP
Compare maps including shared crosshairs
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Compare maps</title>
<meta charset="utf-8" />
<script src="https://unpkg.com/leaflet@1.7.1/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment