[GIS] Mouse wheel zoom on leaflet map only after click

leafletmouse-wheelzoom

I want to make the zoom on mouse wheel only active after clicking once on the map, as described in Leaflet mouse wheel zoom only after click on map, but as a newby to all of this, I don't know where to put the code posted in the above mentioned thread.

This is my code so far:

<script>
// ADD YOUR BASE TILES
var baseLayer = L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
    maxZoom: 10
});
// DEFINE THE CLUSTER LAYER
var markers = L.markerClusterGroup({
    scrollWheelZoom: false,
    showCoverageOnHover: false,
    maxClusterRadius: 10,
    iconCreateFunction: function (cluster) {
        var markers = cluster.getAllChildMarkers();
        return L.divIcon({html: '<br>' + '<div style="text-align:center;color:#151515">' + cluster.getChildCount() + '</div>', className: 'mycluster', iconSize: L.point(30, 30) });
    },

});


// CALL THE CARTODB SQL API HERE IN URL FORMAT
$.getJSON('http://wolframkafundo.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM artists_all', function(data) {
    var geojsonMarkerOptions = {
        radius: 8,
        fillColor: "#00853E",
        color: "#E31C23",
        weight: 2,
        opacity: 0.8,
        fillOpacity: 0.7
    };

    var geojson = L.geoJson(data, {

        pointToLayer: function (feature, latlng) {
            var popupOptions = {maxWidth: 700};
            var popupContent = 
                    '<a target="_blank" class="popup" href="' +
                    feature.properties.page_link + '">' +
                    '<h2>' + feature.properties.artist + '</h2>' + 
                    '<img width="100%" src="' + feature.properties.artist_picture + '"/>' +
                    '</a>' +
                    feature.properties.soundcloud_embed +
                    feature.properties.soundcloud_embed_2
                    ;
            var circle = L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent,popupOptions);

            // Highlight the marker on hover
            circle.on('mouseover', function(){
                circle.setStyle({ fillColor: '#E31C23'});
                //this.bindPopup('Hi').openPopup();
            });

            // Un-highlight the marker on hover out
            circle.on('mouseout', function(){
                circle.setStyle(geojsonMarkerOptions);
                //this.bindPopup().closePopup();
            });

            return circle;
        }

    });

    markers.addLayer(geojson);

    // CONSTRUCT THE MAP
    var map = L.map('map').setView([-15, -40], 5);
    baseLayer.addTo(map);
    markers.addTo(map);
});

Best Answer

First, as suggested in the original answer, you need to add an option to map when it's constructed:

var map = L.map('map', {scrollWheelZoom: false}).setView([-15, -40], 5);

Then add the listener immediately after this. So the whole thing becomes

// CONSTRUCT THE MAP
var map = L.map('map', {scrollWheelZoom: false}).setView([-15, -40], 5);
map.once('focus', function() { 
    // what happens on focus goes here
});
baseLayer.addTo(map);
// the rest of your code

To learn more about L.Map and adding options to it, please see the Leaflet documentation.

Related Question