Web map Vue components with the power of OpenLayers

Last update: May 19, 2022


VueLayers

Web map Vue components with the power of OpenLayers

Build Status Coverage Status GitHub tag NPM version License Downloads 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

VueLayers Branch Vue OpenLayers NPM tag
Current 0.12 master ^2.3 ^6.0 latest
Previous 0.11 v0.11.x ^2.3 ^5.0 0.11.x
Previous 0.10 v0.10.x ^2.0 ^4.0 0.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 test:unit

# run e2e tests
npm run test:e2e

# run all tests
npm test

License

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

GitHub

https://github.com/ghettovoice/vuelayers
Comments
  • 1. How to get current view extent ?

    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.

    Reviewed by signmeuptwice at 2020-07-06 12:26
  • 2. interactive points and circles

    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

    Reviewed by bluelemonade at 2019-07-01 16:42
  • 3. How to fill some polygons ?

    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.

    Reviewed by rSammy at 2018-07-09 19:02
  • 4. Changing projection crashes vuelayers

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

    Reviewed by fasterlars at 2019-04-09 18:26
  • 5. Performance issues with vl-source-cluster

    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

    Reviewed by omrihar at 2017-11-24 14:13
  • 6. How to visualize pure geojson file using Vuelayers?

    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!

    Reviewed by Munyvorn at 2019-12-01 09:05
  • 7. integrating custom map and call events

    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?

    Reviewed by bluelemonade at 2019-06-19 15:53
  • 8. How to positionate overlay

    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

    Reviewed by rSammy at 2018-09-14 13:56
  • 9. How to use a static image as a layer source

    Reviewed by goforward01 at 2017-12-26 07:33
  • 10. How to use some features ?

    Hello.

    There is no docs for all of the categories.

    I'd like to know how to use vuelayers to setup polygons from geojson. How to use the select feature ?

    Thank you

    Reviewed by rSammy at 2018-06-13 12:26
  • 11. Global data projection doesn't work for maps

    Docs here: https://github.com/ghettovoice/vuelayers/blob/master/docs/quickstart.md#global-data-projection say that this should set data projection:

    Vue.use(VueLayers, {
      dataProjection: 'EPSG:4326'
    })
    

    However, this doesn't work for this use:

    vl-map(ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true", :controls="{attribution: false, zoom: true}")
        vl-view(v-if="xy.length > 0" :zoom="15" :center="[long,lat]" :rotation="0")
    

    But this does work:

    vl-map(data-projection="EPSG:4326" ref="map" :load-tiles-while-animating="true" :load-tiles-while-interacting="true", :controls="{attribution: false, zoom: true}")
        vl-view(v-if="xy.length > 0" :zoom="15" :center="xy" :rotation="0")
    
    Reviewed by fnoop at 2018-04-07 10:15
  • 12. how to keep style.Text normal when apply css rotate to .ol-layers

    I rotate the map by

    .map2>.ol-viewport{
      perspective: 200px  ;
      perspective-origin: right bottom;
      &> .ol-layers{
        transform: rotateX(10deg);
        transform:rotateX(5deg) translate(-330px,0px)
      }
    }
    
    

    the map is expected` to be warped.

    Also the style.Text, which I do not expect. image

    how can I make the text normal?

    Reviewed by scil at 2022-05-13 01:32
  • 13. I'm using vuelayers in my application currently I created a button that selects all my points on the map so far everything is perfect, now when all the points are selected and I try to select just one clicking it gives an error

    I'm using vuelayers in my application currently I created a button that selects all my points on the map so far everything is perfect, now when all the points are selected and I try to select just one clicking it gives an Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

    Reviewed by TavinhoFIux at 2022-05-06 21:45
  • 14. why a FullScreen control object is not an instance of ol.control.Control

    I add a FullScreen control.

    <template>
      <div>
        <vl-map ref="map" :load-tiles-while-animating="true"
                :load-tiles-while-interacting="true"
                :defaultControls="false"
                data-projection="EPSG:4326"
                style="height: 400px" @created="mapCreated" >
    
        </vl-map>
      </div>
    </template>
    
    <script>
    
    
    
    import {FullScreen,  } from 'ol/control'
    
    export default {
      methods: {
    
        mapCreated(vm) {
          this.fullScreenControl = new FullScreen()
          vm.$map.addControl(this.fullScreenControl)
        },
    
      }
    }
    

    error:

    vue.runtime.esm.js:619 [Vue warn]: Error in getter for watcher "controls": "Error: Illegal control argument"
    
    found in
    
    ---> <VlMap>
           <OlMap> at Assets/vue/components/vuelayers-map.vue
             <Root>
    warn @ vue.runtime.esm.js:619
    logError @ vue.runtime.esm.js:1893
    globalHandleError @ vue.runtime.esm.js:1888
    handleError @ vue.runtime.esm.js:1848
    get @ vue.runtime.esm.js:4498
    run @ vue.runtime.esm.js:4570
    flushSchedulerQueue @ vue.runtime.esm.js:4326
    (anonymous) @ vue.runtime.esm.js:1989
    flushCallbacks @ vue.runtime.esm.js:1915
    Promise.then (async)
    timerFunc @ vue.runtime.esm.js:1942
    nextTick @ vue.runtime.esm.js:1999
    queueWatcher @ vue.runtime.esm.js:4418
    update @ vue.runtime.esm.js:4560
    notify @ vue.runtime.esm.js:730
    reactiveSetter @ vue.runtime.esm.js:1055
    proxySetter @ vue.runtime.esm.js:4644
    _callee15$ @ mixins.js:1079
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    changed @ mixins.js:1089
    flush @ index.js:54
    setTimeout (async)
    debounced @ index.js:38
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext @ mergeMap.js:85
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/innerSubscribe.js.SimpleInnerSubscriber._next @ innerSubscribe.js:14
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next @ map.js:41
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    handler @ fromEventPattern.js:16
    push../node_modules/vuelayers/node_modules/ol/events/Target.js.Target.dispatchEvent @ Target.js:118
    push../node_modules/vuelayers/node_modules/ol/Object.js.BaseObject.notify @ Object.js:185
    push../node_modules/vuelayers/node_modules/ol/Object.js.BaseObject.set @ Object.js:218
    push../node_modules/vuelayers/node_modules/ol/PluggableMap.js.PluggableMap.setView @ PluggableMap.js:1374
    setView @ vuelayers.esm.js:8773
    _callee2$ @ vuelayers.esm.js:7059
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    mount @ vuelayers.esm.js:7068
    _callee17$ @ mixins.js:1446
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    Promise.then (async)
    asyncGeneratorStep @ asyncToGenerator.js:13
    _next @ asyncToGenerator.js:25
    Promise.then (async)
    asyncGeneratorStep @ asyncToGenerator.js:13
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    _execMount @ mixins.js:1489
    execMount @ mixins.js:1396
    _callee2$ @ mixins.js:516
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    mounted @ mixins.js:524
    invokeWithErrorHandling @ vue.runtime.esm.js:1863
    callHook @ vue.runtime.esm.js:4235
    insert @ vue.runtime.esm.js:3158
    invokeInsertHook @ vue.runtime.esm.js:6390
    patch @ vue.runtime.esm.js:6609
    Vue._update @ vue.runtime.esm.js:3960
    updateComponent @ vue.runtime.esm.js:4081
    get @ vue.runtime.esm.js:4495
    Watcher @ vue.runtime.esm.js:4484
    mountComponent @ vue.runtime.esm.js:4088
    __webpack_modules__../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount @ vue.runtime.esm.js:8459
    (anonymous) @ Tian.html:330
    Promise.then (async)
    (anonymous) @ Tian.html:328
    load (async)
    addOnload @ Tian.html:15
    (anonymous) @ Tian.html:326
    Show 29 more frames
    vue.runtime.esm.js:1897 Error: Illegal control argument
        at getControlId (ol-ext.js:44:1)
        at vuelayers.esm.js:8050:27
        at utils.js:372:1
        at utils.js:345:1
        at forEach (utils.js:337:1)
        at reduce (utils.js:344:1)
        at map (utils.js:371:1)
        at VueComponent.controls (vuelayers.esm.js:8048:19)
        at Watcher.get (vue.runtime.esm.js:4495:1)
        at Watcher.evaluate (vue.runtime.esm.js:4597:1)
    logError @ vue.runtime.esm.js:1897
    globalHandleError @ vue.runtime.esm.js:1888
    handleError @ vue.runtime.esm.js:1848
    get @ vue.runtime.esm.js:4498
    run @ vue.runtime.esm.js:4570
    flushSchedulerQueue @ vue.runtime.esm.js:4326
    (anonymous) @ vue.runtime.esm.js:1989
    flushCallbacks @ vue.runtime.esm.js:1915
    Promise.then (async)
    timerFunc @ vue.runtime.esm.js:1942
    nextTick @ vue.runtime.esm.js:1999
    queueWatcher @ vue.runtime.esm.js:4418
    update @ vue.runtime.esm.js:4560
    notify @ vue.runtime.esm.js:730
    reactiveSetter @ vue.runtime.esm.js:1055
    proxySetter @ vue.runtime.esm.js:4644
    _callee15$ @ mixins.js:1079
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    changed @ mixins.js:1089
    flush @ index.js:54
    setTimeout (async)
    debounced @ index.js:38
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext @ mergeMap.js:85
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/innerSubscribe.js.SimpleInnerSubscriber._next @ innerSubscribe.js:14
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next @ map.js:41
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    handler @ fromEventPattern.js:16
    push../node_modules/vuelayers/node_modules/ol/events/Target.js.Target.dispatchEvent @ Target.js:118
    push../node_modules/vuelayers/node_modules/ol/Object.js.BaseObject.notify @ Object.js:185
    push../node_modules/vuelayers/node_modules/ol/Object.js.BaseObject.set @ Object.js:218
    push../node_modules/vuelayers/node_modules/ol/PluggableMap.js.PluggableMap.setView @ PluggableMap.js:1374
    setView @ vuelayers.esm.js:8773
    _callee2$ @ vuelayers.esm.js:7059
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    mount @ vuelayers.esm.js:7068
    _callee17$ @ mixins.js:1446
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    Promise.then (async)
    asyncGeneratorStep @ asyncToGenerator.js:13
    _next @ asyncToGenerator.js:25
    Promise.then (async)
    asyncGeneratorStep @ asyncToGenerator.js:13
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    _execMount @ mixins.js:1489
    execMount @ mixins.js:1396
    _callee2$ @ mixins.js:516
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    mounted @ mixins.js:524
    invokeWithErrorHandling @ vue.runtime.esm.js:1863
    callHook @ vue.runtime.esm.js:4235
    insert @ vue.runtime.esm.js:3158
    invokeInsertHook @ vue.runtime.esm.js:6390
    patch @ vue.runtime.esm.js:6609
    Vue._update @ vue.runtime.esm.js:3960
    updateComponent @ vue.runtime.esm.js:4081
    get @ vue.runtime.esm.js:4495
    Watcher @ vue.runtime.esm.js:4484
    mountComponent @ vue.runtime.esm.js:4088
    __webpack_modules__../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount @ vue.runtime.esm.js:8459
    (anonymous) @ Tian.html:330
    Promise.then (async)
    (anonymous) @ Tian.html:328
    load (async)
    addOnload @ Tian.html:15
    (anonymous) @ Tian.html:326
    Show 28 more frames
    vue.runtime.esm.js:619 [Vue warn]: Error in callback for watcher "controls": "TypeError: Cannot read properties of undefined (reading 'slice')"
    
    found in
    
    ---> <VlMap>
           <OlMap> at Assets/vue/components/vuelayers-map.vue
             <Root>
    warn @ vue.runtime.esm.js:619
    logError @ vue.runtime.esm.js:1893
    globalHandleError @ vue.runtime.esm.js:1888
    handleError @ vue.runtime.esm.js:1848
    invokeWithErrorHandling @ vue.runtime.esm.js:1871
    run @ vue.runtime.esm.js:4584
    flushSchedulerQueue @ vue.runtime.esm.js:4326
    (anonymous) @ vue.runtime.esm.js:1989
    flushCallbacks @ vue.runtime.esm.js:1915
    Promise.then (async)
    timerFunc @ vue.runtime.esm.js:1942
    nextTick @ vue.runtime.esm.js:1999
    queueWatcher @ vue.runtime.esm.js:4418
    update @ vue.runtime.esm.js:4560
    notify @ vue.runtime.esm.js:730
    reactiveSetter @ vue.runtime.esm.js:1055
    proxySetter @ vue.runtime.esm.js:4644
    _callee15$ @ mixins.js:1079
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    changed @ mixins.js:1089
    flush @ index.js:54
    setTimeout (async)
    debounced @ index.js:38
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext @ mergeMap.js:85
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/innerSubscribe.js.SimpleInnerSubscriber._next @ innerSubscribe.js:14
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next @ map.js:41
    push../node_modules/vuelayers/node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
    handler @ fromEventPattern.js:16
    push../node_modules/vuelayers/node_modules/ol/events/Target.js.Target.dispatchEvent @ Target.js:118
    push../node_modules/vuelayers/node_modules/ol/Object.js.BaseObject.notify @ Object.js:185
    push../node_modules/vuelayers/node_modules/ol/Object.js.BaseObject.set @ Object.js:218
    push../node_modules/vuelayers/node_modules/ol/PluggableMap.js.PluggableMap.setView @ PluggableMap.js:1374
    setView @ vuelayers.esm.js:8773
    _callee2$ @ vuelayers.esm.js:7059
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    mount @ vuelayers.esm.js:7068
    _callee17$ @ mixins.js:1446
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    Promise.then (async)
    asyncGeneratorStep @ asyncToGenerator.js:13
    _next @ asyncToGenerator.js:25
    Promise.then (async)
    asyncGeneratorStep @ asyncToGenerator.js:13
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    _execMount @ mixins.js:1489
    execMount @ mixins.js:1396
    _callee2$ @ mixins.js:516
    tryCatch @ runtime.js:63
    invoke @ runtime.js:294
    (anonymous) @ runtime.js:119
    asyncGeneratorStep @ asyncToGenerator.js:3
    _next @ asyncToGenerator.js:25
    (anonymous) @ asyncToGenerator.js:32
    (anonymous) @ asyncToGenerator.js:21
    mounted @ mixins.js:524
    invokeWithErrorHandling @ vue.runtime.esm.js:1863
    callHook @ vue.runtime.esm.js:4235
    insert @ vue.runtime.esm.js:3158
    invokeInsertHook @ vue.runtime.esm.js:6390
    patch @ vue.runtime.esm.js:6609
    Vue._update @ vue.runtime.esm.js:3960
    updateComponent @ vue.runtime.esm.js:4081
    get @ vue.runtime.esm.js:4495
    Watcher @ vue.runtime.esm.js:4484
    mountComponent @ vue.runtime.esm.js:4088
    __webpack_modules__../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount @ vue.runtime.esm.js:8459
    (anonymous) @ Tian.html:330
    Promise.then (async)
    (anonymous) @ Tian.html:328
    load (async)
    addOnload @ Tian.html:15
    (anonymous) @ Tian.html:326
    Show 29 more frames
    vue.runtime.esm.js:1897 TypeError: Cannot read properties of undefined (reading 'slice')
        at VueComponent.handler (vuelayers.esm.js:8154:1)
        at invokeWithErrorHandling (vue.runtime.esm.js:1863:1)
        at Watcher.run (vue.runtime.esm.js:4584:1)
        at flushSchedulerQueue (vue.runtime.esm.js:4326:1)
        at Array.<anonymous> (vue.runtime.esm.js:1989:1)
        at flushCallbacks (vue.runtime.esm.js:1915:1)
    

    now I located here:

    image

    // ol-ext.js
    
    function getControlId(control) {
        if (control instanceof Control) {
            return control.get('id');
        }
    
        throw new Error('Illegal control argument');
    }
    
    

    the problem : the object control is an instanceof FullScreen which is subclass of Control.

    but why control instanceof Control equals false

    Reviewed by scil at 2022-04-29 03:52
  • 15. How to use

    I have tried to make a snap interaction like this:

          <vl-layer-vector
            id="guideLineLayer"
          >
            <vl-source-vector
              :features="guideLineCollection.features"
              ident="guideLineSource"
            >
              <vl-style>
                <vl-style-stroke
                  color="hotpink"
                  :width="3"
                >
                </vl-style-stroke>
              </vl-style>
            </vl-source-vector>
          </vl-layer-vector>
          <vl-interaction-snap
            source="guideLineSource"
          >
          </vl-interaction-snap>
    

    I also have a "drawing layer" which I use to contain all drawn features before I route them to the correct layers:

          <vl-layer-vector
            ref="drawLayerRef"
            id="drawLayer"
            v-show="false"
          >
            <vl-source-vector
              ref="drawLayerSourceRef"
              :features="[]"
              ident="drawSource"
            >
            </vl-source-vector>
    
          </vl-layer-vector>
    
          <vl-interaction-draw
            :source="draw.mode + 'Source'"
            :type="featureDrawType"
            :active="draw.active"
            @drawend="handleDrawFeature"
          >
          </vl-interaction-draw>
    

    But when I begin drawing, it does not snap to the guideLineSource layer. How can I make new drawings snap to this layer?

    Reviewed by iboates at 2022-04-14 15:02
  • 16. Vuelayers support ECW format?

    Hello and Thank you for VueLayers!

    I need to display an ecw image on vuelayers and i don´t know how to do it.

    I don't know if there is any option to make it easy.

    Thanks!

    Reviewed by Donchurru at 2022-04-12 07:58
  • 17. Capture a created feature from and push it into the layer's

    I have several <vl-layer-vector> components which are defined by GeoJSONs. These GeoJSONs are part of my form, so I want the user to be able to add new features to the GeoJSON when they add new features to the map.

    I have a <vl-interaction-draw> component and I can link it to the appropriate <vl-layer-source>, or even to a temporary one when can just hold new features temporarily.

    What I want to do now however is push the created feature into the actual features array in the source GeoJSON. To do that I will have to capture the drawn geometry and launch a dialog in which the user fills out the properties of the feature, then push it into the features array, and delete the feature from the temporary layer if necessary.

    How can I do this? I cannot find a way to capture the drawn feature's geometry once it has been created.

    The closest I can get is to set :finish-condition="handleDrawFeature", where handleDrawFeature is my method in which I should capture the finished geometry, but the event that gets passes is just the last click.

    I also tried :geometry-function="handleDrawFeature", but when I do that, as soon as I click on the map to draw, it floods the console with man Uncaught TypeError: feature.getGeometry() is undefined errors.

    Reviewed by iboates at 2022-04-05 08:56
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

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

May 2, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
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

May 19, 2022
Baidu Map components for Vue 2.x
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

May 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

May 26, 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

Feb 12, 2022
vue google map custom marker component
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

May 17, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

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

Feb 20, 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

May 10, 2022
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Apr 8, 2022
a simple component to generate an static google map
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

May 17, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
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

Apr 24, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022
🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

May 1, 2022
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 ~ 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

Mar 3, 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

Mar 21, 2022
Vue 2 components for Leaflet maps
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

May 24, 2022
Vue 2.x components for CesiumJS.
Vue 2.x components for CesiumJS.

VUE CESIUM Vue 2.x components for CesiumJS. Load Cesium built package or other third-party packages which are built on Cesium. Languages 中文 English Li

May 23, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

May 26, 2022