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

icon
Latest Release: v0.11.27


VueLayers

Web map Vue components with the power of OpenLayers

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

Overview

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.

Versions

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

Links

Requirements

Install

# 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 https://github.com/ghettovoice/vuelayers.git
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

License

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

Comments

  • 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 jsfiddle.net page, https://jsfiddle.net/ghettovoice/shm1dfeg/1/ looks like mine. How did I do that? I created my own account on jsfiddle.net 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.

    stale 
    Reply
  • custom map projection demo
    custom map projection demo

    Aug 21, 2021

    R/Sir

    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: https://openlayers.org/en/latest/examples/reprojection.html

    regards Ghansham

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

    question 
    Reply
  • 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?

    question 
    Reply
  • 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!

    investigation 
    Reply
  • 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">
           ....
       </vl-layer-vector>
    </vl-overlay>
    

    And define the switcher as:

    var layerSwitcher = new LayerSwitcher();
    map.addControl(layerSwitcher);
    

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

      overlayGroup.getLayers().push(
        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

    Reply
  • 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.

    https://github.com/ghettovoice/vuelayers/blob/d0aca44d0af12c4561962b58dfd293f191c12dbd/src/mixins/ol-cmp.js#L765

    image

    Reply
  • 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-layer-vector>
     <vl-source-cluster v-bind:distance="15">
      <vl-source-vector v-bind:features="featuresMap.features" />
     </vl-source-cluster>
     <vl-style-func v-bind:function="clusterStyle" />
    </vl-layer-vector>
    
    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?

    Reply
  • Feature properties is undefined
    Feature properties is undefined

    Nov 21, 2021

    Hello, Vladimir! I created demo https://jsfiddle.net/DanikJsFiddle/0a2qsh5g/67/ 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.

    Reply
  •  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 ol.style.Style({
        image: new ol.style.Circle({
            fill: new ol.style.Fill({ color: [228, 30, 147, .9] }),
            stroke: new ol.style.Stroke({ color: [228, 30, 147, 0.5], width: 10 }),
            radius: 12,
            displacement:[99999,99999]
        }),
        text: new ol.style.Text({
            text: String(feature.get('features').length),
            fill: new ol.style.Fill({ color: [255, 255, 255] }),
            scale: 1.2
        }),
    })
    

    Any assistance with this would be nice thanks

    Reply
  • 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: https://openlayers.org/en/latest/examples/static-image.html. I couldn't find anything about this, could you please give me some advice about realizing this?

    feature 
    Reply
  • 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

    image

    When I move the map, the size change

    image

    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

    bug 
    Reply
  • integrating custom map and call events
    integrating custom map and call events

    Jun 19, 2019

    hello,

    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?

    question 
    Reply
  • 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!

    question 
    Reply
  • 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:

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

    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

    Reply
  • Changing projection crashes vuelayers
    Changing projection crashes vuelayers

    Apr 9, 2019

    The docs states that you can change projection with the dataProtection property: https://vuelayers.github.io/#/docs/quickstart?id=global-data-projection 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 :)

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

    Jul 9, 2018

    Hello.

    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.

    question 
    Reply
  • 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="feature.id" :id="feature.id" :properties="feature.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-feature>
                 <vl-style-func :factory="styleFuncFactory" />
               
                 <vl-interaction-select :features.sync="selectedFeatures" >   
                    <!-- :condition="pointerMoveCondition" -->
                    <vl-style-func :factory="styleFuncFactory"></vl-style-func>
                </vl-interaction-select>
    

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

    console.log("styleFuncFactory");
        	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?

    regards

    question 
    Reply
  • 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 
    Reply
  • Add support of GetFeatureInfo request
    Add support of GetFeatureInfo request

    Mar 16, 2017

    Add methods to send request GetFeatureInfo in WMS source

    enhancement 
    Reply