I can post all the code, but it's really just the standard setup of the basic map. I've never encountered this with other mapbox maps:

Appreciate any ideas of what might be going wrong. I can pan around on the initial zoom level and everything is fine, but as you can see in the recording, once I zoom in, the map gets weird-

Hello,

I am currently looking into using this component/library, but I am running into a major issue:

When I have installed and "used" the component, all I get the my console.log when I view the page, is this error message: "Failed to mount component: Template or render function not defined"

Would you happen to have an idea of why this happens? When I try to downgrade, it doesn't fix it either. I am using the latest version, v.0.1.1

Hello !

Any plan on implementing the onMouseEnter, onMouseLeave and onClick events on marker ?

How it would work :

<template>
     <mgl-map ... >
         ...
        <mgl-marker :onMouseEnter="markerMouseEnter" ... >
            ...
        </mgl-marker>
    </mgl-map>
</template>

<script>
methods : {
    markerMouseEnter(eventData) {
        console.log("Mouse entered marker "+eventData.markerId)
    }
}
<script>

I can't find any workaround to have a similar feature

I have markers on the map already, and when some event occurs (user clicks on it or clicks on something related elsewhere on the page), I would like to dynamically change the color of the marker. How can we accomplish this?

Right now when looping through markers and setting popups, they all show up open by default. How can we make them so they are closed until the marker is clicked?

My current code:

    <MglMarker
      v-for="item in items"
      v-bind:key="item.id">
      <MglPopup>
        <div>
          Stuff
        </div>
      </MglPopup>
    </MglMarker>

i can't figure out how to get the geoJson Feature data from a click event. what's the object path? on mapbox it's only event.features , but here's i don't see it. tnx

https://docs.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/

Hello, I am having a problem with your package, I am trying to reproduce the base map. First, I realized that I was assinging a bad style because the component raised an error when trying to make the http request. But now, it doesn't raise any error, and still like that, the map isn't displayed. Here is the component:

<template>
  <q-page id="map" class="row items-center justify-evenly">
    <MglMap
      style="width: 100%"
      container="#map"
      :center="coordinates"
      :accessToken="accessToken"
      :mapStyle.sync="mapStyle"
    />
  </q-page>
</template>

<script lang="ts">
import Vue from 'vue';
import Mapbox from 'mapbox-gl';
import { MglMap } from 'vue-mapbox';
import 'mapbox-gl/dist/mapbox-gl.css';

export default Vue.extend({
  name: 'PageIndex',
  data() {
    return {
      accessToken:
        'MY_ACCESS_TOKEN',
      mapStyle: 'mapbox://styles/mapbox/streets-v11',
      coordinates: [23.119456, -82.426454]
    };
  },
  components: {
    MglMap
  },
  created() {
    this.mapbox = Mapbox;
  }
});
</script>

Hey there, I am trying to change the opacity of a layer on hover hover when trying to access the setFeatureState function on the component this error is thrown:

Error: The source '[object Object]' does not exist in the map's style.

My method looks like this and is being called on mouseenter.

handleMouseEnter(e) {
    const { component, layerId } = e

    component.setFeatureState(layerId, { hover: true })
}

If anyone could offer help that would be fantastic, I can spin up an example project as well if need be. Thanks!

Hye, thanks for carrying on the good job of korigan with mapbox. I'm currently trying to replace gmap with mapbox, I did it succesfully with leaflet (vue2leaflet) and the wrapper of phegman, but I encouter a problem when trying your wrapper and I don't see where it can come from. Apparently, webpack cannot build and it looks like there is a problem with the spread syntax :

ERROR Failed to compile with 11 errors 14:45:33

error in ./node_modules/vue-mapbox/src/components/layer/GeojsonLayer.js

