CODEWITHSUNDEEP
vue.jsmapbox-gl-js
Codey
Codey

Reputation: 505

How to create mapbox gl with vuejs

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <MglMap :accessToken="accessToken" :mapStyle="mapStyle" />
</template>

<script>
import Mapbox from "mapbox-gl";
import { MglMap } from "vue-mapbox";

export default {
  components: {
    MglMap
  },
  data() {
    return {
      accessToken: "pk.eyJ1IjoiYWlzaHdlcnlhIiwiYSI6ImNrYzVyYXBlNzBrZGgzMG8wc3FtZjU5NDAifQ.u4azaXjkh41xSMC1NJLhTw", // your access token. Needed if you using Mapbox maps
      mapStyle: "mapbox://styles/aishwerya/ckc5ufmlw0nu11ip289o79bkl" // your map style
    };
  },

  created() {
    // We need to set mapbox-gl library here in order to use it in template
    this.mapbox = Mapbox;
  }
};
</script>

I created the mapbox-gl map but it showing blank screen

I have tried with this link but it didnt worked

I dont what Im missing it clearly shows me blank screen

Upvotes: 0

Views: 1834

Answers (1)

Chase Rains
Chase Rains

Reputation: 138

Here is a simple way to integrate the mapbox application using Vue 2. This example doesn't require NPM or import statements. I would be careful about including your api key on public forums. I have included your api key in order for this example to work.

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<style>
  #project { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>

<div id="project"></div>

<script>
  var mapping = new Vue({
        el: '#project', 

        data: {
            map: ''
        }, 

        mounted(){           

            mapboxgl.accessToken = 'pk.eyJ1IjoiYWlzaHdlcnlhIiwiYSI6ImNrYzVyYXBlNzBrZGgzMG8wc3FtZjU5NDAifQ.u4azaXjkh41xSMC1NJLhTw';
        
            //create a new mapbox instance           
            this.map = new mapboxgl.Map({
                container: 'project',
                'style' : 'mapbox://styles/mapbox/light-v10'
            });

            //fit the united states to the screen
            this.map.fitBounds([[-135, 47], [-60, 25]]);
        }

    });
</script>

Upvotes: 1

Related Questions