Leaflet JavaScript – Highlight Feature by ID

javascriptleaflet

I have a map application where:

I load polygons as GeoJSON objects
I draw all polygons in a single layer
I highlight a polygon on mouse hover

What I need to do is the following: on mouse hover, I need to highlight multiple polygons (I get the list of polygons somehow – irrelevant -). I have the IDs of all the polygons I need to highlight, but I can't see how can I access them though the API.

Best Answer

You would have to store polygon IDs in onEachFeature(feature, layer) handler (e.g. layer._polygonId = feature.id), so later you can iterate over layers (e.g. jsonLayer.eachLayer(function(layer) { setHighlighted(layer, doesRelate(layer._polygonId, selectedId)); });.

Related Solutions

[GIS] How to highlight track in KML on hover with OpenLayers

Your code has no SelectFeature handlers.

Look at the source code of the sample you linked to, there are 2 controls, one that acts on a "highlight" (or a "hover") and the other on a select/click. You need to create handlers like that and add your vector layer to it.

...from the sample file

var highlightCtrl = new OpenLayers.Control.SelectFeature...
...
var selectCtrl = ...

[GIS] Select one feature of multiple overlapping features (here polygons) on a Leaflet map

I found a solution working for me, but it's maybe not the most elegant one. If the point clicked is contained in multiple polygons (match.length > 1), I generate this info string. In each iteration the for-loop creates a clickable link which then calls a function on click depending on the id. So I basically have to generate a lot of HTML in one single string and work with literals and string concatenation. Then I call the openPopup function with info as my html param.

function processClick(lat, lng) {
  var info = '';
  var point = [lng, lat];
  var match = leafletPip.pointInLayer(point, mapVue.layer, false);
  if (match.length > 1) {
    for (var i = 0; i < match.length; i++) {
      id = match[i].feature.properties.zoneid;
      name = match[i].feature.properties.name;
      info +=
      "<b><a onclick='dispatchZoneID(\"" + id + "\")();'>"+ name + "</a><br>"
    }
  }
  else dispatchZoneID(mapVue.zoneid)();

  if (info) {
    mapVue.map.openPopup(info, [lat, lng]);
  }
};

Best Answer

Related Solutions

[GIS] How to highlight track in KML on hover with OpenLayers

[GIS] Select one feature of multiple overlapping features (here polygons) on a Leaflet map

Related Question