TLDR

I wrote a simple (~250 LOC) maplibre-gl-js plugin to draw straight and/or curved arrows at geographic coordinates called @awesomephant/maplibre-arrows. It's available on Github and NPM.

Background

I wanted to replicate the arrow graphics from this NYT story as an exercise, but maplibre-gl-js has no built-in way of doing that. The solution I eventually arrived at was to construct a GeoJSONSource representing the arrow heads and tails as vector features, projecting them to map space and rendering them using two or more (depending on the number of unique arrow colours) fill and line layers.

This also also seemed like a good (ie. small enough) project to wrap my head around the process of building, testing and publishing a piece of open-source software, which I hadn't done outside of work. My strategy was to use as little tooling as possible, so I used esbuild for bundling, tsc for type declarations and Node's built-in test runner for unit tests, and I cut releases manually using the npm CLI.

There is a proposal to add symbol-line-anchor property to maplibre's symbol layer which would make this easier and more performant, but it hasn't seen much activity yet.

Prior work

• This 2022 forum thread
• Another implementation of the same idea I did for my job