stefanocudini / leaflet-search

Search stuff in a Leaflet map
https://opengeo.tech/maps/leaflet-search/
MIT License
782 stars 334 forks source link

Searching within more columns/attributes #52

Closed rostanetek closed 7 years ago

rostanetek commented 9 years ago

I´am use the searching on GeoJSON, it works fine. But is there any possibility to search within more than one column/attribute? For example if you have in table columns "id", "name", "owner", etc. Currently you can write down only one attribute in "propertyName". And I want to searching within "name" as well as "owner". Thanks

kaio328 commented 7 years ago

any solution here?

reyemtm commented 7 years ago

is this a duplicate of https://github.com/stefanocudini/leaflet-search/issues/34

To search more than one attribute/field, what you can do is create a new field to search on, that is a combination of whatever fields you want to search. You can do this in your GIS software, or in your Leaflet map. For example, if you want to search name, address and zipcode, you could create a new field called, for example, "index". Do this outside of leaflet search, before it is added:

L.geoJson(yourgeojson, {
    onEachFeature: function(feature, layer) {
        var p = layer.feature.properties;
        p.index = p.name + " | " + p.address + " | " + p.zip;
    }
}).addTo(map);

//then after the data has loaded, on('ready' or on('data:loaded' or whatever , add the data to leaflet search

Maybe not the best solution, but it works and is very easy. I am using this method in several maps.

indeOWS commented 7 years ago

Hi reyemtm, Thank for the solution. Now, I have another issue in the same direction: I have several layers/Geojson (polygon and points). Is there any solution to make only one search in different column/attributes of different Geojson. Let's say that attribute "location" is in Json1 only and attribute "area" is in Json2 only, How could a I make only one search control for "location" and "area" in Json1 and Json2 respectively? Thank you for your time in advance

stefanocudini commented 7 years ago

this is a duplicate of #34

stefanocudini commented 7 years ago

@juliermegeotube try to look here: http://labs.easyblog.it/maps/leaflet-search/examples/multiple-layers.html

reyemtm commented 7 years ago

Have you tried adding all the geojson to one group L.geoJson, then search on this grouped feature? The columns you want to search would have to have the same name - again you could create an index field before you add all your layers to the grouped layer.

I think I have done this before. I'll send a link as soon as I find one.

Here is the code, though I think I had to adjust an older version of this search plugin to search on lines at points. I'm not sure why I used layerGroup instead of L.GeoJSON but anyway -

var group = new L.layerGroup();

roads.on('data:loaded', function() {//roads are larger file and take longer to load group.addLayer(roads); group.addLayer(points); group.addTo(map); });

var search = new L.Control.Search({ layer: group, minLength: 3, initial: false, propertyName: 'name',//name is in both layers circleLocation:false, collapsed:false, textPlaceholder:'Search by Project Name', zoom:'16' }).addTo(map);

Thanks

On 9/29/17, juliermegeotube notifications@github.com wrote:

Hi reyemtm, Thank for the solution. Now, I have another issue in the same direction: I have several layers/Geojson (polygon and points). Is there any solution to make only one search in different column/attributes of different Geojson. Let's say that attribute "location" is in Json1 only and attribute "area" is in Json2 only, How could a I make only one search control for "location" and "area" in Json1 and Json2 respectively? Thank you for your time in advance

-- You are receiving this because you commented. Reply to this email directly or view it on GitHub: https://github.com/stefanocudini/leaflet-search/issues/52#issuecomment-333253400

-- Malcolm T Meyer

indeOWS commented 7 years ago

@reyemtm and @stefanocudini thank you very much for the help. I can search all nautical charts polygon using @reyemtm code:

{ var p = layer.feature.properties; p.index = p.name + " | " + p.address + " | " + p.zip; } However I am getting a error while doing the same for the tide gauges point geojson ( maregrafos.json). Here is my code:

var markers_tide = L.markerClusterGroup(); var tide_gauges = L.geoJson(station, { onEachFeature: function (feature, layer) { layer.bindPopup("Estação Maregráfica: "+feature.properties.ESTACAO+"
"+ "ID: "+feature.properties.ID+"
"+ "F-41: "+feature.properties.URL); },
pointToLayer: function(feature, latlng) { return L.marker(latlng, {icon: maregrafoIcon}); }

// creating another attribute "index" in the Geojson in order to maximize the search control. var p = layer.feature.properties; p.index = p.ID + " | " + p.ESTACAO + " | ";

  });

markers_tide.addLayer(tide_gauges); // add it to the cluster group map.addLayer(markers_tide);

Here the Error Message: SyntaxError: missing } after property list Any help on that, please?

Thank you very much in advance

indeOWS commented 7 years ago

If I comment the code

var p = layer.feature.properties; p.index = p.ID + " | " + p.ESTACAO + " | "; The API works fine. I tried playing with some parenthesis, but I could not find the error. Thanks

indeOWS commented 7 years ago

Hi All, I got the solution. Thank you very much @stefanocudini and @reyemtm.

Find code bellow:

onEachFeature: function (feature, layer)

      {
      layer.bindPopup("Esta&#231;&#227;o Maregr&#225;fica: "+feature.properties.ESTACAO+"<br>"+
                      "ID: "+feature.properties.ID+"<br>"+
                      "F-41: "+feature.properties.URL);//just to show something in the popup. could be part of the geojson as well!
      // creating another attribute "index" in the Geojson in order to maximize the search control. If needed, by removing the next two lines the code in fuction onEachFeaturestylelargegeoj does not make any change.               
      var p = layer.feature.properties;
        p.index = p.ID + " | " + p.ESTACAO + " | ";                   
      },              
      pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {icon: maregrafoIcon});
      }   

  });
stefanocudini commented 7 years ago

@juliermegeotube thank you too for share! ^_^

hjrobinson commented 6 years ago

I hate to be a pest, but is there a working example available of how to search two columns of GeoJSON data? I tried my best to understand the solutions presented here. Please use the geojson-layer.htm example as the basis. For example, I would like to know how to be able to search for both name and density in the us_states.js file. I'm new at this thanks for your help!