CODEWITHSUNDEEP
javascripthtmlleaflet
jcarapia
jcarapia

Reputation: 640

Leaflet minimap scrollwheel zoom disable

I am having an issue disabling scrollwheel zoom in Leaflet Minimap. I am instantiating the minimap with a centerFixed and a zoomLevelFixed option as per https://github.com/Norkart/Leaflet-MiniMap/pull/95 but I can still zoom with the scroll wheel; Panning is disable though.

The following is the code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="fullscreen.css" />
    <!-- Leaflet -->
    <link rel="stylesheet" 
    href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" 
    type="text/javascript"></script>

    <!-- Leaflet Plugins -->
    <link rel="stylesheet" href="Control.MiniMap.css" />
    <script src="Control.MiniMap.js" type="text/javascript"></script>

    </head>

    <body>
     <div id="map" ></div>

     <script type="text/javascript">

     var map = new L.Map('map', { scrollWheelZoom: false});
     var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
     var osmAttrib='Map data &copy; OpenStreetMap contributors';
     var osm = new L.TileLayer(osmUrl, {/*minZoom: 5, maxZoom: 18,*/ attribution: osmAttrib});
     map.addLayer(osm);
     map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);

     //Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls
     var osm2 = new L.TileLayer(osmUrl, {/*minZoom: 0, maxZoom: 13,*/ attribution: osmAttrib });


     var miniMap = new L.Control.MiniMap(osm2, 
        { position: "topright",
          centerFixed: [40.7842, -73.9919],
          toggleDisplay: true, 
          zoomLevelFixed: true
        }).addTo(map);
     </script>
    </body>
    </html>

I appreciate any guidance in solving this issue. Thank you!

Upvotes: 10

Views: 10592

Answers (2)

Md Khairul Islam
Md Khairul Islam

Reputation: 461

It will also work when you pass as arguments:

 var map = L.map('map', {
        center: [51.505, -0.09],
        zoom: 13,
        scrollWheelZoom: false
    });

Upvotes: 4

Rahul M S
Rahul M S

Reputation: 266

I suppose you should use disable instead of false.

    map.scrollWheelZoom.disable();

Upvotes: 23

Related Questions