soal / vue-mapbox Goto Github PK

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-

vue mapbox only seems to want to load the first layer but not the second here is my template,
each layer works on its own but not together on the same map

<mgl-vector-layer
@mousemove="overLayer"
:sourceId="regionsTile.mapboxName"
:source="{
'type': regionsTile.typeSource,
'url': 'mapbox://'+regionsTile.mapboxName
}"
:layerId="regionsTile.name"
:layer="{
'source-layer': regionsTile.name,
'type': fillLayer.type,
'paint': fillLayer.paintObj
}">

<mgl-vector-layer
  :sourceId="regionsTile.mapboxName"
  :source="{
             'type': regionsTile.typeSource,
             'url': 'mapbox://'+regionsTile.mapboxName
             }"
  :layerId="regionsTile.name"
  :layer="{
             'source-layer': regionsTile.name,
             'type': layer.type,
             'paint': layer.paintObj
             }">
</mgl-vector-layer>

Hi,
When my map container is resized by css (I have a switch who increase the width of my map container), then the map still occupy the same size than before increasing the width, though if after increasing the width I resize manually my browser window size (by dragging the edge of the browser screen) then the map width is redraw to occupy the whole width as expected.

I'm looking how to trigger a resize method after changing the css width ?

When I choose layer type "heatmap", validation brokes:

[Vue warn]: Invalid prop: custom validator check failed for prop "type".

found in

---> <GeojsonLayer>
       <MapsIndoorPage> at /home/dmitriy/git/ertelecom/equipment/equipment-ui-web/src/pages/maps/mapbox/heatmap/index.vue
         <GlMap>
           <MapsIndoorPage> at /home/dmitriy/git/ertelecom/equipment/equipment-ui-web/src/pages/maps/mapbox/index.vue
             <VContent>
               <VApp>
                 <Application> at /home/dmitriy/git/ertelecom/equipment/equipment-ui-web/src/components/Application.vue
                   <Root>

But still works.

Best regards,
Dmitriy

Probably because of this line. I suspect this should set initial to false.

Just starting to try out vue-mapbox and generally have it working but am finding that my popups are for some reason partially showing even before I've clicked on the corresponding marker to actually trigger their display.

