1

I am trying to highlight individual features in a grid that contain Jobs data from an $.ajax call. I already have a highlight function that highlights the grid cells when they are moused over and I have the cells that do have jobs displaying data for those jobs (in a popup) when moused over.

function highlightFeature(e) {
 var layer = e.target;
 layer.setStyle({
  weight: 0.25,
  fillColor: "#ffff00",
  dashArray: '',
  fillOpacity: 0.5
 });
 info.update(layer.feature.properties);

Now I want to just highlight those cells with jobs data from the get-go so that when the map app is opened, if there are any cells that contain jobs, they will immediately be visible (this will change as jobs are deleted and added by the user). So far, the below code works for adding the popup content for cells with jobs data. How can I use my highlightFeature(e) function to highlight that cell if it's got Jobs data (item.cid === id)? I know there is just something small I am missing in apply the function to that feature (feature.highlightFeature?)

 onEachFeature: function( feature, layer ){
            var id = feature.properties.CID;
            var lat = feature.properties.LAT;
            var lon = feature.properties.LON;
            var popupContent = "";

            JobsArray.forEach(function (item) {
              if(item.cid === id) {
              <?highlightFeature?>
              }

1 Answer 1

1

Your highlightFeature(e) function is based on listening to a layer's event. If you are using this function for both cases (hover on a layer (or other) and initiating a layer) you can cast it/ use a default parameter :

   function highlightFeature(e, l) {
      var layer = l == null ? e.target : l; 
      layer.setStyle({
      weight: 0.25,
      fillColor: "#ffff00",
      dashArray: '',
      fillOpacity: 0.5
   })};


You can then call the function with highlightFeature(undefined, layer).
If you don't need the default hover behavior you can just change the function to:

function highlightFeature(layer) {
   layer.setStyle({
   weight: 0.25,
   fillColor: "#ffff00",
   dashArray: '',
   fillOpacity: 0.5
 })};

And call it with highlightFeature(layer).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.