mapir-vue

MapirVueComponent

Vue wrapper for mapbox-gl-js. Expose a bunch of component meant to be simple to use for Vue.

Get API Key

🔑 You should first get api key from Map.ir

Installation

npm i mapir-vue

Quick start

Template

 <template>
  <div id="app">
    <mapir :apiKey="MapirApiKey" :center="coordinates" @load="onMapLoaded" @click="onClick"/>
  </div>
</template>

Script

<script>
import { mapir } from "mapir-vue";
 
export default {
  name: "App",
  components: {
    mapir
  },
  data() {
    return {
      coordinates: [51.420296, 35.732379],
      MapirApiKey: "pk.Mapir" // your Api Key.
    };
  },
  created() {
    this.map = null;
  },
  methods: {
    onMapLoaded(event) {
      // in component
      this.map = event.map;
      // or just to store if you want have access from other components
      this.$store.map = event.map;
    },
    onClick(e) {
      console.log(e, "HIiiiiiiii");
    }
  }
};
</script>

Style

<style>
#app {
  width: 100vw;
  height: 100vh;
}
</style>

📖 English Documentation