How can I fire a zoom out event in browser resize?

Question

I am using leafletjs for my test app. I need to fire the zoomout event when the browser is resized.

Here is my browser resize code:

(function(){
    $(window).on("resize", resize); 
    function resize() {
        "use strict";

        if($(window).width() <= 765){
            mapOptions.zoom = 5;
            console.log(mapOptions.zoom);
        }
    }
})();

This code if to show the map:

L.TopoJSON = L.GeoJSON.extend({
    addData: function(jsonData) {    
        if (jsonData.type === "Topology") {
            for (key in jsonData.objects) {
                geojson = topojson.feature(jsonData, jsonData.objects[key]);
                L.GeoJSON.prototype.addData.call(this, geojson);
            }
        } else {
            L.GeoJSON.prototype.addData.call(this, jsonData);
        }
    }  
});

var tiles = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
var latlng = new L.LatLng(28.40, 84.15);
mapOptions={
    dragging: false,
    zoomControl: true,
    scrollWheelZoom: false,
    doubleClickZoom: false,
    touchZoom: false,
    attributionControl: false,
    center: latlng,
    zoom: 7,
    layers: [tiles]
};
console.log(mapOptions.zoom + 'first');

map = L.map('map-nepal', mapOptions);
map.invalidateSize();

var topoLayer = new L.TopoJSON();
$.getJSON('js/map/districts.topo.json').done(addTopoData);

What I have done is create a global variable called mapOptions. First the map is initialized with mapOptions.zoom = 7 and when the browser is resized, then I have changed the value of the mapOptions.zoom to 6. The value has changed but there is no effect in zoom of the map.

Answer 1

If you want to change the zoom level of the map, try setZoom() function instead of mapOptions.zoom when you want to change the zoom level of map. So, in your case, use this

map.setZoom(6);

Hope it'd work.