1

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

  • 1
    You can add that code after this line markers.addTo(map); – muzaffar Jan 11 '17 at 6:08
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.