20th Apr, 2021Gareth Simons

vue-mapbox-map is a minimalist Vue component wrapping Mapbox GL JS or MapLibre GL for dynamic maps.

In the spirit of keeping things light and not reinventing the wheel: this component wraps only what is necessary for dynamic updates. I needed something to dynamically update a given map’s coordinates, zoom, bearing, and pitch. Otherwise, I wanted to handle the map instance as conventional a manner as possible.

Originally, this component bundled the mapbox-gl instance. This presented two problems. Firstly, the use of a dependency meant that the package had to be updated repeatedly to keep pace with Mapbox’s releases. Secondly, when Mapbox’s v2 parted ways with the open-source world, it meant that there would be increasing interest in using the package with MapLibre GL. As a result, the most recent releases of vue-mapbox-map no longer bundle the map instance: this is instead to be instanced by the user and passed into the component and — IMHO — this makes for a cleaner overall strategy.

Head over to the documentation for more information, or see the complementary vue-mapbox-feature component for dynamic geoJSON features.

Scroll the page to see some action!