[GIS] Highlighting polyline features in mapbox-gl.js

mapboxmapbox-glmapbox-gl-js

I am trying to use the following code to highlight features under the mouse pointer.

The difference between my geojson data and the geojson data used in the linked example is that the example is made up of polygons whereas my geojson is made up of polylines. I have tried to modify the code accordingly in order that lines are highlighted however it does not work.
My geojson is accessible here:

http://iskandarblue.github.io/mapbox/data/prototype2.geojson

Any advice on what needs to be changed?

Example:
https://www.mapbox.com/mapbox-gl-js/example/hover-styles/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet'/>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v8',
    center: [37.625224, 55.744537,],
    zoom: 13
});

    map.on('style.load', function () {
        map.addSource("streets", {
            "type": "geojson",
            "data": "http://iskandarblue.github.io/mapbox/data/prototype2.geojson"
        });

        map.addLayer({
            "id": "m_streets",
            "type": "line",
            "source": "streets",
            "interactive": true,
            "layout": {},
            "paint": {
                "line-color": "#627BC1",
                "line-width": 2.5
            }
        });

        map.addLayer({
            "id": "route-hover",
            "type": "line",
            "source": "streets",
            "layout": {},
            "paint": {
                "line-color": "#627BC1",
                "line-width": 2.5
            },
            "filter": ["==", "rd_name", ""]
        });

        // When the user moves their mouse over the page, we look for features
        // at the mouse position (e.point) and within the states layer (states-fill).
        // If a feature is found, then we'll update the filter in the route-hover
        // layer to only show that state, thus making a hover effect.
        map.on("mousemove", function(e) {
            map.featuresAt(e.point, {
                radius: 5,
                layer: ["m_streets"]
            }, function (err, features) {
                if (!err && features.length) {
                    map.setFilter("route-hover", ["==", "rd_name", features[0].properties.rd_name]);
                } else {
                    map.setFilter("route-hover", ["==", "rd_name", ""]);
                }
            });
        });
    });



   //.addTo(map);


</script>
</body>
</html>

Best Answer

This code to filter all features in the map --> to only the features of layers you added

Map here refers to the map you created from mapbox '''Hope this hint helps you''''

map.on("click", function (e) {
    var features = myMap.queryRenderedFeatures(e.point);
    let isFeature = false;
    let buffered, myFeat;
    for (let i = 0; i < features.length; i++) {
      if (features[i].source !== "composite") {
        isFeature = true;
        myFeat = features[i];
      }
    }

    if (isFeature) {
//put your logic
}
Related Question