El zoom de la rueda del ratón en el mapa del folleto sólo después de hacer clic

Question

Quiero hacer que el zoom en la rueda del ratón sólo se active después de hacer clic una vez en el mapa, como se describe en El zoom de la rueda del ratón del folleto sólo después de hacer clic en el mapa pero como novato en todo esto, no sé dónde poner el código publicado en el hilo mencionado.

Este es mi código hasta ahora:

<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);
});

Answer 1

En primer lugar, como se sugiere en la respuesta original es necesario añadir una opción a map cuando se construye:

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

A continuación, añada el oyente inmediatamente después de esto. Así que todo se convierte en

// 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

Para saber más sobre L.Map y añadirle opciones, consulte el Documentación del folleto .