2

Background

I am trying to build a web map (using leaflet) that shows the location and extent of orienteering maps owned by a number of clubs/organisations in my state. Each club/organisation has a layer that is populated with their maps. To make finding these maps easier, the ability to search by name is required.

The Problem

To be able to search all layers at once I have grouped them into a layerGroup (as suggested in this answer). This does not produce a result when I attempt to search for a map (the developer console throws the error TypeError: a.getLatLng is not a function in relation to leaflet-search.js). Searching with only one layer does produce a satisfactory result (and doesn't throw an error).

Here is my current code
The webmap with search through multiple layers
The webmap with search through only one layer

How can this error be solved? Is there a better method to search through multiple layers?

1

I got around this by using the JQuery autocomplete control. My example uses three different polygon layers, In the onEachFeature I tagged the layer_id with the feature attribute I was going to search on. I also pushed the attribute and the layer name into an array for each layer. Then I combined all three arrays, sorted it, removed duplicates, and then used it as the autocompletes source. I ran into a timing issue as the control loaded before it's source data but was able to get around that. The next step was when they chose a name, I made sure the layer was on, and did a fire event to highlight, popup, and zoom to.

Here is a working example. http://www.gistechsolutions.com/leaflet/DEMO/senate/index.html

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.