Mapbox GL Marker Compass

Plugin for Mapbox GL JS to create small marker compasses at the edge of the screen to indicate markers outside the viewport.

Live Demos

Basic usage

Example project usage

Instructions

1. Add the package

pnpm add mapboxgl-marker-compass # or npm, yarn

2. Add CSS, import module, create a map and markers

<link
  href="./dist/mapboxgl-marker-compass.css""
  rel="stylesheet"
/>

import { MarkerCompass } from "mapboxgl-marker-compass/dist/mapboxgl-marker-compass.mjs";

const map = new mapboxgl.Map({
  container: "map",
  center: [13.404954, 52.520008],
  zoom: 9,
  projection: "equirectangular", // Works best with equirectangular maps
});
const markers = [
  new mapboxgl.Marker().setLngLat([13.404954, 52.520008]).addTo(map),
];

3. Pass the map and markers to the MarkerCompass constructor

new MarkerCompass(map, markers, {
  // Options, see below
});

Options

| Option | Default | Description | | ----------------- | --------- | -------------------------------------------------------- | | offset | 10 | Offset of the compass element to the viewport edge in px | | width | 20 | Width of the compass element in px | | height | 20 | Height of the compass element in px | | backgroundColor | #3FB1CE | Background color of the compass element and arrow | | arrowSize | 4 | Size of the arrow in px | | arrowOffset | 14 | Offset of the arrow to the compass element in px | | flyToZoom | 12 | Zoom level when clicking on the compass element in px |

⚠️ Note

Works best with equirectangular map projection

Copyright

© 2024 Marco Land

License

AGPL-3.0