nrenner · April 27, 2017 14:49
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <title>Extending leaflet-fullHash - Marker</title>

    <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/[email protected]/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>
diff --git a/MarkerHash.js b/MarkerHash.js
 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);
 };
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Extending leaflet-fullHash - Marker</title>

	<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" type="text/css" />
	<script src="https://unpkg.com/[email protected]/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 = '© <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: '© <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);
	};