So the height 100% isn't working properly?

[Machine-Maker]

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...

[brendanmatkin]

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"
>

[cberthiaume]

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!

[brendanmatkin]

@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>

[cberthiaume]

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.

[brendanmatkin]

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.

[cberthiaume]

Good to know, thanks!

[DmitriyColors]

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>