Last active
April 18, 2018 20:27
-
-
Save pnorman/bbaa973932900d9ae6a7b71eb75200d4 to your computer and use it in GitHub Desktop.
Server map switcher
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html style="height:100%;margin:0;padding:0;"> | |
<title>Leaflet page with OSM render server selection</title> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3/dist/leaflet.css" /> | |
<script src="https://unpkg.com/leaflet@1.3/dist/leaflet.js"></script> | |
<script src="leaflet-hash.js"></script> | |
<style type="text/css"> | |
.leaflet-tile-container { | |
pointer-events: auto; | |
} | |
</style> | |
</head> | |
<body style="height:100%;margin:0;padding:0;"> | |
<div id="map" style="height:100%"></div> | |
<script> | |
//<![CDATA[ | |
var tile_url = "http://{server}.openstreetmap.org/{z}/{x}/{y}.png"; | |
var osm = L.tileLayer("http://tile.openstreetmap.org/{z}/{x}/{y}.png", {attribution: "© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> contributors."}); | |
var orm = L.tileLayer(tile_url, {server:"orm", attribution:"© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> contributors."}); | |
var vial = L.tileLayer(tile_url, {server:"vial", attribution:"© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> contributors."}); | |
var scorch = L.tileLayer(tile_url, {server:"scorch", attribution:"© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> contributors."}); | |
var yevaud = L.tileLayer(tile_url, {server:"scorch", attribution:"© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> contributors."}); | |
var map = L.map('map',{center: [0,0], zoom: 4, layers: [osm]}); | |
var baseLayers = { "tile.openstreetmap.org": osm, "orm": orm, "vial": vial, "scorch": scorch, "yevaud": yevaud}; | |
L.control.layers(baseLayers).addTo(map); | |
var hash = L.hash(map) | |
//]]> | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(window) { | |
var HAS_HASHCHANGE = (function() { | |
var doc_mode = window.documentMode; | |
return ('onhashchange' in window) && | |
(doc_mode === undefined || doc_mode > 7); | |
})(); | |
L.Hash = function(map) { | |
this.onHashChange = L.Util.bind(this.onHashChange, this); | |
if (map) { | |
this.init(map); | |
} | |
}; | |
L.Hash.parseHash = function(hash) { | |
if(hash.indexOf('#') === 0) { | |
hash = hash.substr(1); | |
} | |
var args = hash.split("/"); | |
if (args.length == 3) { | |
var zoom = parseInt(args[0], 10), | |
lat = parseFloat(args[1]), | |
lon = parseFloat(args[2]); | |
if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) { | |
return false; | |
} else { | |
return { | |
center: new L.LatLng(lat, lon), | |
zoom: zoom | |
}; | |
} | |
} else { | |
return false; | |
} | |
}; | |
L.Hash.formatHash = function(map) { | |
var center = map.getCenter(), | |
zoom = map.getZoom(), | |
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2)); | |
return "#" + [zoom, | |
center.lat.toFixed(precision), | |
center.lng.toFixed(precision) | |
].join("/"); | |
}, | |
L.Hash.prototype = { | |
map: null, | |
lastHash: null, | |
parseHash: L.Hash.parseHash, | |
formatHash: L.Hash.formatHash, | |
init: function(map) { | |
this.map = map; | |
// reset the hash | |
this.lastHash = null; | |
this.onHashChange(); | |
if (!this.isListening) { | |
this.startListening(); | |
} | |
}, | |
removeFrom: function(map) { | |
if (this.changeTimeout) { | |
clearTimeout(this.changeTimeout); | |
} | |
if (this.isListening) { | |
this.stopListening(); | |
} | |
this.map = null; | |
}, | |
onMapMove: function() { | |
// bail if we're moving the map (updating from a hash), | |
// or if the map is not yet loaded | |
if (this.movingMap || !this.map._loaded) { | |
return false; | |
} | |
var hash = this.formatHash(this.map); | |
if (this.lastHash != hash) { | |
location.replace(hash); | |
this.lastHash = hash; | |
} | |
}, | |
movingMap: false, | |
update: function() { | |
var hash = location.hash; | |
if (hash === this.lastHash) { | |
return; | |
} | |
var parsed = this.parseHash(hash); | |
if (parsed) { | |
this.movingMap = true; | |
this.map.setView(parsed.center, parsed.zoom); | |
this.movingMap = false; | |
} else { | |
this.onMapMove(this.map); | |
} | |
}, | |
// defer hash change updates every 100ms | |
changeDefer: 100, | |
changeTimeout: null, | |
onHashChange: function() { | |
// throttle calls to update() so that they only happen every | |
// `changeDefer` ms | |
if (!this.changeTimeout) { | |
var that = this; | |
this.changeTimeout = setTimeout(function() { | |
that.update(); | |
that.changeTimeout = null; | |
}, this.changeDefer); | |
} | |
}, | |
isListening: false, | |
hashChangeInterval: null, | |
startListening: function() { | |
this.map.on("moveend", this.onMapMove, this); | |
if (HAS_HASHCHANGE) { | |
L.DomEvent.addListener(window, "hashchange", this.onHashChange); | |
} else { | |
clearInterval(this.hashChangeInterval); | |
this.hashChangeInterval = setInterval(this.onHashChange, 50); | |
} | |
this.isListening = true; | |
}, | |
stopListening: function() { | |
this.map.off("moveend", this.onMapMove, this); | |
if (HAS_HASHCHANGE) { | |
L.DomEvent.removeListener(window, "hashchange", this.onHashChange); | |
} else { | |
clearInterval(this.hashChangeInterval); | |
} | |
this.isListening = false; | |
} | |
}; | |
L.hash = function(map) { | |
return new L.Hash(map); | |
}; | |
L.Map.prototype.addHash = function() { | |
this._hash = L.hash(this); | |
}; | |
L.Map.prototype.removeHash = function() { | |
this._hash.removeFrom(); | |
}; | |
})(window); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment