vue3-openstreet-map

A Simple & free Vue 3 Openlayers Map Picker & Geocoder (Openstreet Map based) plugin

Features

• Free to use (OpenLayers Map based)

• Easy to use

• Drag and drop marker

• Search location

• Reverse geocode

• Adaptive

Prequisite

• Vue 3 + Vite / Nuxt 3

• Openlayers (Download here)

• Openlayers Geocoder (Download here)

• Openlayers Popup (Download here)

Installation

vue3-openstreet-map requires Node.js v10+ to run.

Install the dependencies and devDependencies and start the server.

npm  i  vue3-openstreet-map@latest  --save

How to use / Usage

1. Import the component

import { VueOpenMap } from "vue3-openstreet-map"

2. Import the style

import "/node_modules/vue3-openstreet-map/dist/style.css"

3. Put to the 'components' object (for options API)

export default defineComponent({
	components: {
		VueOpenMap
	}
})

4. Insert inside your component

// put this in template area & add width and height of parent div
<div style="width: 60%; position: relative; height: 600px;">
	<VueOpenMap :options="options" @on-change="onMyMapChange" />
</div>

Options

Positions

position (object) - Coordinate / position options

• lat (integer) - Latitude number

• lon (integer) - Longitude number

• zoom (integer) - Map zoom size

Search

search (object) - Search input options

• show (boolean) - Show / hide search input

• placeholder (string) - Placeholder text for search input

• language (string) - Language | default : 'en' | e.g: ‘en’, ‘id’, ‘jp’, etc

Picker

picker (object) - Marker options

• show (boolean) - Show / hide popup info

• label (string) - Popup info label

• icon (string) - Icon image file

Event

• onChange - Triggered when map is clicked marker is moved
  • response
    • address_name - Local address name
    • address_details - Address details
    • origin - Original coordinates
      • lat : Original latitude
      • lon : Original longitude
    • coordinates- Native coordinates
      • lat : Native latitude
      • lon : Native longitude
  • example usage

  onMyMapChange(event) => {
    // response will be getting on event
    console.log(event)
  }

Notes

From 🇮🇩 with 💗

Developed by Daksa Media

License

MIT

Free Software, Hell Yeah!