This happens for all markers on the map. Then when you click on a marker the actual popup appears as one would expect (and the other marker's funky [x] popups go away)

<!-- Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css" rel="stylesheet" />
<!-- Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js"></script>
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue-mapbox -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue-mapbox@latest/dist/vue-mapbox.min.js"></script>

<div id="mymap">
		<h2>Mapbox Map Example {[markerCoords]}</h2>
		<p>{[mapStyle]}</p>
		<div style="text-align: left;">
		<mgl-map  style="height: 250px; width: 250px;"
			:access-Token="accessToken"
			:map-Style.sync="mapStyle" 
			:center="markerCoords"
			:zoom="10">
			<mgl-navigation-control position="top-right"></mgl-navigation-control>
			<mgl-marker v-for="marker in markers" :coordinates="marker.coords" color="blue">
			  <img src="https://www.fmsc.org/images/pin.png" slot="marker" />
			  <mgl-popup :coordinates="marker.coords" :anchor="top">
				  <div><strong>{[marker.text]}</strong></div>
			  </mgl-popup>
			</mgl-marker>
		</mgl-map>
		<a class="btn btn-default" v-on:click.prevent="addMarker()">Add marker</a>
		</div>
</div>
<script type="text/javascript">
Vue.use(VueMapbox.plugin, { mapboxgl: window.mapboxgl })
new Vue({
	el: "#mymap",
	delimiters: ['{[', ']}'],
	components: {
		MglMap: VueMapbox.MglMap,
		MglNavigationControl: VueMapbox.MglNavigationControl,
		MglGeolocateControl: VueMapbox.MglGeolocateControl,
		MglMarker: VueMapbox.MglMarker,
		MglPopup: VueMapbox.MglPopup
	},
	data: {
		accessToken: 'pk.eyJ1I....', // your access token. Needed if you using Mapbox maps
      	        mapStyle: 'mapbox://styles/mapbox/streets-v9', // your map style
		markerCoords: [ -88.225114, 41.7673166 ],
		markers: [
			  {text: 'Marker 1', coords: [ -88.225114, 41.7673166 ]},
			  {text: 'Marker 2', coords: [ -89.225114, 41.7673166 ]},
			  {text: 'Marker 3', coords: [ -88.225114, 42.7673166 ]}
		  ]
	},
	methods: {
		addMarker: function(){
			var newCoord = this.markers[this.markers.length-1].coords
			newCoord[0] = newCoord[0] + 0.25;
			newCoord[1] = newCoord[1] + 0.25;
			this.markers.push({
				text: 'Marker ' + this.markers.lenght+1,
				coords: newCoord
			})
		}
	}
})
</script>

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.

Looking for a way to add popup without any specific coordinates and change coordinates on hovering an element on a map. Trying to achieve something similar as this Mapbox example.

Haven't found a good way to do it using the mgl-popup component yet, here's what I have:

<template lang="pug">
.continer.map-wrapper
  mgl-map.map-container(
    :accessToken="accessToken",
    :mapStyle.sync="mapStyle",
    @load="mapLoaded")
    mgl-navigation-control(position="top-right")
    mgl-geojson-layer(
      type="circle",
      :sourceId="geoJsonSource.properties.id"
      :layerId="geoJsonSource.properties.id"
      :source.sync="geoJsonSource.data",
      :paint="paint")
    mgl-popup(
      ref="popup",
      :coordinates="popupCoordinates",
      :closeButton="closeButton",
      :closeOnClick="closeOnClick",
      anchor="bottom")
      .map-popup-content {{ popupContent }}
</template>

<script>
import { 
  MglMap,
  MglNavigationControl,
  MglGeojsonLayer,
  MglPopup
} from 'vue-mapbox';

export default {
  name: 'ClusterMap',
  components: {
    MglMap,
    MglNavigationControl,
    MglGeojsonLayer,
  },
 data: () => ({
    accessToken: MAP_ACCESS_TOKEN,
    mapStyle: MAP_STYLE,
    popupCoordinates: [0,0],
    popupContent: null,
    closeButton: false,
    closeOnClick: false,
    geoJsonSource: {
      properties: { id: 'geopoints' },
      data: { //...some GeoJSON object }
    }
    paint: {
      'circle-color': '#11b4da',
      'circle-radius': 4,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#fff',
    },
  }),
  methods: {
    mapLoaded(e) {
      e.map.on('mouseenter', 'geopoints', (event) => {
        e.map.getCanvas().style.cursor = 'pointer';
        const coordinates = event.features[0].geometry.coordinates.slice();
        const content = event.features[0].properties.name;

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(event.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += event.lngLat.lng > coordinates[0] ? 360 : -360;
        }
        this.popupCoordinates = coordinates;
        this.popupContent = content;
        this.$refs.popup.popup.addTo(e.map); // not the best way to do this
      });
      e.map.on('mouseleave', 'geopoints', () => {
        e.map.getCanvas().style.cursor = '';
        this.$refs.popup.popup.remove(); // not the best way to do this
      });
    },
  },
};
</script>
<style lang="sass" scoped>
.map-wrapper
  width: 100%
  height: 100%
  .map-container
    width: 100%
    height: 600px
</style>

Will produce:

Also having a similar issue to this one #55. And for some reason two popup elements are added to the map.

<div data-v-75ee5279="" id="map-6544415584706778" class="map-container mapboxgl-map">
....
  <div class="mapboxgl-popup mapboxgl-popup-anchor-bottom"
       style="transform: translate(-50%, -100%) translate(722px, 360px);">
    <div class="mapboxgl-popup-tip"></div>
    <div class="mapboxgl-popup-content"></div>
  </div>
  <div class="mapboxgl-popup mapboxgl-popup-anchor-bottom"
       style="transform: translate(-50%, -100%) translate(1062px, 345px);">
    <div class="mapboxgl-popup-tip"></div>
    <div class="mapboxgl-popup-content">
      <div data-v-75ee5279="" class="map-popup-content">Test Place</div>
    </div>
  </div>
</div>

Any ideas?
Thanks

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

Prior to 0.2.0, creating the mapbox marker instance happened in the mounted hook via the old deferredMount concept. Now that it has been moved to the created hook in 0.2.0, the $slots.marker[0] VNode has not yet mounted; so, $slots.marker[0].elm is undefined.

LINE: 162, paint is not applied because symbol is excluded.
This can not change text-color etc.

<template>
  <MglMap>
    <MglGeojsonLayer
      type="symbol"
      :paint="symbolPaint"
    />
  </MglMap>
</template>

<script>
export default {
  data() = {
    symbolPaint: {
      "text-color": "#FFFFFF"
    }
  }
}
</script>

Good day, I am unable to figure out is it currently possible to handle map events, like click and I see there is issue #68 and they may be bound

I am using v-for to dynamically add and remove layers that are added to an array:

<MglGeojsonLayer v-for="(layer, index) in layers" :key="index"
        :type="layer.paintType"
        :sourceId="`source${index}`"
        :layerId="`layer${index}`"
        :source.sync="layer"
        :paint="layer.paint"
      />

layers: function() {
      let layers = [];
      this.bufferLayer ? layers.push(this.bufferLayer) : null;
      this.insideLayer ? layers.push(this.insideLayer) : null;
      this.outsideLayer ? layers.push(this.outsideLayer): null;
      return layers;
    },

Example layer:

const layer1 = {
  "paintType": "line",
  "paint": {
    "line-color": "cyan",
    "line-opacity": 0.5
  },
  "type": "FeatureCollection",
  "features": [ ...]
}

However, when swapping out a layer at position i, the paint properties are not re-evaluated, but rather, the paint properties of the previous layer at i are kept.

I'm trying to add GeoJSON layer to the mapbox, so I can show a circle with a certain radius around a marker on the map. When I'm loading the webpage, I'll get an error:

Error: layers.radius: missing required property "source" and layers.radius.source: string expected, undefined found

I think I might forget something while setting the source property on the component, but I can't seem to find what I'm forgetting or what I'm doing wrong. I'm using the following package to generate the GeoJSON object:

My code is as followed: http://turfjs.org/docs/#circle

<mgl-map :accessToken="accessToken" :mapStyle.sync="mapStyle" :center="coordinates" :zoom="10">
    <mgl-marker :coordinates="coordinates"></mgl-marker>
    <mgl-geojson-layer :type="fill" :layerId="radius.properties.id" :source.sync="radius"></mgl-geojson-layer>
</mgl-map>

export default {
        components: {
            MglMap,
            MglMarker,
            MglGeojsonLayer,
        },
        data() {
            return {
                accessToken: "...",
                mapStyle:  '...',
                coordinates: [4.1451,51.8009],
                radius: circle([4.1451,51.8009], 20, {
                    properties: {
                        id: 'radius',
                        paint: {
                            'fill-color': 'blue',
                            'fill-opacity': 0.6
                        }
                    }
                }),
            }
        },
}

Currently, this module uses a Vue plugin to make mapbox available everywhere.

This might work fine in an isolated application, but it adds significant bloat in a full featured SPA. Due to the import happening in the main entrypoint (for setting up the plugin), there is no way to use code splitting to separate mapbox so that it is only loaded on a specific SPA page.

Check out: https://vuejs.org/v2/api/#provide-inject

With provide/inject, you can accept the mapbox reference as a prop on MglMap and provide an object including its reference to all of your child components. This would allow code splitting to be able to only load mapbox on the specific page where it's being used, while still allowing you to use this.mapbox throughout your components.

If a developer using this library wants to then get a reference to mapbox, they can create their own controller component, place it in as a child of MglMap and inject the reference same as the rest of the components. They can then use their custom component as a way to add custom functionality.

Pretty sure i am getting an error because the source of a vector layer is an object,
but the orignal mapbox function requires a key for it's source, this should be fixed by just change this.source to this.sourceId? also sourceLayer instead of "source-layer"? similar error for get, I changed this to my suggestions and i got my code to work.

setFeatureState(featureId, state) {
  if (this.map) {
    const params = {
      id: featureId,
      source: this.source,
      "source-layer": this.layer["source-layer"]
    };
    return this.map.setFeatureState(params, state);
  }
}

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.

really need help with this, super annoyed. keep getting error

Cannot set property 'accessToken' of undefined

i'm using the base map example. it doesn't see the access token. :/

<template>
  <div>
    <MglMap :accessToken="accessToken" :mapStyle.sync="mapStyle"/>
  </div>
</template>

<script>
import { MglMap } from 'vue-mapbox';

export default {
  components: {
    MglMap,
  },
  data() {
    return {
      accessToken: process.env.VUE_APP_MAPBOX_KEY,
      mapStyle: process.env.VUE_APP_MAPBOX_STYLE,
    };
  },
};
</script>

'error' and 'geolocate' both emit the same method. Should't this one emit something like 'geolocate-geolocate'?

Hello,

I'm having an issue to get a marker set to the right place.
I copy & past the example from the docs (https://soal.github.io/vue-mapbox/#/markers&popups) and changed the coordinates to [53.678719, 9.997771] - a place in the North of Hamburg, Germany as you can see here > https://www.google.com/maps/place/53%C2%B040'43.4%22N+9%C2%B059'52.0%22E/@53.678719,9.995577,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d53.678719!4d9.997771

But for any reason the marker ist set somewhere in the East of Africa:

I've looked inside the sources of your code to find any reason but couldn't find anything.

I'm running

• [email protected]
• vue-mapbox@^0.0.34
  in an electron project.

This my vue component:

`

There is a minor bug in the example code for Popups:

https://soal.github.io/vue-mapbox/guide/markers&popups.html#popup

<MglPopup :coordinates="coordinates" :anchor="top">
  <VCard> <div>Hello, I'm popup!</div> </VCard>
</MglPopup>

either should be anchor="top" or :anchor="'top'", otherwise top must be a member of the component.

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'm trying to integrate this into an electron container. Any idea how to resolve Missing Mapbox GL JS CSS

HI! I have a MglGeojsonLayer component with polygon

<MglGeojsonLayer sourceId="sourceId" :source="source" layerId="layerId" :layer="layer" :clearSource="false" />

And some method like this: this.mapStyle = 'mapbox://styles/mapbox/light-v9';

After map style is changed, the polygon disappears. What is the right way to update source and layer in MglGeojsonLayer component to show polygon again?

The package says it depends on mapbox-gl@^0.45.0, but the Marker component uses on method on mapbox markers, which was added in 0.46.0.

I get an html error when I try to implement into Nativescript-Vue, I believe Mapbox GL is looking for an html element to bind to, tried replacing with a stackedLayout. Do you know how to get this working within a webview element?

I just followed the instructions and the good thing is, the library worked with ease!

However, firstly, for some reason I could not see the map due to the overflow. I resolve this by having:

.mapboxgl-map{
  overflow: visible;
}

Secondly, the height of the map (canvas) seem to be fixed to 375px. I again tried to have the customized height like below:

.mapboxgl-canvas {
  height: calc(100vh - 215px)!Important;
  width: 100%;
}

But the output looks like this:

Can you please help me fixing this issue.?

Do you have any examples on how to call GLMap.vue's actions. In the documentation I see you are calling the following code on the Map load event.
const asyncActions = event.component.actions;
const newParams = await asyncActions.flyTo({center: [30, 30], zoom: 9, speed: 1});

How do you recommend calling a Map's actions (ref, on base Mapbox GL map object)?

Thanks

Hey @soal any suggestions for how to set the map inside a tabbed onsen page? I'm getting the map to load but onsen is blocking it... how can I point it to the page div as the wrapper?

Would be great!

This module doesn't seem to be compatible with Nuxt, because of map-promisified.

This is where the error happens:

(https://raw.githubusercontent.com/soal/map-promisified/master/dist/mapPromisify.js)

If I try to patch temporarily it and refactor the dist version to a normal module without window, then the error moves to this line:

Which is this line: https://github.com/soal/map-promisified/blob/master/src/promisifyMethod.ts#L27

I am not sure if this is a incorrect use of map-promisified by vue-mapbox or a bug in map-promisified.

nuxt: v2.4.3

Hi, and thanks for this project, its awesome!

I have an issue with the dependencies though. vue-mapbox currently prevents me from installing a newer VueJS version, as it is hardcoded to vue <=2.5.13 in peerDependencies (although it's ^2.5.13 in devDependencies). Is this needed, or could it be changed to caret too?

Best
Jonathan

Hi,

I want to use this library, but I have an issue. I did everything like in the docs (https://soal.github.io/vue-mapbox/guide/#using-as-es-module) and I've got that error:

Do you know how to fix it?

Adding clustering property to Geojson layer as in Mapbox.

When the map gets destroyed and it had controls, it crashes and I can't use it again. By removing the controls, it works fine again.

[Vue warn]: Error in beforeDestroy hook: "TypeError: this._map is undefined"

found in

---> <NavigationControl>
       <GlMap> at node_modules/vue-mapbox/src/components/map/GlMap.vue

TypeError: "this._map is undefined"
    onRemove mapbox-gl.js:33
    removeControl mapbox-gl.js:33
    beforeDestroy controlMixin.js:19

Is there a way to set a marker's icon image from a file in the project?

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?

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/

I am following the getting started vue-mapbox documentation and fell into some unknown console errors. The getting started link is this https://soal.github.io/vue-mapbox/#/quickstart. My vue application was created using the vue create projectName cli command and for my configs I selected vue-router, vuex, sass, babel, eslint, unit-jest, e2e-cypress. I am unsure what is causing the issue, because I imported the vue-mapbox as a ES module and I am using yarn. However my main.js file looks like this

import Vue from 'vue';
import VueMapbox from 'vue-mapbox';
import Mapbox from 'mapbox-gl';

import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

Vue.use(VueMapbox, { mapboxgl: Mapbox });

new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
But for some reason I cannot figure out why I am getting these 3 errors.

Error: missing required property "version"
Error: missing required property "sources"
Error: missing required property "layers"

Привет. Отличный компонент!
Поскольку документация пока не очень доступна по этому поводу, я попробовал сам добавить маркер. Но ничего не вышло, если просто указать координаты как в случае с mgl-popup.
Не мог бы подсказать как это сделать ?

Спасибо за твою работу

For some reason my codesandbox example doesn't render but the console shows the same issue im seeing, the added event is emitted twice per each marker.

https://codesandbox.io/s/qqx96pqp9

Hi,

Just updated to vue-mapbox v0.21 and getting an error on the popup component. I'm using one popup for the map and moving it around based on the coordinates provided from an event and then setting the popup on the go. Example code I'm using is available under issue #66. It's not breaking anything, but just wanted to flag it up.

The error I'm getting now in the console is as follows:

vue.esm.js?efeb:628 [Vue warn]: Injection "marker" not found

found in

---> <Popup> at Popup.vue
       <GeoPopup> at src/components/geo/GeoPopup.vue
         <GlMap> at GlMap.vue
           <GeoMap> at src/components/geo/GeoMap.vue
             <SimpleLayout> at src/layouts/SimpleLayout.vue
               <Main> at src/views/base/Main.vue
                 <App> at src/App.vue
                   <Root>

Cheers

Given the example in the docs, I set up an event listener for the load event. Looking at the component, there was no property called asyncActions, but there was one called actions, which seemed to have everything there. Is this a typo in the docs?

async onMapLoaded({ component }) {
  const { actions } = component;
  const bounds = new mapboxgl.LngLatBounds();
  this.features.forEach((feature) => {
    bounds.extend(feature.geometry.coordinates);
  });
  await actions.fitBounds(bounds, { padding: 100, duration: 0, maxZoom: 15 });
}

I have a raster layer that I want to add without a TileJSON URL, so I'm loading it like this:

<MglRasterLayer
                :sourceId="layer.id"
                :layerId="layer.id"
                :minZoom="layer.zoom_min"
                :maxZoom="layer.zoom_max"
                :tiles="[layer.url]"
                :tileSize="256"
                :attribution="layer.attribution"
/>

This fails because mapbox-gl sees a url property on the source object. It's undefined but this seems to trigger a validation error in mapbox-gl and it ignores the tiles parameter then.

I believe the problem is in src/components/layer/RasterLayer.js line 47:

let source = {
        type: "raster",
        url: this.url,
        tileSize: this.tileSize
};

The url property should only be defined if this.url has been defined.

Hello,
As far as I can tell, the GeolocateControl does not fire any events that return the user's location. Is this a missing feature or is this the intended behavior?
Imho it would be nice to have this component send the user's location when it changes.

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

since mapbox 0.39 the option watchPosition has been replaced with trackUserLocation.

keep on your excellent work!

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