Leaflet Searchable Point Map

Figure 13.19 shows a powerful Leaflet template of a searchable and filterable point map, which draws from a CSV data file, developed by Derek Eder from DataMade. This map allows you to show points of interest, filter them by using Search by name functionality, and show them as a list instead of points on a map. In addition, the About page gives you plenty of space to talk about your map.

Explore the interactive Searchable Map template.

Figure 13.19: Explore the interactive Searchable Map template.

This template uses Leaflet.js in combination with Google Maps API to perform address search.

To begin using the template for your own project, visit the template’s GitHub page, and fork it so that you get your own copy (see Edit and Host Code with GitHub chapter to remind yourself about forks).

Step 1: Get and prep your data

This template will work with data in csv and geojson formats.

If you have an xls or xlsx spreadsheet, you can save it as a csv file from Excel, Numbers, Libre Office or your spreadsheet tool of choice.

The csv file must have a latitude column and longitude column and all rows must be geocoded. If you don’t have this, but have information like a street address, you’ll need to geocode your data.

Here’s a few tools for geocoding:

Step 2: Download and edit this template

  1. Download or clone this project and fire up your text editor of choice. Open up /js/map.js and set your map options in the SearchableMapLib.initialize function:
  • map_centroid - the lat/long you want your map to center on (find yours here)
  • filePath - Path to your map data file. This file needs to be in csv or geojson format and placed in the data folder. This file’s first line must be the header, and it must have a latitude column and longitude column.
  • fileType - Set if you are loading in a csv or geojson file
  1. Edit the templates in the templates folder for how you want your data displayed. These templates use EJS, which allows the display of your variables with HTML, as well as conditional logic. Documentation is here.
  • /templates/hover.ejs - template for when you hover over a dot on the map
  • /templates/popup.ejs - template for when a dot on the map is clicked
  • /templates/table-row.ejs - template for each row in the list view
  1. Remove the custom filters and add your own.
  • index.html - custom HTML for filters starts around line 112
  • /js/searchable_map_lib.js - logic for custom filters starts around line 265

Step 3: Publishing your map

  1. Before you publish, you’ll need to get a Google API key. You can get on here. Replace the API key on this line of index.html with yours: <script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&key=[YOUR KEY HERE]"></script>
  2. Upload this map and all the supporting files and folders to your site. This map requires no back-end code, so any host will work, including GitHub pages, Netlify or your own web server.