Can we shift to start using a fork instead of the main mapbox gl js library, now that the latter is no longer open source ?

There is already a request for bindings on the maps-gl/maps-gl#18

I wanted to make sure this works with Vue3 since there are significant changes from Vue2. Ty

The max-bounds property can be either array or LngLatBoundsLike object.
Currently only validated against arrray:
https://github.com/geospoc/v-mapbox/blob/main/src/components/map/options.js#L96

simple workaround:
:max-bounds="maxBounds.toArray()

In the current code the type of coordinates prop is set to Array and this is not correct. Why?

Mapbox-gl is accepting for marker coordinates a LngLatLike object, which is described as ‘an array of two numbers representing longitude and latitude, or an object with lng and lat or lon and lat properties.’ (cited from https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatlike)

That mean that v-mapbox code is a far more restricting than the library it is using. This forces us, developers, to convert an object to an array, i.e. to use more primitive attributes than can be used. Especially in the case of longitude and latitude it is error prone – you can easily misorder the coordinates and use [latitude, longitude] instead of [longitude, latitude] (I’ve almost trained myself to check that other location immediately when my markers are not present – then started to use objects instead of arrays every time it is possible :-) ).

By default, Mapbox creates markers with an offset of [0, -14]. However, this library makes it [0, 0]:

https://github.com/geospoc/v-mapbox/blob/f113c84fce01f5a0b2d204c00a32166a524da4f1/src/components/UI/Marker.vue#L45

This causes markers to not actually show the correct location by default.

Hello since the ticket has been closed and no longer be opened. Below is the bug and some root cause analysis

I can confirm that release build is not working. I deployed it to my local web server and it doesn't work. I inspected the layout and it seems that the css files are not being loaded properly, as I can see the classes are not attached to the mapbox divs.

I added the css manually in the inspector and here is before and after

Before - its blank

After - map appears

I checked the build css files that was generated and the style mgl-map-wrapper can't be found, hence not rendering...

Can you please advise? I tried building the native mapbox gl js release version and I didn't face the issue. For some reason in this library during the build process, the css is not properly attached or generated on the dist build

I've just enabled trackResize. Which is enabling the mapboxgl js option to change the size of the map in case the browser window resizes.

However the default mapbox functionality is not good enough. When I quickly "drag" the window size from large to small, and back I get a result like this:

When I search around I see that there are multiple ways how to deal with this issue. Mostly it focuses on calling map.resize() at the right moment.

alex3165/react-mapbox-gl#669
soal/vue-mapbox#107
mapbox/mapbox.js#488

I'm wondering if a resolution to this issue is in scope of this library or not.
I believe we could come up with a generic solution which works for most vue users, but you could also state that this is an issue in the mapbox trackResize functionality and that we would like to see this fixed upstream.
In the mean time we could all implement a workaround in our applications.

Looking forward to your input! 😄

When I move from using vue-mapbox to v-mapbox i'm seeing ReferenceError: _typeof is not defined. From doing some googling it looks like an issue where babel is trying to transpile code that is already transpired in v-mapbox. Is there something that I'm missing in the setup that would cause this to only happen with v-mapbox?

Hi! I'm on a nuxt app with a vue-mapbox wrapper.

"mapbox-gl": "^1.13.1",
"nuxt": "^2.14.6",
"v-mapbox": "^1.7.3"

One interesting issue I have right now is that a geojson layer that is removed in code still pertains to exist in the rendered page.

This is the scenario.

