Change marker color based on GeoJSON filter in Leaftlet

Question

This is what I would like to do:

Display all features of a GeoJSON file using Leaflet. Provide a text box where a property can be entered, if any of the GeoJSON properties match with what is entered in the text box the marker icon color is changed.

Does anyone know of an example of this or an idea of how this should be done?

Answer 1

here is a rough, general approach, with a few code examples (using jQuery/javascript):

1. Set up a couple of color styles for the markers (using circle markers here)

   var blueMarker = {
     radius: 8,
     fillColor: "#0000ff"
   };
   
   var redMarker = {
     radius: 8,
     fillColor: "#ff0000"
   }
   

2. Add the geojson features as L.circleMarkers, keeping track of each as a layer for color change. (Assuming here your feature properties have a "name" attribute; change as needed)

   var layerlist = {};  
   L.geoJson(data, {
     pointToLayer: function (feature, latlng) {
       return L.circleMarker(latlng, blueMarker);
     },
     onEachFeature: function(feature, layer) {  
       layerlist[feature.properties.name]=layer;  
     }
   }).addTo(map);  
   

3. Get the feature name from the input text box (not a plugin here, just regular html form input)

   // on change or submit
   var name = $(input).val();
   

4. Remove the layer by name

   map.removeLayer(layerlist[name]);
   

5. Add the layer by name, and restyle

   layerlist[name].addTo(map).setStyle(redMarker);
   

Answer 2

Just go to the page for Leaflet.Control.Search

You can see an example that do what you expect if I do not misunderstand.

For simple need, think to go to Leaflet plugins page: some plugins may help you.