Module parse failed: Unexpected token (110:10) You may need an appropriate loader to handle this file type. | const source = { | type: "geojson", | ...this.source | }; | try {

@ ./node_modules/vue-mapbox/src/main.js 11:0-59 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?typ e=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/map/mixins/withAsyncActions.js

Module parse failed: Unexpected token (11:8) You may need an appropriate loader to handle this file type. | $_registerAsyncActions(map) { | this.actions = { | ...promisify(map), | stop() { | this.map.stop();

@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-mapbox/src/components/map/GlMap.vue 16:0-57 @ ./node_modules/vue-mapbox/src/components/map/GlMap.vue @ ./node_modules/vue-mapbox/src/main.js @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/lib/withEvents.js

Module parse failed: Unexpected token (13:8) You may need an appropriate loader to handle this file type. | map: this.map, | component: this, | ...data | }); | },

@ ./node_modules/vue-mapbox/src/main.js 18:0-47 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/layer/RasterLayer.js

Module parse failed: Unexpected token (16:8) You may need an appropriate loader to handle this file type. | let source = { | type: "raster", | ...this.source | }; |

@ ./node_modules/vue-mapbox/src/main.js 16:0-57 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/layer/VideoLayer.js

Module parse failed: Unexpected token (28:8) You may need an appropriate loader to handle this file type. | const source = { | type: "video", | ...this.source | }; |

@ ./node_modules/vue-mapbox/src/main.js 14:0-55 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/layer/CanvasLayer.js

Module parse failed: Unexpected token (42:8) You may need an appropriate loader to handle this file type. | const source = { | type: "canvas", | ...this.source | }; |

@ ./node_modules/vue-mapbox/src/main.js 13:0-57 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/layer/ImageLayer.js

Module parse failed: Unexpected token (46:8) You may need an appropriate loader to handle this file type. | const source = { | type: "image", | ...this.source | }; |

@ ./node_modules/vue-mapbox/src/main.js 12:0-55 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/layer/layerMixin.js

Module parse failed: Unexpected token (48:4) You may need an appropriate loader to handle this file type. | mixins: [withEvents], | props: { | ...mapboxSourceProps, | ...mapboxLayerStyleProps, | ...componentProps

@ ./node_modules/vue-mapbox/src/main.js 21:0-55 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/map/mixins/withPrivateMethods.js

Module parse failed: Unexpected token (49:10) You may need an appropriate loader to handle this file type. | if (this.accessToken) this.mapbox.accessToken = this.accessToken; | const map = new this.mapbox.Map({ | ...this._props, | container: this.$refs.container, | style: this.mapStyle

@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./node_modules/vue-mapbox/src/components/map/GlMap.vue 15:0-61 @ ./node_modules/vue-mapbox/src/components/map/GlMap.vue @ ./node_modules/vue-mapbox/src/main.js @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/layer/VectorLayer.js

Module parse failed: Unexpected token (49:8) You may need an appropriate loader to handle this file type. | let source = { | type: "vector", | ...this.source | }; |

@ ./node_modules/vue-mapbox/src/main.js 15:0-57 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

error in ./node_modules/vue-mapbox/src/components/UI/withSelfEvents.js

Module parse failed: Unexpected token (4:58) You may need an appropriate loader to handle this file type. | methods: { | $_emitSelfEvent(event, data = {}) { | this.$_emitMapEvent(event, { control: this.control, ...data }); | }, | /** Bind events for markers, popups and controls.

@ ./node_modules/vue-mapbox/src/main.js 19:0-65 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/stock/StockMap.vue @ ./src/components/stock/StockMap.vue @ ./src/router/stockRouter.js @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

Thanks for your help

So, I have a script to add the mapbox API to my app lazily. That means that it only gets added to the document once a specific view is added. 0.1.x versions of vue-mapbox allowed for a delayed Vue.use loading which made this work, however in 0.2.x, it directly imports mapbox-gl making this impossible.

This is a bit troublesome, but the dependency inversion principle in this case is very important.

Hello! I have a set of markers which move around, but leave their popups behind.

I set 'em up with something like this:

  mgl-marker(v-for="marker in markers" :key="marker.id"
  :coordinates="[marker.long, marker.lat]")
    mgl-popup(:offset="12")

However, when they move around, popups that were open previously get stuck in their original location. I tried to fix by adding the coordinates explicitly:

  mgl-marker(v-for="marker in markers" :key="marker.id"
  :coordinates="[marker.long, marker.lat]")
    mgl-popup(:offset="12" :coordinates="[marker.long, marker.lat]")

But it still didn't work.

Hi !

I add new options for the Vue Mapbox ! Options for supporting cooperativeGestures and locale settings

Usage example :

<MglMap
    :access-token="accessToken"
    :map-style.sync="style"
    :cooperative-gestures="true"
    :locale="locale"
    @load="onMapLoad"
/>

If you want to use this new feature before the pull request acceptation, install Vue mapbox plugin with this command : npm i soal/vue-mapbox#pull/265/head

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Removes simple-git. It's no longer used after updating ancestor dependency lint-staged. These dependencies need to be updated together.

Removes simple-git

Updates lint-staged from 8.2.1 to 13.1.0

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.