maplibre-arrows

A maplibre-gl-js plugin for drawing vector arrows with geographic coordinates. See this blog post for a live demo and motivation.

Installation

NPM

npm install --save @awesompehant/maplibre-arrows

Browser

<script src="https://unpkg.com/@awesomephant/maplibre-arrows@latest/dist/index.min.js"></script>

Usage

HTML

<div id="map"></div>

Javascript

// Initialise maplibregl
const map = new maplibregl.Map({
	container: "map",
	style: "https://demotiles.maplibre.org/style.json",
	center: [-96, 35],
	zoom: 3.3
});

// Initialise maplibreArrows with the map object and a configuration object
const arrows = new maplibreArrows(map, {
	arrows: [
		{
			layout: "straight",
			lineColor: "#bf3a1a",
			lineWidth: 38,
			points: [
				[-81, 35],
				[-88, 43],
				[-82, 41]
			]
		}
	]
});

Configuration

maplibreArrows() takes two parameters:

• map (required): Map
• options (required): configuration object of the following shape:
  • ArrowSpec[] (required): The initial set of arrows to render

ArrowSpec is an object of the following shape:

• points (required): Array of points in geographic coordinates.
• layout: "quadratic" | "straight"
• lineColor: color
• lineWidth: number

Contributing

This project uses esbuild and Node's built-in test runner.

• npm i to install dependencies
• npm run test to run unit tests
• npm version {patch, minor, major}
• npm publish --access public