Longdo Map component for Vue.js

Overview

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 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

button'" /> ">
<longdo-map>
    <longdo-map-custom-control :html="''" />
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>
    <longdo-map-custom-ui :vertical="'bottom'" :horizontal="'center'">
        <div>Longdo Mapdiv>
    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

Issues
  • Can't move map and map doesn't bin event

    Can't move map and map doesn't bin event

    image

    Vue 2.9

    <longdo-map @load="loadMap">
    
    loadMap(map) {
                map.Layers.setBase(longdo.Layers.NORMAL);
                console.log("--- INITIAL LOAD MAP ---");
                console.log(map);
                map.Ui.Mouse.enableDrag(true);
                map.Ui.Keyboard.enableInertia(true); // เปิด-ปิดการการไถลเมื่อเลื่อนแผนที่ด้วย Keyboard
                map.Ui.Keyboard.enable(true); // เปิด-ปิดการใช้งาน Keyboard
                map.Event.bind("doubleClick", function() {
                    var result = map.bound();
                    console.log(result);
                });
            },
    
    opened by ggafiled 3
  • updated readme

    updated readme

    opened by khopha 0
  • hotfix

    hotfix

    opened by khopha 0
  • Develop

    Develop

    opened by khopha 0
  • readme

    readme

    opened by khopha 0
  • Feature/marker

    Feature/marker

    opened by khopha 0
  • Feature/marker

    Feature/marker

    opened by khopha 0
  • Feature/marker

    Feature/marker

    add marker

    opened by khopha 0
  • geometry components

    geometry components

    opened by khopha 0
  • Develop

    Develop

    opened by khopha 0
Releases(v2.0.0)
Owner
Metamedia Technology
Metamedia Technology Co., Ltd.
Metamedia Technology
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

eric regnier 124 Jan 14, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

Gerard Burns 39 Jan 16, 2022
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

Eduardo P. Rivero 22 Sep 18, 2021
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

马金花儿 2.2k Jan 16, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Vladimir Vershinin 610 Jan 12, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

null 5 Nov 19, 2021
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 223 Jan 24, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Victor Cazanave 65 Jan 18, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

MapTiler 4 Dec 31, 2021
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Sylvain Julé 79 Dec 12, 2021
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Daniel Sim 1.8k Jan 8, 2022
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Pete Hegman 262 Nov 21, 2021
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

Guillaume Leclerc 547 Jan 14, 2022
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

null 310 Jan 23, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Diego A. Zapata Häntsch 117 Jan 12, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Damien Roche 29 Dec 9, 2021
🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Studio Meta 36 Nov 9, 2021
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

Zoya 0 Dec 5, 2021
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Vue Leaflet 1.8k Jan 21, 2022