1

When I choose a spot from list it zooms in to it but it doesn't open/popup with label/text. Any one knows? suggestions??

This is my code;

            // - SEARCH ENGINE - //

var clusterSpots = L.markerClusterGroup();
    // - Variable for search source(kitespots) - //
var searchSpots = L.geoJson(kitespots, {
    onEachFeature: function(feature, layer) {
        var popup = '';
        
        if (feature.properties.name) {
            popup += "<p><b> "+feature.properties.name + "</b><br/>" 
            + "Wind Direction: " + feature.properties.windDirection;
        }
        layer.bindPopup(popup);
    }
});
    // - Create search engine and place it on the map - //
var selector = L.control({
    position: 'topright',
    opacity: 0.8,
    size: 10
});
selector.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'list-group-item');
    div.innerHTML = '<select id = "selectSpot"><option value = "init">KITESPOTS</option></select>';
    return div;
};
selector.addTo(map);

    // - Function to browse and choose spots - //
searchSpots.eachLayer(function(layer) {
    var spotChoice = document.createElement("option");
    spotChoice.innerHTML = layer.feature.properties.name;
    spotChoice.value = layer._leaflet_id;
    L.DomUtil.get("selectSpot").appendChild(spotChoice);
});
    // - The selectSpot variable for the DomEvent listener. - //
var selectSpot = L.DomUtil.get("selectSpot");
    // - Select kitespot on click - //
L.DomEvent.addListener(selectSpot, 'click', function(e) {
    L.DomEvent.stopPropagation(e);
});
    // - ChangeHandler zooms in on choosen spot with popup.""
L.DomEvent.addListener(selectSpot, 'change', changeHandler);
function changeHandler(e) {
    var selected = searchSpots.getLayer(e.target.value);
        clusterSpots.zoomToShowLayer(selected, function() {
            selected;
         
        })
    }
clusterSpots.addLayer(searchSpots);
 map.addLayer(clusterSpots);
1

You didn't mention you are using Leaflet.markercluster plugin , which is not part of standard Leaflet distribution.

If you look at the docs of .zoomToShowLayer(layer, callback) plugin method, you'll read:

Zooms to show the given marker (spiderfying if required), calls the callback when the marker is visible on the map.

There is no mention of popup being opened automatically, but you have callback function where it can be done. Popups are usually opened by mouse click, but you can also open them with marker .openPopup() method.

In your case that would be:

function changeHandler(e) {
  var selected = searchSpots.getLayer(e.target.value);
  clusterSpots.zoomToShowLayer(selected, function() {
    selected.openPopup();       
  });
}
4
  • It works great! Newbie here. Thank you so much! @TomaziM – Liah Cheston Jan 26 at 18:34
  • If answer helped you solve your problem, it's customary on GIS SE site to mark it as accepted, to let others with similar problems know that problem was resolved. – TomazicM Jan 26 at 18:59
  • Hope I did it right! Thank you so much @TomazicM – Liah Cheston Jan 26 at 20:29
  • Yes, that's it. – TomazicM Jan 26 at 20:57

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.