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.
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
If you have an
xlsx spreadsheet, you can save it as a
csv file from Excel, Numbers, Libre Office or your spreadsheet tool of choice.
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:
- Google has the best geocoder in terms of accuracy. They have an API that you can use, but may cost you money depending on how many rows you have to geocode.
- To geocode addresses inside Google Sheets, install the free Geocoding by SmartMonkey Add-On for Google Sheets. See geocoding instructions in Hands-On Data Visualization.
- Geocoding in QGIS (uses OpenStreetMap)
- Texas A&M
Step 2: Download and edit this template
- Download or clone this project and fire up your text editor of choice. Open up
/js/map.jsand set your map options in the
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
datafolder. 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
- Edit the templates in the
templatesfolder 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
- 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
- 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
- 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.