@neshan-maps-platform/vue3-openlayers
v2.0.1
Published
<p align="center"> <a href="https://platform.neshan.org"> <img width="150" src="https://static.neshanmap.ir/content/places/assets/images/21.png"> </a> </p>
Downloads
361
Keywords
Readme
⚙️ 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.