@neshan-maps-platform/vue3-openlayers

Vue3 Neshan Map Openlayers

An official Vue wrapper for neshan-map-openlayers library

⚙️ Before Install

You need a map key to use our map on your vue web application. You can signup and get a key from Our Platfrom.
For more information, visit our doc page.

📦 Install

npm install @neshan-maps-platform/vue3-openlayers
npm install @neshan-maps-platform/ol

yarn add @neshan-maps-platform/vue3-openlayers
yarn add @neshan-maps-platform/ol

🔨 Usage

<template>
    <div class="page">
        <NeshanMap
            defaultType="neshan"
            mapKey="YOUR_MAP_KEY"
            serviceKey="YOUR_SERVICE_KEY"
            :center="{latitude: 36.311559, longitude: 59.5870851}"
            :zoom="14"
            :poi="true"
            :traffic="true"
            @on-init="onInit"
        />
    </div>
</template>
<style>
    @import url("@neshan-maps-platform/vue3-openlayers/dist/style.css");
    html, body, .page, #app {
        width: 100%;
        height: 100%;
        display: block;
        padding: 0;
        margin: 0;
    }
</style>

<script setup lang="ts">
import NeshanMap from "@neshan-maps-platform/vue3-openlayers"
import { Map } from "@neshan-maps-platform/ol"
import {fromLonLat} from '@neshan-maps-platform/ol/proj'

function onInit(map:Map) {
    const view = map?.getView()
    view?.animate({
        center: olProj.fromLonLat([59.5870851, 36.311559]),
        zoom: 11,
        duration: 1000,
    })
}
</script> 

TypeScript

@neshan-maps-platform/vue-openlayers is written in TypeScript with complete definitions.