soal / vue-mapbox Goto Github PK
View Code? Open in Web Editor NEWVuejs 2 components for interacting with mapbox-gl-js
Home Page: https://soal.github.io/vue-mapbox
License: MIT License
Vuejs 2 components for interacting with mapbox-gl-js
Home Page: https://soal.github.io/vue-mapbox
License: MIT License
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.
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.
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.
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.
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
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.
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
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"
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
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
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>
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
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
This my vue component:
`
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?
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 ?
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.
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
Adding clustering property to Geojson layer as in Mapbox.
since mapbox 0.39 the option watchPosition has been replaced with trackUserLocation.
keep on your excellent work!
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?
Would be great!
Probably because of this line. I suspect this should set initial
to false.
vue-mapbox/src/components/GlMap.vue
Line 117 in ef8442b
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/
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.
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>
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
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
}
}
}),
}
},
}
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?
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 });
}
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
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
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.
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);
}
}
vue-mapbox/src/components/layer/GeojsonLayer.js
Lines 162 to 169 in bfffb7f
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>
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>
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?
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.
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 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-
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?
'error' and 'geolocate' both emit the same method. Should't this one emit something like 'geolocate-geolocate'?
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
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?
Привет. Отличный компонент!
Поскольку документация пока не очень доступна по этому поводу, я попробовал сам добавить маркер. Но ничего не вышло, если просто указать координаты как в случае с mgl-popup.
Не мог бы подсказать как это сделать ?
Спасибо за твою работу
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.?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.