longdo-map-vue

Longdo Map component for Vue.js

Usage no npm install needed!

<script type="module">
  import longdoMapVue from 'https://cdn.skypack.dev/longdo-map-vue';
</script>

README

Longdo Map Logo

longdo-map-vue

Longdo Map component for Vue.js

npm npm npm

Table of Contents

Getting Started

Requirement

The current version of Longdo Map Vue does not support Vue 3.

Installation

You can easily install by using npm

npm i longdo-map-vue

Usage

First, you need to get a Longdo Map API key.

Then, after you have Longdo Map API key and component installed, you need to register it to your Vue project.

There are two ways of registering component:

Register component globally

This is a recommended way of registering component

In your main.js or similar file:

import Vue from 'vue'
import LongdoMap from 'longdo-map-vue'

Vue.use(LongdoMap, {
    load: {
        apiKey: 'YOUR_LONGDO_MAP_API_KEY'
    }
})

Then you can use <longdo-map/> in your component template.

<template>
    <longdo-map/>
</template>

Register locally in your component

In your component file, for example Foo.vue:

<template>
    <longdo-map/>
</template>
import { LongdoMap } from 'longdo-map-vue'
LongdoMap.init({ apiKey: 'YOUR_LONGDO_MAP_API_KEY' })

export default {
  name: 'Foo',
  components: {
      LongdoMap
  }
}

You can import more components if you want, for example:

import { LongdoMap, LongdoMapMarker } from 'longdo-map-vue'

Examples

Add a polygon to Longdo Map:

<template>
    <longdo-map>
        <longdo-map-polygon
            :location="locationList"
            :lineWidth="2"
            :lineColor="'rgba(0, 0, 0, 1)'"
            :fillColor="'rgba(255, 0, 0, 0.4)'"
        />
    </longdo-map>
</template>
export default {
    data() {
        return {
            locationList: [
                { lon: 99, lat: 14 },
                { lon: 100, lat: 13 },
                { lon: 102, lat: 13 },
                { lon: 103, lat: 14 }
            ]
        }
    }
}

Add multiple markers to Longdo Map:

<template>
    <longdo-map :zoom="10" :lastView="false">
        <longdo-map-marker
            v-for="(item, i) in markers"
            :key="i"
            :location="item.location"
            :title="item.title"
            :detail="item.detail"
        />
    </longdo-map>
</template>

Using Longdo Map object:

<template>
    <longdo-map @load="loadMap">
        <longdo-map-marker @add="addMarker" :location="{ lon: 99, lat: 14 }" />
    </longdo-map>
</template>
export default {
    methods: {
        loadMap (map) {
            map.Layers.setBase(longdo.Layers.NORMAL)
        },
        addMarker (marker) {
            console.log(marker.location())
        }
    }
}

Components

Map

  • Props
  • Event: @load="Function(object)"
<longdo-map :zoom="10" :lastView="false" />

Overlay

  • Props
  • Event: @add="Function(object)"
<longdo-map>
    <longdo-map-marker :location="{ lon: 99, lat: 14 }" :title="'Home'" :detail="'My home'" />
</longdo-map>

Geometry

longdo-map-dot, longdo-map-circle, longdo-map-rectangle,

longdo-map-polyline, longdo-map-polycurve, longdo-map-polygon

  • Props
  • Event: @add="Function(object)"
<longdo-map>
    <longdo-map-polygon
        :location="[{ lon: 100.123, lat: 13.579 }, ...]"
        :lineWidth="2"
        :lineColor="'rgba(0, 0, 0, 1)'"
        :fillColor="'rgba(255, 0, 0, 0.4)'"
    />
</longdo-map>

Menu Bar

<longdo-map>
    <longdo-map-menu-bar :button="[{ label: 'first', value: 1 }]" :dropdown="[{ label: 'Normal' }]" :dropdownLabel="'more'" :change="handlerFunction" />
</longdo-map>

Handler function(currentMenuItem: Object, lastMenuItem: Object): void when user change menu

Tag Panel

<longdo-map>
    <longdo-map-tag-panel :tag="['temple', 'sizzler']" />
</longdo-map>

Custom Control

<longdo-map>
    <longdo-map-custom-control :html="'<button>button</button>'" />
</longdo-map>

Lock Map

<longdo-map>
    <longdo-map-lock-map :lock="Boolean" />
</longdo-map>

Lock Screen

<longdo-map>
    <longdo-map-lock-screen v-model="Boolean" />
</longdo-map>

Custom UI

  • Props: vertical, horizontal ('top', 'right', 'bottom', 'left', 'center')
<longdo-map>
    <longdo-map-custom-ui :vertical="'bottom'" :horizontal="'center'">
        <div>Longdo Map</div>
    </longdo-map-custom-ui>
</longdo-map>

Marker Cluster

<longdo-map>
    <longdo-map-marker-cluster :markerList="[{ location: { lat: 13.745026, lon: 100.523041 }, options: { icon: {} } }, ... ]" />
</longdo-map>

More

Heatmap

<longdo-map>
    <longdo-map-heatmap
        :data="{ max: 10, data:[{ lat:60.087195, lon:84.767761, value:8 }, ...] }"
        :radius="2"
        :maxOpacity="0.5"
        :scaleRadius="true"
        :userLocalExtrema="true"
    />
</longdo-map>

More

Panorama

  • Event: @load="Function(object)"
<longdo-map-panorama
    :map="map"
    :showPath="true"
/>
<longdo-map @load="obj => map = obj" />

Documentation

References