Skip to content

Instantly share code, notes, and snippets.

@nrenner
Created April 27, 2017 14:49
Show Gist options
  • Save nrenner/c7035364e09fab2de932e2b0c9e09915 to your computer and use it in GitHub Desktop.
Save nrenner/c7035364e09fab2de932e2b0c9e09915 to your computer and use it in GitHub Desktop.
Extending leaflet-fullHash - Marker
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Extending leaflet-fullHash - Marker</title>
<link href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet-src.js"></script>
<script src="http://kogor.github.io/leaflet-fullHash/leaflet-fullHash.js"></script>
<script src="MarkerHash.js"></script>
<style>
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var myCenter = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', { center: myCenter, zoom: 15 });
var osmCopy = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
map.attributionControl.addAttribution(osmCopy);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(map);
var marker = new L.Marker(myCenter, {
draggable: true
});
map.addLayer(marker);
marker.bindPopup("<p>Drag marker to see URL hash updated</p>");
marker.openPopup();
L.control.layers({
'OpenStreetMap Standard': osm,
'Carto Positron': positron
}, {
'Marker': marker
}
).addTo(map);
var layerHashKeys = {
'osm': osm,
'positron': positron,
'marker': marker
};
L.markerHash(map, layerHashKeys, marker);
</script>
</body>
</html>
L.MarkerHash = function(map, options, marker) {
this.marker = marker;
L.Hash.call(this, map, options);
};
L.MarkerHash.prototype = L.Util.create(L.Hash.prototype);
L.MarkerHash.prototype.constructor = L.MarkerHash;
L.Util.extend(L.MarkerHash.prototype, {
parseHash: function(hash) {
var parsed = false;
// >>> from super
if (hash && hash.indexOf('#') === 0) {
hash = hash.substr(1);
}
// <<<
if (hash) {
var params = new URLSearchParams(hash);
parsed = L.Hash.prototype.parseHash.call(this, params.get('map'));
if (params.has('mlat') && params.has('mlon')) {
var lat = parseFloat(params.get('mlat'));
var lng = parseFloat(params.get('mlon'));
parsed.marker = new L.LatLng(lat, lng);
}
}
return parsed;
},
formatHash: function(map) {
var formatted = L.Hash.prototype.formatHash.call(this, map);
// from super
var precision = Math.max(0, Math.ceil(Math.log(map.getZoom()) / Math.LN2));
formatted = formatted.replace('#', '#map=');
var pos = this.marker.getLatLng();
formatted += '&mlat=' + pos.lat.toFixed(precision) + '&mlon=' + pos.lng.toFixed(precision);
return formatted;
},
update: function() {
L.Hash.prototype.update.call(this);
// >>> from super
var hash = location.hash;
if (hash === this.lastHash) {
return;
}
var parsed = this.parseHash(hash);
// <<<
if (parsed && parsed.marker) {
marker.setLatLng(parsed.marker);
}
},
startListening: function() {
L.Hash.prototype.startListening.call(this);
this.marker.on('dragend', this.onMapMove, this);
},
stopListening: function() {
L.Hash.prototype.stopListening.call(this);
this.marker.off("dragend", this.onMapMove, this);
}
});
L.markerHash = function(map, options, marker) {
return new L.MarkerHash(map, options, marker);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment