Humble vue wrapper for the powerful openlayers map api

Related tags

Map vue openlayers
Overview

vue-openlayers

this project doesn't receive maintenance for a while, if you need new features see vue3-openlayers project.

  • humble wrapper for the powerful openlayers map api
  • demo/docs here

maintained version

For a better maintained and modern version, please see vue3-openlayers project.

This project was a pleasure to create but sadly i can't maintain that. Hopefully Melih Altıntaş did a great job creating a modern wapper vor vue.

Usage

and ">
// require the openlayers css
require("../node_modules/openlayers/css/ol.css");

// require vue and any other shiny library
const Vue = require('vue');
// ...
// at some point require vue-openlayers
const VueOpenLayers = require("vue-openlayers");
// ...
// then install the plugin
Vue.use(VueOpenLayers);

// done! now on your .vue documents you have the right to use 
     and 
    
Issues
  • Demo not working

    Demo not working

    When I visit https://sombriks.github.io/vue-openlayers, nothing is shown and there are no error in the browser dev tools console

    Tested both on Firefox and Chrome on Ubuntu 16.04 - 64 bits

    The issue seems to be in the missing links. Using local dev mode or local build, I get the following selection_591

    whereas on your demo link I get this image

    selection_592

    opened by ThomasG77 2
  • Provide project roadmap

    Provide project roadmap

    need of a decent roadmap and a predictable release cycle

    opened by sombriks 1
  • How to use this library?

    How to use this library?

    I am very new to JS/Vue

    I tried to use this library but it doesn't work directly

    can you try to write a simple document for using this library?

    opened by Pezhin 1
  • Is this project still being worked on?

    Is this project still being worked on?

    Hey,

    I'm playing around with OpenLayers for a personal project and stumbled upon this plugin. Are you still working on this?

    opened by andres-k 1
  • Error with shorthand and Uglify

    Error with shorthand and Uglify

    Error

    When I run npm run build with VueJS I get:

    ERROR in build.js from UglifyJs Unexpected token: punc (() [./~/vue-openlayers/src/main.js:12,0][build.js:3631,9]

    Cause

    Uglify has some problems with shorthand method definition.

    Solution

    In file src/main.js

    Instead: install(Vue, options) {

    write: install: function(Vue, options) {

    opened by icecoolinux 0
  • Update/remove vue 2.3.0 dependency

    Update/remove vue 2.3.0 dependency

    Hello there,

    First of all thank you for your work and bringing OpenLayers to Vue.

    I am trying to use v. 0.10.13 in a Vue 2.9.6 project. I don't know if it's due to my UI framework, but my code breaks due to the Vue 2.3.0 peer dependency.

    Is there a way to update this to a current version, or even remove it?

    Cheers

    opened by arjanski 0
Owner
Leonardo Silveira
i solve problems to pay my rent and for fun
Leonardo Silveira
Geolocation field & map block: All you need for a map on your website

Geolocation field & map block: All you need for a map on your website

Microman 15 Oct 17, 2021
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
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
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Guillermo Peralta Scura 110 Jan 2, 2022
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
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

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

null 5 Nov 19, 2021
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 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 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
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
Wrapper for vue-mapbox-geocoder

v-mapbox-geocoder ?? v-mapbox plugin for mapbox-gl-geocoder support. Setup First of all you need to install mapbox-gl-geocoder and v-mapbox. See v-map

GeoSpoc 8 Sep 18, 2021
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

İlker Güldalı 5 Jun 1, 2021
Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Andrei Kashcha 4.6k Jan 21, 2022
🗺 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
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
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
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