3

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?

6

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);
    
| improve this answer | |
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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