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 that would let me dynamically update a given map’s coordinates, zoom, bearing, and pitch, but otherwise wanted to handle the map instance as conventional a manner as possible.

Originally, this component bundled the mapbox-gl instance, but 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!