JavaScript: Interactive Leaflet.js map with search bar

JavaScript: Interactive Leaflet.js map with search bar

In our previous posts about Leaflet.js, we coded an interactive marker map and learned how to update our data with a google spreadsheet. In this short tutorial, we will show you how to make your map searchable so users can find a specific marker.

We’ll use the code of the already finished map that’s hosted on our GitHub page so we don’t have to start at the very beginning again. Simply download the directory to your computer and open it in your text editor. If you’ve never created an interactive map with Leaflet.js before, please have a look at the two tutorials mentioned above before proceeding with this one.

HTML

Adding a search bar to the map isn’t hard at all, thanks to Italian programmer Stefano Cudini. He is the author of Leaflet.Control.Search, a JavaScript library that will do the trick for us. First, download the libraries’ JS and CSS code from his GitHub repository and save it in the map’s directory. It is currently named loop_google_spreadsheet, but you can rename it to whatever you want.

Now, open index.html in the editor and include the two files you just downloaded:

Done. Now we get to the part where we’ll change a little bit more of our map code.

JavaScript

Adding a visual search bar to the map is easy. First, we have to create a new layer which will be searchable later. Then we add the search control. This is how it’s done:

If you want a nice search icon to appear on the bar, download the images directory of Stefano Cudinis library and copy it into your map directory. Now, when you open the index file in a web browser, you should see the search bar on your map.

The search bar is useless as of now, since we haven‘t given the search bar any data to look through. So in the next step, we want to fill markersLayer with the search keywords and the markers’ location. We use the code of the Google Spreadsheet map, so we’ll load the data with Tabletop, like we did in the previous tutorial, and set the URL, size and orientation of our icons. But we’ll delete or comment out the entire part where we actually add the markers on the map:

Now, to add the markers with matching popups to the map and also to the search corpus, we have to add the markers to markersLayer. We define the value searched as the markers’ title and the found position as loc. Then we’ll save every new L.marker as marker, bind the popup and add the whole thing to our layer.

And that’s basically it! Now you can search for the newsrooms’ names and have the map zoom to their corresponding location. You can also add the snippet

to zoom back to the normal level once you close the search bar.

And this is what your result should look like. Click on the search symbol, type in “Dat” and see what happens.

As always, you’ll find the entire code for this example on our GitHub page. If you have any questions, suggestions or feedback, feel free to leave a comment! We’ll try to answer fast.

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>