Vuejs-Vuelayers v0.11.27: vuelayers - Vue 2 components to work with OpenLayers.

Latest Release: v0.11.27


Web map Vue components with the power of OpenLayers

Build Status Coverage Status js-standard-style GitHub tag NPM version License Dependencies Dev dependencies


VueLayers is components library that brings the powerful OpenLayers API to the Vue.js reactive world. It can display maps with tiled, raster or vector layers loaded from different sources.


NOTE: you are looking for README file for the upcoming v0.12 version. To see README file for the current v0.11 version switch to the v0.11.x branch.

VueLayers Branch Vue OpenLayers NPM tag
Current 0.12 v0.12.x ^2.3 ^6.0 latest
Previous 0.11 v0.11.x ^2.3 ^5.0 v0.11.x
Previous 0.10 v0.10.x ^2.0 ^4.0 v0.10.x




# install Vue
npm install vue

# install current VueLayers version 
npm install vuelayers

# install next VueLayers version
npm install [email protected]

Build Setup

NOTE: Node v10+ is required.

git clone --recursive -j8
cd vuelayers

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm start

# build for production
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test


MIT (c) 2017-2019, Vladimir Vershinin
Based on Vue and OpenLayers


  • public fiddles mistake
    public fiddles mistake

    Jul 16, 2021

    Help! Did I edit one of your jsfiddles? I'm sorry! The first example on your page, looks like mine. How did I do that? I created my own account on earlier this week. I must have done something wrong, because it looks like I edited one of your examples (or added one of my tests to your page).

    Sorry about that.

  • custom map projection demo
    custom map projection demo

    Aug 21, 2021


    import proj4 from "proj4"; //import { get as getProjection } from "ol/proj"; import { register as registerProjection } from "ol/proj/proj4";

    proj4.defs( "EPSG:997106", "+proj=geos +sweep=x +lon_0=82.5 +h=35786023 +x_0=0 +y_0=0 +datum=wgs84 +ellps=wgs84 +units=m +no_defs" ); registerProjection(proj4);

    This code is not working in vuelayers application.

    openlayers example is given below:

    regards Ghansham

  • How to use a different map (basemap) style
    How to use a different map (basemap) style

    Sep 22, 2021

    How can i use a different map style (basemap)? The default is too colorful. I need a more simple looking grey map like this:

    Bildschirmfoto 2021-09-22 um 15 03 01

  • How to open a popup
    How to open a popup

    Sep 23, 2021

    How can I open a Popup-box, when I click on a marker?

  • Uncaught TypeError: Cannot read properties of null (reading 'usedTiles')
    Uncaught TypeError: Cannot read properties of null (reading 'usedTiles')

    Oct 8, 2021

    Dear reader,

    When upgrading our vuelayers from version 0.12.0-rc.14 to 0.12.0-rc.26 we introduced a bug in our application. In the component <vl-view> we use the prop extent to constrain the view inside a given area. this worked perfectly in the older version but after the upgrade to the newer version, this prop is given us the error:

    ` Uncaught TypeError: Cannot read properties of null (reading 'usedTiles') at eval (TileLayer.js?fe5a:423) at Map.PluggableMap.handlePostRender (PluggableMap.js?27d5:953) at eval (PluggableMap.js?27d5:1230)


    Can someone explain if this is a bug in vuelayers, openlayers 6 or a config issue in our application?

    When you need more information about our environment, please ask!

  • layer switcher
    layer switcher

    Oct 29, 2021

    Is it possible to use OpenLayers LayerSwitcher in vuelayers?

    Would it be something like this?

    <vl-overlay ref="ovly_ref">
       <vl-layer-vector ref="layer_ref">

    And define the switcher as:

    var layerSwitcher = new LayerSwitcher();

    And then somehow insert the references to that layer into ol-layerswitcher:

        new Layer({
           title: 'My Layer',
           source: this.$refs.layer_ref }) )

    Where should the group be defined? Does vuelayers automatically generate this?

    Is the vl-overlay ref ovly_ref inserted into the group instead of the vl-layer-vector ref layer_ref?

    Thank you

  • ol lifecycle error
    ol lifecycle error

    Nov 17, 2021

    Getting the following error after upgrading to VL 0.12.0-rc26 (which bumped OL to 6.9.0). I attempted to review the previous lifecycle issue, but that pull request had quite a few changes. Would this be similar? If related, we use v-else making v-show not possible. I haven't been able to identify the exact component yet. I'll keep looking into it, but haven't dealt with this aspect of OpenLayers yet.


  • vl-style-func not working
    vl-style-func not working

    Nov 18, 2021

    Hi, we tried to use vl-style-func to style my points like that:

     <vl-source-cluster v-bind:distance="15">
      <vl-source-vector v-bind:features="featuresMap.features" />
     <vl-style-func v-bind:function="clusterStyle" />
    clusterStyle() {
     return (feature) => {
      return new Style({
       image: new Circle({
       fill: new Fill({ color: "#fff" }),
       stroke: new Stroke({ color: "blue", width: 1.5 }),
       radius: 10,
      text: new Text({
       text: String(feature.get("features").length),

    But nothing is displayed. For context we're using vuelayers "0.12.0-rc.26". Can please someone help us understanding how to use correctly the vl-style-func component?

  • Feature properties is undefined
    Feature properties is undefined

    Nov 21, 2021

    Hello, Vladimir! I created demo with my problem.

    I create <vl-interaction-select>. I use <template slot-scope="selectScope"> into <vl-interaction-select> to create overlay popup. Further, feature properties are changed by method's overlay . Now, I want to see modified props in deselect method of interaction, but they equals undefined.

  •  Displacement not applying
    Displacement not applying

    Jan 18, 2022

    Hello when using a style function like this the displacement is not applied to the element in this case the Circle does not get moved.

    return new{
        image: new{
            fill: new{ color: [228, 30, 147, .9] }),
            stroke: new{ color: [228, 30, 147, 0.5], width: 10 }),
            radius: 12,
        text: new{
            text: String(feature.get('features').length),
            fill: new{ color: [255, 255, 255] }),
            scale: 1.2

    Any assistance with this would be nice thanks

  • How to use a static image as a layer source
    How to use a static image as a layer source

    Dec 26, 2017

    Thanks for the awesome work, I was confused about how to use a static image as a layer source just like the demo showed at: I couldn't find anything about this, could you please give me some advice about realizing this?

  • How to positionate overlay
    How to positionate overlay

    Sep 14, 2018

    How to place popup correctly ? I have a map where every areas (features) are visible on the screen, and I don't want anyone to move it. So I want the popup to be shown on the map but the popup doesn't place itself automatically. When I click on some area on the edge of the screen the map gets dragged to the selected area


    When I move the map, the size change


    Whenever I click on some feature, on the bottom of the screen, the map is dragging me slowly to the selected area because of the "pointOnSurface" method How can the popup be shown only on visible screen ?

    <div class="ol-overlay-container ol-selectable" style="position: absolute; top: 179px; left: 0;">

    Top and left values are dynamically changed every one second

  • integrating custom map and call events
    integrating custom map and call events

    Jun 19, 2019


    I created a local map from a historical map with mapTiler. I would like to use these offline map on an information kiosk within a larger Vue app.

    how can I integrate this local map, which tag is provided for this, how can I integrate the map's properties, mapExtent, mapMinZoom, mapMaxZoom, tileExtent

    And how can I call an action within vuex from touchs on position icons?

  • How to visualize pure geojson file using Vuelayers?
    How to visualize pure geojson file using Vuelayers?

    Dec 1, 2019

    Hello guys, I am really new to vuelayers. My purpose is to visualize a geojson file using this vuelayers library, but there seems to be no easy-to-understand example of which component to be used in order to do this visualization. Could you please kindly guide me through any sort of example code? That would be really helpful for me in my project. Thank you in advance!

  • Performance issues with vl-source-cluster
    Performance issues with vl-source-cluster

    Nov 24, 2017

    Hi, first of all, I'd like to say that I'm new to OpenLayers and VueLayers and it therefore might be a problem in my understanding of how to use the framework. I'm testing whether to change from Leaflet.js to OpenLayers (with vuelayers) for an already existing application. I used Leaflet with Vue2leaflet and the marker-cluster plugin for Vue2leaflet in my application and I'm now trying to replace this with OpenLayers.

    I'm trying to simply add a list of points to the map, where each point is designated by marker. I also then would like to be able to interact with the markers (clicking and hovering). As a first step I simply implemented putting the list of points on the map and adding a vl-source-cluster following the example on the demo site, with some modifications.

    The code I have so far is roughly:

      <vl-map :load-tiles-while-animating="true" 
        <vl-view :center.sync="center" :zoom.sync="zoom" :rotation.sync="rotation"></vl-view>
            <vl-source-xyz :url="mapUrl"></vl-source-xyz>
          <vl-source-cluster :distance="200">
              <vl-feature v-for="client in clientList" 
                  <vl-geom-point :coordinates="invert(client.position)"></vl-geom-point>
                    <vl-style-icon src='../statics/icons/ort.png' :scale="0.5" />
            <vl-style-func :factory="clusterStyleFunc" />

    here clientList is an array of about 700 objects. The problem is that it takes the map a really long time to generate the clusters (in comparison with leaflet) and it becomes very slow to interact with, even after it is generated.

    Is this a good approach for what I'm trying to do? Or is it better to create the features array programatically and then pass it to the cluster? And if so, can I still make use of the reactivity of vue.js?

    I've read here about the super cluster library which might be relevant. Is this something already in VueLayers? Do you think it will be difficult to combine with Vuelayers?

    I would really appreciate any help you can give! Thanks, Omri

  • Changing projection crashes vuelayers
    Changing projection crashes vuelayers

    Apr 9, 2019

    The docs states that you can change projection with the dataProtection property: But if I use other projections (for an example 25832 which I would prefer) than 4326 and 3857, vue crashes with the console error:

    vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "resolvedDataProjection": "TypeError: Cannot read property 'getCode' of null".

    And after a while:

    hostReportError.js?0ca4:3 Uncaught RangeError: Maximum call stack size exceeded at error$$1 (rx-subs.js?038f:54)

    I am using the basic "Getting started" example. Any thoughts on this?

    Thanks :)

  • How to fill some polygons ?
    How to fill some polygons ?

    Jul 9, 2018


    I looked in the docs but I couldn't find how to fill only some polygons from a geojson file.

    I saw it is possible to use some vl-style-fill to fill polygons.

    But if I do so, it will fill all of the polygons. I only want to fill some based on a state.

    Is it possible ?

    I really don't want to make a lot of layers lol. But if that's the only solution I guess I won't have much choice.

    Thank you in advance.

  • interactive points and circles
    interactive points and circles

    Jul 1, 2019

    I have a problem to understand the styling and interactive part in your fiddles. (learned a lot with them...)

    I have my elements in the prop list of the component,

         tatorte: {
            type: 'FeatureCollection',
            features: [{
              id: 1,
              type: 'Feature',
              geometry: {
                type: 'Circle',
                coordinates: [0, -500]
            }, {
            id: 2,
            type: 'Feature',
            geometry: {
              type: 'Circle',
              coordinates: [500, -500]
            }, {
              id: 3,
              type: 'Feature',
              geometry: {
                type: 'Circle',
                coordinates: [-500,-500]

    with these elements I do

     <vl-feature v-for="feature in tatorte.features" :key="" :id="" :properties="">
                  <!-- <vl-geom-point :coordinates="feature.geometry.coordinates"/> -->
                  <!-- <vl-style-box>
                      <vl-style-icon :src="png" :scale="1.0" :anchor="[0.5, 1]"/>
                    </vl-style-box> -->
                    <vl-geom-circle :coordinates="feature.geometry.coordinates" :radius="50"/>
                 <vl-style-func :factory="styleFuncFactory" />
                 <vl-interaction-select :features.sync="selectedFeatures" >   
                    <!-- :condition="pointerMoveCondition" -->
                    <vl-style-func :factory="styleFuncFactory"></vl-style-func>

    Ok, I can click the circles and the style changes , but only the selected style! the unselected circle get the

        	const fillBase = new Fill({ 
            color: 'rgba(255, 255, 255, 1.0)'
          const fillSelected = new Fill({
            color: 'rgba(0, 255, 255, 1.0)'
          const strokeBase = new Stroke({
            color: 'red',
            width: 3
          const strokeSelected = new Stroke({
            color: 'blue',
            width: 7

    why didn't the circle use the default style? when I use png graphics I use the stylebox, but how can I switch the style with pngs? and whats about the "pointerMoveCondition"? is the a documentation about the conditions?

    and I got the feature.getId() to do something with the selected circle via vuex in my app. How can I reset the selected feature id?


  • How to get current view extent ?
    How to get current view extent ?

    Jul 6, 2020

    I would like to get the current vl-view extent but not sure how to do it or if it is possible; can't find anything in the docs.

    That would be great so I can create boundaries for my SQL request.

    question stale 
  • Add support of GetFeatureInfo request
    Add support of GetFeatureInfo request

    Mar 16, 2017

    Add methods to send request GetFeatureInfo in WMS source