Open Machine-Maker opened 5 years ago
I think the MglMap expects a container prop.. and then it takes 100% of the height of that container. That's what I did anyway and seems to work.
<MglMap
container="map-container"
>
Same issue here. I can explicitly set a pixel height and see it but otherwise it has no height. I tried specifying a separate container as @brendanmatkin suggested but with the same result. @brendanmatkin, do you have a more complete example?
Thanks!
@cberthiaume This is what I did. HOWEVER, I've since switched to https://github.com/phegman/vue-mapbox-gl - I'm not 100% sure if this example still works, but should be close:
// App.vue
<template>
<div id="app">
<div id="map-container" style="height:500px;">
<MapTest/>
</div>
</div>
</template>
<script>
import MapTest from './components/MapTest.vue'
export default {
name: 'app',
components: {
MapTest
}
}
</script>
<style>
</style>
// MapTest.vue
<template>
<MglMap
container="map-container"
:accessToken="accessToken"
:mapStyle="mapStyle"
:center.sync="center"
>
<MglGeojsonLayer
sourceId="artIntakes"
:source="geojsonSource"
layerId="artIntakes"
/>
</MglMap>
</template>
<script>
import Mapbox from "mapbox-gl";
import { MglMap, MglGeojsonLayer } from "vue-mapbox";
export default {
components: {
MglMap,
MglGeojsonLayer,
},
data: function() {
return {
accessToken: process.env.VUE_APP_MAPBOX_TOKEN, // your access token.
mapStyle: process.env.VUE_APP_MAPBOX_STYLE, // your map style
geojsonSource: "../data/geojson.json",
center: [-100.00, 49.00],
};
},
created() {
this.mapbox = Mapbox; // set mapbox-gl library
}
};
</script>
<!-- <style scoped> -->
<style>
.mapboxgl-canvas {
left:0;
}
@import "~mapbox-gl/dist/mapbox-gl.css";
</style>
Thanks! @brendanmatkin, have you been happy with vue-mapbox-gl? We tried both briefly and edned up deciding to do a larger POC with vue-mapbox mainly because it seemed to have a larger and more active set of contributors. If there are good reasons to use vue-mapbox-gl instead we'd be interested in trying it out further.
I like it mostly because it does less. Also a few documentation gaps with this library made it a bit frustrating to get up and running. vue-mapbox-gl creates the component and a few helper functions and so doesn't limit how you can use the actual mapboxgl api on top of it. Also dead easy to integrate mapbox plugins.
Good to know, thanks!
I do not know, maybe someone will come in handy. Worked for me! For Nuxt
nuxt.config.js ---> link for mapbox-gl.css
head: {
title: '***',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '***' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: "stylesheet",
href: "https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css"
}
]
},
plugins: [
{ src: '~/plugins/mapbox', mode: 'client' }
],
plugins/mapbox.js
import Vue from 'vue';
import { MglMap, MglGeolocateControl, MglPopup, MglMarker } from 'vue-mapbox';
import Mapbox from 'mapbox-gl';
Vue.component('MglMap', MglMap);
Vue.component('MglGeolocateControl', MglGeolocateControl);
Vue.component( 'MglPopup', MglPopup);
Vue.component( 'MglMarker', MglMarker);
Vue.prototype.$mapbox = Mapbox;
components/Maps/MainMap.vue ---> mapboxgl-canvas style
<template>
<MglMap
:access-token="accessToken"
:map-style="mapStyle"
:center="coordinates"
:zoom="zoom"
:attributionControl="false"
:interactive="false"
>
<MglMarker :coordinates="coordinates">
</MglMarker>
</MglMap>
</template>
<script>
export default {
data() {
return {
accessToken: "you access token",
mapStyle: 'mapbox://styles/mapbox/navigation-preview-day-v2',
coordinates: [58.5905948, 50.8453711],
location: null,
zoom: 2,
minZoom: 0,
maxZoom: 24
}
}
}
</script>
<style>
.mapboxgl-canvas {
left: 0;
}
</style>
layouts/default.vue ---> mapboxgl-canvas style repeat
<template>
<div class="container-default">
<div class="map-container">
<MainMap/>
</div>
<nuxt/>
</div>
</template>
<script>
import MainMap from '@/components/Maps/MainMap.vue'
export default {
components: {
MainMap
}
}
</script>
<style lang="scss">
.container-default {
max-height: 100vh;
width: 100%;
}
.map-container {
height: 100vh;
width: 100%;
.mapboxgl-canvas {
left: 0;
}
}
</style>
The map has 0 height. The 100% height is the element css but I have to manually set a px value for the map to show up...