vuejs-neshan-map-leaflet

Vuejs component for Neshan Leaflet map.

Getting started

Installation

npm i vuejs-neshan-map-leaflet

Usage

In the simple case you just need to add options prop to NeshanMapLeaflet component and import NeshanMapLeaflet stylesheet.

Global Registration

import { createApp } from 'vue'
import App from './App.vue'

import { NeshanMapLeaflet } from 'vuejs-neshan-map-leaflet'

const app = createApp(App)

app.use(NeshanMapLeaflet)

app.mount('#app')

Local Registration

import { NeshanMapLeaflet } from 'vuejs-neshan-map-leaflet'

export default {
    components: {
        NeshanMapLeaflet
    }
}

Usage

<template>
  <NeshanMapLeaflet
      :options="options"
      @latitude="getLatitude"
      @longitude="getLongitude"
  />
</template>

<script setup>
import { NeshanMapLeaflet } from 'vuejs-neshan-map-leaflet';

const options = {
  key: 'YOUR_API_KEY',
  maptype: 'dreamy',
  poi: true,
  traffic: false,
  center: [36.30284183765441, 59.5958496945331],
  zoom: 13
}

function getLatitude(latitude) {
  console.log(latitude)
}

function getLongitude(longitude) {
  console.log(longitude)
}
</script>

Features

Neshan Maps API Loads on Demand

There is no need to place a <script src= tag at top of page. The Neshan Maps API loads upon the first usage of the NeshanMapLeaflet component.