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.

Comments ( 2 )

  1. Replyjuancarlos
    Hi Marie-Louise, Awesome tutorial! Thank you for taking the time to create it. The steps were clear. One thing that I am getting an error on is on the latitude and longitude from Tabletop.init function. Sometimes the markers load, sometimes they do not and I get the following: Uncaught Error: Invalid LatLng object: (undefined, undefined) I looked it up here 1) http://stackoverflow.com/questions/32031220/leaflet-uncaught-error-invalid-latlng-object-nan-nan?rq=1 2) http://stackoverflow.com/questions/12773542/combining-google-maps-geocoder-and-leaflet-map-receiving-error-invalid-latlng-o?rq=1 3) http://stackoverflow.com/questions/19772227/leaflet-error-invalid-latlng-object-undefined And tried parsing the data in as float, as number. But still getting the error. Have you seen this behavior before? Do you have an explanation/solution? Once again, thank you for all you hard work and dedication to making this series of great tutorials! Cheers, Juan Carlos
    • Replyjuancarlos
      Hi, Just wanted to follow up. I managed to solve the issue. It had to do with having a google spreadsheet with multiple sheets. I had to specify within Tabletop.init callback which sheet to use. In my case: var sheet1 = tabletop.sheets('Sheet1').elements; Hope this helps others. Cheers, Juan Carlos

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>