Map Maker: Spiking on Plus Codes and Mapbox Turf

In the current version of Garibaldi I have a thing called the "Reticule" which is the central area of the Map that is split apart into streets. This is defined as being some percentage reduction of the browser viewport size, so it is entirely relative to the current display. This was more than enough for me to get this far.

However, to be able to mix and match segments of different Maps I'll need to register the segments as real physical objects with size and position. My planned way to do this is to make the Reticule correspond to a real physical area by having a defined center + a width and height in kilometres, and then use this as a reference area for the embedded segments. I also want something that can be used as a good canonical address for any interesting area.

For this spike I've been looking at Open Location Codes (aka Plus Codes) for the center and Turf for defining the width / height.

I've got some good prior experience in using geohashes, but wanted something with a bit more awareness; Plus Codes having Google Maps support is a biggy for this. The description of OLC in the official repo is also quite good at explaining why they invented it. If I do find any problems, I can always switch over to geohashes as they work very similarly.

Turf is another library from Mapbox and is as an easy way to use physical areas and distances. In this Spike I am using it in a slightly hacky way to get what I want:

• get lat, lon point center from Plus Code

• for each of width and height, buffer this point by the corresponding km radius (so that it turns into a circle)

• get the bounding box for each of these circles

• construct a MapBox LngLatBounds by taking the latitudes of the corners from the buffered width circle and the longitudes from the buffered height circle

This is super inefficient but gives me what I need.

I then combine these together into a summary text on top of the displayed Reticule, which updates as a I scroll around. Job done! (this Spike may still be previewable, but if not see video at start).

Likely next step: before I can incorporate this, I'll need to do a bit of refactoring in the main App.