Using Turf.js to Geocode coordinates with custom boundaries

❝Which area/region/zone does this location belong to?❞

Jun 23, 2021

3 min read

While healthcare workers in many countries continue to diligently contact trace and track movements of individuals to identify various "hotspots" – i.e. areas where exceptionally high numbers of infected cases tend to aggregate, this process conventionally requires each identified location to be clustered based on Regions, Zones, Cities etc. (depending on the type of boundaries implemented).

Image by Author | Arbitrary example of the country Singapore where locations frequented by infected cases are represented by a map marker

For the majority of us, when given any postal code or address name, the most instinctive way to find out which Region or Area this location belongs to, e.g. "Location A", is to Google for more information:

Image by Author | Arbitrary example of "Location A" stated to be in the "North Region" & "Area Z"

However, this becomes a completely different story when you are required to handle tens, hundreds or even thousands of unique addresses on a daily basis and tag each location based on area boundaries. While many Geospatial analysts would use software utilities such as ArcGIS or QGIS, I personally prefer a more hassle-free approach which requires no installations such as the Turf.js library.

For short-term Geocoding purposes, this is in my opinion a more down-to-earth approach as code snippets are considerably more transferable than Desktop softwares.

To apply the capabilities of the Turf.js library easily, I have built a readily available online tool for all prior to this post (similar to my previous Tableau-related posts below):

Leverage on D3.js v4 to build a Network Graph for Tableau with ease

Underrated Combined Functionalities of Tableau – Point, LineString & Polygon Mapping

Generate Hex Maps from your existing Spatial Data in less than 3 steps

FYI: The respective utilities from the above articles can be accessed via the very same Web Application:

Image by Author | Note that the past 3 Tableau Utility Tools are currently placed in a dropdown list at Tableau Data Utility

For demonstration, I shall be using the 2 input spatial files (Formats GeoJSON, SHP & KML are accepted)—

(1) Spatial Boundaries (https://github.com/incubated-geek-cc/tableau-data-utility/blob/master/public/data/planningareas.zip)

(2) Spatial Coordinates (https://github.com/incubated-geek-cc/tableau-data-utility/blob/master/public/data/chas_clinics_2020.geojson)

Image by Author | On the web app Tableau Data Utility, navigate to "Geocoder Tool". Step (1) Select the spatial file input (the spatial boundary file is an archive in SHP format). The boundaries would proceed to render into the map container.

Image by Author | On the web app Tableau Data Utility| Step (2) Proceed to select the spatial file input (the spatial coordinates file is in GeoJSON format). The coordinates would proceed to render into the map container. Note: The unique no. of boundaries and coordinates are reflected as shown. — Image by Author | On the web app Tableau Data Utility| Step (2) Proceed to select the spatial file input (the spatial coordinates file is in GeoJSON format). The coordinates would proceed to render into the map container. **Note: The unique no. of boundaries and coordinates are reflected as shown.**

Image by Author | Step (3) Finally, the geocoded output can be exported as either JSON or CSV.

For demonstration, the above has been exported as CSV and rendered in Tableau as shown below:

Image by Author | Left image: CSV output is rendered without a basemap and coordinates are colour-coded based on boundary name | Right image: Basemap is rendered to contrast the colour-coded coordinates against the actual boundaries. Note that the coordinates are colour-coded distinctly based on the boundaries of the map, meaning that each location had been geocoded successfully. — Image by Author | Left image: CSV output is rendered without a basemap and coordinates are colour-coded based on boundary name | Right image: Basemap is rendered to contrast the colour-coded coordinates against the actual boundaries. **Note that the coordinates are colour-coded distinctly based on the boundaries of the map, meaning that each location had been geocoded successfully.**

To illustrate another example, the input files (1) US_States.geojson (spatial boundaries) & (2) US_Hospitals.geojson (spatial coordinates) are used in the following demo instead:

Image by Author | Step (1) Both spatial files US_States.geojson & US_Hospitals.geojson are uploaded at Tableau Data Utility | Step (2) Geocoded coordinates are exported as a single CSV file

Image by Author | The CSV output exported from the previous steps is rendered in Tableau. Based on the basemap boundaries, each US Hospital coordinate had been geocoded successfully.

Feel free to access this Geospatial tool at Tableau Data Utility and try it out by uploading your own spatial files 😀

Side note: [Turf.js](https://turfjs.org/) library is surprisingly underrated and amazingly versatile. To view how Turf.js can be used for other use-cases, feel free to check out: