[GIS] Leaflet ‘Click’ event on line portion

geojsonjavascriptleafletline

I have a polyline as GeoJSON layer in Leaflet.

I need a JavaScript event when the user click on the portion of the line.

I have to highlight the selected line segment. Is it possible this?

Best Answer

Here is the basic idea, set a style for the line, and set a style for the highlight, then in your forEachFeature function, set the layer on click to highlight. My example below resets the style in case, you clicked on one before.

var highlight = {
    'fillColor': 'yellow',
    'weight': 2,
    'opacity': 1
};

    function forEachFeature(feature, layer) {

        layer.on("click", function (e) { 
            stateLayer.setStyle(style); //resets layer colors
            layer.setStyle(highlight);  //highlights selected.
        }); 
    }

Here is a working example for a polygon layer. http://www.gistechsolutions.com/leaflet/DEMO/basic/basic_Poly.html

Related Solutions

Leaflet – Navigate to URL on Click with GeoJSON

Keep the code the same just replace the map.fitBounds(e.target.getBounds()); with window.open('http://www.google.com','_blank');

[GIS] How to highlight features on user click in Leaflet

In order for something to happen when you click/hover/drag on the map or a feature, such as a point or polyline, you need to add map events.

The following code shows a popup containing the lat/long location of the mouse when the user clicks on the map:

function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

The leaflet quick start guide provides additional examples.

Here's another simple example from a recent app I created:

This code 'highlights' the selected layer (based on the layer ID) by setting the layer style

function highlightLayer(layerID) {
    map._layers['name'+LayerID].setStyle(highlight);
}

This bit of code is simple a variable containing the style I want the feature to possess when it is highlighted.

var highlight = {
    'color': '#333333',
    'weight': 2,
    'opacity': 1
};

You can fire this code using the events mentioned above (click, hover, etc.)

Best Answer

Related Solutions

Leaflet – Navigate to URL on Click with GeoJSON

[GIS] How to highlight features on user click in Leaflet

Related Question