Search code examples
javascriptleafletmarkersnon-interactive

Make leaflet markers non-interactable but searchable

So I'm using Leaflet Search and a bunch of invisible leaflet markers to reference a bunch of street names that way it's easier for a user to find a street location and the nearest markers to those street locations, the issue is is the following; My invisible markers that the user is not suppose to see are covering up the actual visible markers that the user is suppose to see and be able to click on.

Here's the code I wrote for the invisible markers (you can ignore the variable iconLocation as it's basically just an invisible icon):

// Icons
var iconLocation = L.icon({
    iconUrl: '../assets/images/map/blips/Blip-Blank.png',
    iconSize: [32, 32],
    popupAnchor: [0,0],
});

// Read JSON Streets File
readTextFile('../assets/js/views/map/streets.json', function (text) {
    dataStreets = JSON.parse(text);

    // Populate map with invisible street markers
    for (i in dataStreets) {
        var title = dataStreets[i].title,   //value searched
            loc = dataStreets[i].loc,       //position found
            marker = new L.Marker(new L.latLng(loc), {title: title}, {icon: iconLocation} );//se property searched
        marker.setOpacity(0);
        markersLayer.addLayer(marker);
    }
});

Now, if I put { interactive: false } into the L.Marker function, it will bug out the search function with the following error:

Uncaught TypeError: Cannot read property 'properties' of undefined

Any ideas fellow codejunkies?

Solution

  • You want to use one of the marker options, when you're setting the marker, to set the Z-Index

                marker = new L.Marker(new L.latLng(loc), {title: title, zIndexOffset: 1000}, {icon: iconLocation} );

    This will set this layer above the layer that you need.

    Documentation for the options is here: https://leafletjs.com/reference-1.7.1.html#marker-zindexoffset