1. I have one component that is supposed to display one layer at a time. (let's say one circle)
2. I click on a button to change the layer into a different one.
3. In chrome Vue devtools, the reflects the changed layer and only shows one layer.
4. However, on the rendered mapbox, I can visibly see two layers (let's say two circles) appearing simultaneously.
5. The layers are also individually clickable, if I were to create a pop up on click.

Anybody has an idea why this would happen and how I may be able to work through this?

• Fix the d.ts for v-mapbox in version 3.x.x

It looks like, that the marker click event is propagated to the the map and in my case unintentionally does also fire the click event on the map.
I can't find a way to stop propagating this event, as the event of the marker click does not have the originalEvent to call stopPropagation().

Any idea?

Would be nice to have that 'closeOnMove' feature
https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup

Fresh install, using nuxt with vuetify. Access token and mapStyle are set.

Tried this from #328

/plugins/mapbox.js

/* eslint-disable import/no-extraneous-dependencies */
import Vue from 'vue';
import {
  MglMap,
  MglGeolocateControl,
  MglGeojsonLayer,
  MglMarker,
} from 'v-mapbox';

Vue.component('MglMap', MglMap);
Vue.component('MglGeolocateControl', MglGeolocateControl);
Vue.component('MglMarker', MglMarker);
Vue.component('MglGeojsonLayer', MglGeojsonLayer);

/nuxt.config.js plugins: [ { src: '~/plugins/mapbox', mode: 'client' }, ],

Added stylesheets on the page and globally

css: [
'node_modules/mapbox-gl/dist/mapbox-gl.css', 'node_modules/v-mapbox/dist/v-mapbox.css'
],

Not working for me. I'm getting 2 errors:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

v-mapbox.esm.js?5e6e:1291 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'container')

Also tried the example here: Base map

Error I get is this

window is not defined

Not sure where to go or what to try from here.

Thank you so much for maintaining this repo! We've been using our own fork of vue-mapbox, and we're hoping to contribute our issues and possibly also our solutions.

First: An issue was introduced in vue-mapbox 0.3.2 where removing a vue component that contained multiple mapbox layer components would remove only one of those layer components.

This is caused by a new condition in layerMixin.js, beforeDestroy():
if (this.map) {
became
if (this.map && this.map.loaded()) {

Once the first layer is removed from the map, this.map.loaded() returns false -- as we would expect, since the style has changed. This causes all subsequent beforeDestroy() calls to allow layers to remain on the map even while their corresponding vue components are removed.

We fixed this by removing the this.map.loaded() condition. However, since the pull request was described "Fixed crash after while destroying the map", I wonder if there are other scenarios that our solution would break? We haven't encountered them ourselves.

I welcome your thoughts.

Is it possible to change the aria-label for Map Markers?
It'd be great to set the aria-label to be more informative to a single point, rather than just 'Map Marker'.

On that note, is it possible to add other attributes to the markers? E.g; title or aria-describedby

As per title.
Tested on the following App.vue:

<template>
  <div id="app">
    <MglMap class="mglmap" container="map" :zoom="10.5" :access-token="accessToken" :map-style="mapStyle" :center="sgCenter">
      <MglGeolocateControl/>
      <MglNavigationControl/>
    </MglMap>
  </div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css';
import 'v-mapbox/dist/v-mapbox.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import {MglMap, MglNavigationControl, MglGeolocateControl} from 'v-mapbox'
export default {
  name: 'App',
  components: {MglMap, MglNavigationControl, MglGeolocateControl},
  data(){
    return {
      accessToken: '<omitted>',
      mapStyle: 'mapbox://styles/mapbox/dark-v9',
      sgCenter: [103.82161, 1.35433],
    };
  }
}
</script>
<style scoped>
.mglmap {
  height: 100vh;
  position: absolute;
  z-index: 0;
}
</style>

map works on npm run serve, npm run build --mode development but not on npm run build

Edit: Changed test code

I am using Node 12 LTS, which is supported until next year, and I get this message when installing this package:

error [email protected]: The engine "node" is incompatible with this module. Expected version ">=16.5.0". Got "12.22.7"

Would it be possible to add support for Node 12? Or at least Node 14? Upgrading my app to Node 16 is difficult due to other dependencies.

When listening for a click on the map, I’m expecting the event to be MapMouseEvent, but MouseEvent also fires, and typescript complains that I cannot assign one to the other.

Events in console:

Typescript warning:

To prevent the MouseEvent from firing, I am stopping propagation on the originalEvent, but this doesn’t solve my TS issue:

<v-map @click="onMapClick></v-map>

function onMapClick(e: MapMouseEvent) {
  e.originalEvent.stopPropagation()
}

Hi there,

we did some version changes in a project and (I think) v-mapbox responded a little unexcepted. As version changes go, a lot of things were fiddled with and I hope I won't forget anything telling the story:

• It started by removing a depenency from a vue 2.6 project and removing and rebuilding the yarn.lock file
  • the project was running v-mapbox 1.7.x and mapbox-gl 2.2.x without problems before (although I am unsure if that combination was ever recommended ;) )
  • our package json has "v-mapbox": "^1.7.0" and after a yarn install the yarn.lock file shows that v-mapbox was updated to 1.8.2

v-mapbox@^1.7.0:
  version "1.8.2"
  resolved "https://registry.yarnpkg.com/v-mapbox/-/v-mapbox-1.8.2.tgz# [...]
  dependencies:
    map-promisified "^0.4.0"

• at the same time 1.8 seems to introduce breaking changes (e.g. requiring the container prop and depending on the composition API) thus the update was unexpected
  • by the way the container prop is required but has a default value still
• after understanding what happened, we added the dependency @vue/composition-api": "^1.3.0" and the container prop
• now are now stuck with an error saying TypeError: this.templateRefs is undefined
  • we changed the mapbox gl dependency to "mapbox-gl": ">=1 <2" but this did not help either
  • do we need to add a mapbox instance?
• of course downgrading back to "v-mapbox": "1.7.3" solves the issue but I am happy to help and give more infos

TLDR; I think a ^1.7.0 should not upgrade to 1.8 and a note about the breaking changes and how to resolve those might help.

(please be so kind and do not point me immediately to the part of the documentation where this issue is addressed and which I overlooked ;) )

I see that my issue and pull requests haven't been addressed or responded to. Am I contributing properly? Are you accepting contributions?

I'm on a Nuxt app (using this strategy) using v-mapbox.

I'm using an MglMap component successfully, but the @load event only fires after I do some interaction with the map (pan, zoom).

I'm using these versions:

"mapbox-gl": "^1.13.1",
"nuxt": "^2.14.6",
"v-mapbox": "^1.7.3"

Any thought on what could be preventing the @load event to fire?

Hello, how does one create a custom marker (like a custom icon) using your library? How can we do it the reactive vue way?

I can do it in plain vanilla JS like what is specified here, but I was curious what strategy would you recommend to support custom markers with v-mapbox?

• Current documentation focuses on usage in Vue 2.x w/ composition-api, have to refactor the example(s) to make use of Vue 3 / Nuxt 3
• Make use of Docus / Nuxt content / (Strapi?) for Headless deployment of Docs

Both of these projects are trying to accomplish the same thing using vue. I think it would be much more beneficial to have more devs working on one project then split between two that accomplish the same goal. Just a thought. Ty

vue-mapbox-gl project https://github.com/studiometa/vue-mapbox-gl

Hi,

is current next branch working on Vue 3? Is there any example how to get it to work?

Kindly

I'm having issues getting the map to show up at all unless I manually import the v-mapbox css like so: import "v-mapbox/dist/v-mapbox.css";
I don't see this as part of the getting started guide. Is there something I'm missing?

When I do import the CSS this way, I get a parcel (v1) warning about the source map
⚠️ Could not load existing sourcemap of "../node_modules/v-mapbox/dist/v-mapbox.css".

After trying to implement Mapbox using this component (as well as the original vue-mapbox), I got blocked by lack of support for SSR.

The component is so problematic for SSR that even when forced to load only on the client (safeguarding with <ClientOnly/> element in Gridsome and importing it via dynamic import, it's impossible to not have unhandled promise rejection errors while building the site.

MglMap: async () =>
  await import("v-mapbox")
    .then((m) => m.MglMap)
    .catch(),

Where would one start when it comes to making this component compatible with SSR? I'll be happy to contribute, but I also noticed that there's quite a few outstanding PRs, and so I wonder whether it won't become stale.

would be very useful to have a click event listener on the map., when any point on the map is clicked. with similar payload then on the layers.

I want to lazy load data in the source, otherwise it will slowdown too much the app at start up.
The layers must load these new data, but they dont react up. according to my understanding of the source code, they should because there is a watcher on the source.data

 <MglGeojsonLayer
            v-for="layer in layers"
            :key="layer.id"
            :sourceId="layer.sourceId"
            :source="layer.source"
            :layerId="layer.id"
            :layer="layer"
            :preserveDrawingBuffer="true"
            :replaceSource="true"
        />```
```    computed: {
        source() {
            return {
                type: "geojson",
                data: {
                    features: this.$store.getters
                        .getSelectedProvidersGeoJsonData,
                    type: "FeatureCollection",
                },
                cluster: true,
                clusterMaxZoom: 14,
                clusterRadius: 50,
            };
        },
        layers() {
            return [
                {
                    id: "clusterLayer",
                    type: "circle",
                    source: this.source,
                    sourceId: this.sourceId,
                    filter: ["has", "point_count"],
                    paint: {
                        "circle-color": [
                            "step",
                            ["get", "point_count"],
                            "#51bbd6",
                            100,
                            "#f1f075",
                            750,
                            "#f28cb1",
                        ],
                        "circle-radius": [
                            "step",
                            ["get", "point_count"],
                            20,
                            100,
                            30,
                            750,
                            40,
                        ],
                    },
                },
            ... // other layers using the same source
          ]
      }

this.$store.getters.getSelectedProvidersGeoJsonData returns the geojson based on some selections that happend in an other components. the other component loads the data and the getter just returns the data based on some filtering.
I can see in the vuedev tools the source.data updating, even in the GeoJsonLayers components.

Is there anything we can do to speed up our mapbox instance when plotting many pins?

I've got over 2000 pins on this map I'm working on and it's running pretty slow right now. This issue is in both loading and usage, takes a couple seconds to change zoom and open popups.

Template

<client-only>
  <MglMap :mapbox-gl="mapboxgl" :accessToken="accessToken" :mapStyle="mapStyle" :center="centerPoint" :scroll-zoom="false" :zoom="2" @load="stopLoading" style="box-shadow:0px 2px 8px #777">
    <div v-for="(one, idx) in many" :key="idx">
      <MglMarker :coordinates="[some, coords]" :color="!this.isBlue ? '#43a047' : '#1976d2'">
        <MglPopup class="pa-0">
          <div>
            <p>Some text info</p>
          </div>
        </MglPopup>
      </MglMarker>
    </div>
    <MglNavigationControl position="bottom-right" :visualizePitch="false" />
    <MglGeolocateControl position="bottom-right" :showUserLocation="false" :fitBoundsOptions="{ maxZoom:8 }" />
  </MglMap>
</client-only>

hi all,

I try to use it in a normal webpage, initial way I tried to include was this

<!--https://github.com/geospoc/v-mapbox-->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet"/>
<link href="https://unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-geocoder.css" rel="stylesheet" type="text/css">
 <!-- v-mapbox CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/v-mapbox@latest/dist/v-mapbox.css"
      rel="stylesheet"
    />

<!--
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
<script src="https://unpkg.com/@mapbox/[email protected]/dist/mapbox-gl-geocoder.min.js"></script> 


<script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/v-mapbox@latest/dist/v-mapbox.min.js"
    ></script>
--> 

when I try to use MglMap I get this result

[Error] [Vue warn]: Unknown custom element: <MglMap> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Dynamiccontent>
       <RevealSlide>
         <RevealComponent>
           <Root>
	warn (vue.js:634)

I even tried to use

<script>
import VueMapbox from "v-mapbox";
import Mapbox from "mapbox-gl";  

result is

SyntaxError: Unexpected identifier 'VueMapbox'. import call expects exactly one argument.

I'm not familiar with all this javascript package management stuff, can somebody please give me a hint how to include it in the correct way? Different Components in my page work as expected.

thx a lot Martin

Currently, source files are removed from the published build. However, things like Nuxt Components can use them to automatically import components, with automatic tree-shaking configuration.

Say I have 10 markers, how can I fit them into my map's bounding box? I can do it in vanilla JS like the following

var coordinates = coords;

var bounds = coordinates.reduce(function(bounds, coord) {
  return bounds.extend(coord);
}, new mapboxgl.LngLatBounds(coordinates[0], coordinates[0]));

map.fitBounds(bounds, {
  padding: 20
});

But how can I do that in your vue js way? If its not possible to this with this library, how do we access the main mapbox objects so it can be manipulated in a non-reactive way?

The main key in the package.json is set to dist/v-mapbox.umd.js. However, that file does not exist, leading to:

 Cannot find module 'v-mapbox' from '/path/to/project' 

I don't know if this is necessarily an issue with the v-mapbox reactive state but I'm not certain either – I'm pulling marker locations from an API via a bounding box so that I only pull locations that are within the viewport. I refresh this upon manipulating the map with new bounding box coordinates each time. It pulls in all of the viewable markers beautifully. I then added a check to do the reverse; if the marker is no longer within the viewable area I remove it; each action is a getter and commit to vuex with the ID and coordinates of the marker. The problem is that when a marker is removed, and the viewport is repositioned back over the area where the marker should exist, it doesn't pull in or refresh the marker state; it no longer exists on the map until I've refreshed the page. A fresh pull of marker positions is being pulled on every update, which includes coordinates that no longer appear on the map.

I'm thinking this has to do with either the reactivity of the markers or something is happening within veux that I don't understand – removing a marker is a "commit" so it seems as though this is permanent until the entire state has been refreshed, but I'm pulling in a fresh state of markers on each update, so I'm not so sure this would matter. Any ideas on this would be greatly appreciated.

Map stopped working after upgrade to 1.9.0. Tried also in the clean project: https://codesandbox.io/s/sweet-bose-63182

Uncaught (in promise) TypeError: this.templateRefs is undefined
_loadMap v-mapbox.esm.js:1291
_loadMap v-mapbox.esm.js:1287
promise callback*$_loadMap v-mapbox.esm.js:1285
mounted v-mapbox.esm.js:1420
VueJS 11
main.js:6
js app.js:1148
webpack_require app.js:849
fn app.js:151
1 app.js:1161
webpack_require app.js:849
checkDeferredModules app.js:46
app.js:925
app.js:928

Hello,

What is the correct way to access actions? I tried the following and its failing

this.$refs.map.actions.flyTo({
                 center: [30, 30]
             })

Clustering with v-mapbox

If I'm working with a lot of pins, I'd like to cluster the pins like this (from gmaps):

Link to Mapbox Cluster page

Is this a feature we have on hand with v-mapbox, or is there a good way to do this?

Hello again, I was going crazy as I'm installing the package via npm i v-mapbox but its saying that the dependency was not found. 1 hour later, I realize that the package is actually empty

I know the docs briefly touch on setting the map to Vuex store;

onMapLoaded(event) {
      // in component
      this.map = event.map;
      // or just to store if you want have access from other components
      this.$store.map = event.map;
    }

https://v-mapbox.geospoc.io/guide/basemap.html#map-loading

However, they don't mention how to load a map from the store?
I'm assuming this is relatively easier and I'm likely overthinking it.

Hi,
I'm looking for some help / guidance.
Do you have any idea why the streets are rendered using dots?

The expected display is something like this:

Thanks,
Mihai

Are pitch controls now disabled by default? Right-clicking + movement does not change the pitch, only the rotation. Also setting the pitch within the Mapbox parameters doesn't do anything either. It worked before switching to this new maintained version of vue-mapbox.

... and possibly use TypeScript :)

Hi everyone, (@vinayakkulkarni )
I thank you for forking the original project and try to maintain it.

While trying to use it, I found that a lot of features from mapbox-gl are missing, reactivity is quite lacking. and some core concept seems to me a bit strange.

I'm willing to work on the lib, but I need to know if the following roadmap is acceptable to you, or if I'll have to fork the lib another time (that would be sad)

• Make every options in mapbox-gl a prop in v-mapbox (some are missing, I did some PR about that), and remove unnecessary default (mapbox-gl handle default values at is level).
• Make every props reactive (lots of watchers are missing).
• Simplify API ( eg: MglGeojsonLayer wait for layerId prop which is not consistent with mapbox layer API, where id is a property of layer object)
• refactor events to be closer to mapbox-gl genuine trigger and payload
• Support mapbox-gl from V1 until V2 (pre v1 support is a possibility) & maplibre

Of course if this fork is a company project, I will understand.
But there are lots of very good intents here, that need to be pushed a bit farther to be really useful to the community.

Just loaded up a new project with v-mapbox, following the guide. The map does not render, and this error in console:

Cannot read properties of undefined (reading 'container')

I have a dropdown that changed the map style on change, but whenever I update the style, the boundaries of the outline (Geojson layer) I have pre-drawn disappears. Tried adding a watcher to add the layer back after the style changes, but did not work.

<MglMap :accessToken="accessToken" :mapStyle.sync="mapStyleUrl" :center="centerCoords" :bearing="bearing" :zoom="zoom" :scrollZoom="scrollZoom" :repaint="repaint" container="map" :preserveDrawingBuffer="true" @load="onMapLoad" @mouseup="onMapMove()" logoPosition="bottom-right">
            <MglNavigationControl :compact="compact" position="top-right"/>
            <MglFullscreenControl :compact="compact" position="bottom-right"/>
            <!-- <MglMarker :coordinates="centerCoords"></MglMarker> -->
            <MglMarker v-for="(pin, index) in mapPins" :coordinates="pin.coords" :key="pin.id" draggable @dragend="updatePinCoords" :ref="index">
              <MglPopup :offset="popupOffset">
                <div class="pa-4">
                  <p>{{pin.name}}</p>
                  <p>{{pin.id}}</p>
                  <p>{{pin.coords}}</p>
                  <v-btn @click="deleteMapPin(pin.id)">Delete Pin</v-btn>
                </div>
              </MglPopup>
            </MglMarker>
            <MglGeojsonLayer
              :sourceId="mapLines.data.id"
              :source="mapLines"
              layerId="lines"
              :layer="mapLinesLayer"
            ></MglGeojsonLayer>
        </MglMap>

• Make correct use of @vue/composition-api to ensure we replace it with vue@next in v3.x