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

Question

I am using leafletjs for my test application. I need to trigger a zoom event when resizing the browser.

Here is my resize code for my browser:

 (function(){ $(window).on("resize", resize); function resize() { "use strict"; if($(window).width() <= 765){ mapOptions.zoom = 5; console.log(mapOptions.zoom); } } })(); 

This code, if you display a 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); 

I created a global variable mapOptions . First, the map is initialized using mapOptions.zoom = 7 , and when the browser size changes, I changed the value of mapOptions.zoom to 6 . The value has changed, but the zoom effect has not changed.

Answer 1

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

 map.setZoom(6); 

Hope this works.