Adds the maps center and zoom as a permalink for Leaflet maps, checkout the Demo
Leaflet.Permalink is based on Openlayer 3's Permalink example and works with the latest version of Leaflet, 1.0.0-rc1 it also likely works with older versions. History.pushState is used for navigation which means this plugin will only work with IE10 or higher: caniuse.
-
Create a leaflet map. Checkout Leaflets Quick Start Guide for a basic map example.
-
Include Leaflet.Permalink.min.js
<script src="https://rawgit.com/MarcChasse/Leaflet.Permalink/master/Leaflet.Permalink.min.js"></script>
-
Add the following code to the map initialization:
var mappos = L.Permalink.getMapLocation(); var map = L.map('map', { center: mappos.center, zoom: mappos.zoom }); L.Permalink.setup(map);
Here is everything you need to get this up and running. Copy and past the following to an .html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet.Permalink DEMO</title>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.css" />
<style>html,body{margin:0;}#map{width:100vw;height:100vh;}</style>
</head>
<body>
<div id="map"></div>
<script src="https://npmcdn.com/leaflet@1.0.0-rc.1/dist/leaflet.js"></script>
<script src="https://rawgit.com/MarcChasse/leaflet.Permalink/master/leaflet.permalink.min.js"></script>
<script>
osm = new L.TileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: 'Map data © OpenStreetMap contributors'}
);
var mappos = L.Permalink.getMapLocation();
var map = L.map('map', {
center: mappos.center,
zoom: mappos.zoom
});
map.addLayer(osm);
L.Permalink.setup(map);
</script>
</body>
</html>Checkout the DEMO
L.Permalink.getMapLocation
| Option | Type | Default | Description |
|---|---|---|---|
| zoom | Number | 18 | The zoom level of the map when no Permalink hash is present |
| center | LatLng | [52.26869, -113.81034] | The center of the map when no Permalink hash is present |
L.Permalink.setup
None.