function init(){
    var osmAttr = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';    
    var OSM = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 25, attribution: osmAttr}),
        latlng = L.latLng(12.8797,121.7740);
    var map = L.map('map', {center: latlng1, zoom: 6, layers: [OSM]});

    var iconSize = {"C":15,"D":20,"E":25,"F":30,"G":35,"H":40,"I":45};

    L.geoJson(situation, {
        pointToLayer: function (feature, latlng1) {

                                    }, 30000);

            var mysymbol = new ms.Symbol(

            var myicon = L.divIcon({className: '', 
                html : mysymbol.asSVG(), 
                iconAnchor: new L.Point(mysymbol.getAnchor().x, mysymbol.getAnchor().y)});

            return L.marker(latlng1,{icon:myicon, draggable:false});
  • 2
    welcome to GIS stack exchange. Thank you for sharing your code, but please edit the question to give more information on exactly where the problem is occurring, and what you are expecting to see. Your code will always load the map with zoom level 6 due to the line containing zoom: 6 - is this the section you are trying to change? Commented Jan 30, 2019 at 3:17
  • github.com/mlevans/leaflet-hash Commented Jan 30, 2019 at 10:08
  • 1
    This is an example of a "wall of code" post. They tend to be downvoted because the critical information about the environment, goal, problem and error message are all missing. Please Edit the question.
    – Vince
    Commented Jan 31, 2019 at 1:18

2 Answers 2


This is a rather vague question (if any) and it has to be elaborated, but from what is already present, you should go with something along the lines of:

map.on('zoomend', function() {
    var zoomLvl = map.getZoom();
    var currentUrl = window.location.href;
    var newUrl = (currentUrl.indexOf("?")>-1) ? currentUrl + "&zoom=" + zoomLvl : "?zoom=" + zoomLvl;
    window.history.pushState({}, null, newUrl);

This will change the address bar text after each zoom change, so when you refresh your page, you will have a "zoom" parameter that you can process in the server side.


You could use HTML5's localStorage

Something like this should work.

// Retrieve
var mapZoomLevel = localStorage.theZoom;
 if (isNaN(mapZoomLevel)) { 
       mapZoomLevel = 12;  //default

map.on('load', function(e){

map.on('moveend', function(e) {
   localStorage.theZoom = map.getZoom();
  • Shouldn't it be on zoomend? Commented Jan 30, 2019 at 21:03
  • Your right, in my app I had to capture the current view, so I used moveend to accommodate pan too. Commented Jan 31, 2019 at 13:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.