Web map Vue 3.x components with the power of OpenLayers

Last update: May 26, 2022

vue3-openlayers

Web map Vue components with the power of OpenLayers

Netlify Status NPM version Downloads Github Issiues GitHub forks GitHub Stars


Overview

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

Links

Requirements

Alt Text

Install

# install Vue
npm install vue

# install current vue3-openlayers version 
npm install vue3-openlayers

License

MIT (c) Melih Altıntaş

GitHub

https://github.com/MelihAltintas/vue3-openlayers
Comments
  • 1. ol-layerswitcherimage-control Implement Groups to separate base layers from vector layer + user options prop

    ol-layerswitcherimage-control is frustrating base layers should be displayed as radio to only have one selected at a time by default From doc this is normally done by putting type='base' on the layer

    We also need a user object to define custom groups

    Describe the solution you'd like props on the component

    Reviewed by signmeuptwice at 2021-09-10 16:09
  • 2. How to Save/Recover/Program/Add/Delete Features ?

    Not really a bug but I need advice from the developpers because I am completely lost on the logic behind how to deal with feature states

    the doc is not clear; at least for me.

    I have this template

     <ol-interaction-select @select="featureSelected" :condition="selectCondition" :features="selectedFeatures">
        <ol-style>
          <ol-style-stroke :color="'red'" :width="2"></ol-style-stroke>
          <ol-style-fill :color="`rgba(255, 0, 0, 0.4)`"></ol-style-fill>
        </ol-style>
      </ol-interaction-select>
    <ol-source-vector :projection="projection">
       <ol-interaction-modify v-if="modifyEnabled" :features="selectedFeatures" @modifyend="modifyend"></ol-interaction-modify>
       <ol-interaction-draw v-if="drawEnable" :type="drawType" @drawend="drawend"></ol-interaction-draw>
    </ol-source-vector>
    

    and the logic:

    import {Collection} from "ol"
    setup(){
           const selectedFeatures = ref(new Collection())
           let newFeatures = ref([])
    
           const drawend = (event) => {
              newFeatures.value.push({type:event.target.type_, coordinates:event.target.sketchCoords_})
              modifyEnabled.value = true
              drawEnable.value = false
              emit()
           }
           const modifyend = (event) => {
               // how to know which feature I am editing and how to get the new value ?
               emit()
            }
            function featureSelected(event) {
              const feature = event.target.getFeatures()
              selectedFeatures.value = event.target.getFeatures()
              if(feature.array_ && feature.array_.length) {
                 let coordinates = null
                 if(feature.array_[0].values_.geometries && feature.array_[0].values_.geometries.length) {
                   coordinates = feature.array_[0].values_.geometries[0].flatCoordinates
                 } else if(feature.array_[0].values_.geometry) {
                   coordinates = feature.array_[0].values_.geometry.flatCoordinates
                 }
                console.log(coordinates)
            }
        }
    }
    

    when I select I get the new coordinates with featureSelected but that seems cumbersome because I have to dig down into the object and there is no real relation between what I am editing and my data because newFeatures is not being updated.

    selectedFeatures and newFeatures have different types so I need to translate one to the other and vice versa ?

    Ideally everything should be sharing a single reactive value/format somewhere between the collection and the modified one but they are not linked/bridged ?? Ideally I would just like to put newFeatures in the modify component but I need to track selectedFeature instead and then copy values back to my newFeatures ?

    In newFeatures I have a collection of simple data that has no reference to the dom like [{type:'Point',coordinates:[3,2,5]}] in selectedFeatures I have a complex object so How am I supposed to keep references between both objects?

    so I can get new values from console.log(coordinates) but what am I supposed to do with these ? How do I update my newFeatures array? is there no simple feature getter and setters ?

    Clearly there must be something I am missing because I can't even extract feature type like LineString, circle, etc... from the modify event object.

    in featureSelected I need to do selectedFeatures.value = event.target.getFeatures() and in drawend I have to do selectedFeatures.value.push(event.feature). What is the reason ?

    or I could do without newFeatures if there is a way to get all current features from ol-interaction-draw component for export? but in which format to store in database so I can re-edit them later ?

    Could you clarify for me? Sorry but I have been on this for 2 days now.

    Full code https://gist.github.com/signmeuptwice/c45085e64e09828bc6f3bc81635fdb9e

    Reviewed by signmeuptwice at 2021-09-07 12:12
  • 3. [Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'currentRenderingInstance.isCE')

    Describe the bug Copying the ol-map sample fires this error

    [Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'currentRenderingInstance.isCE')
    	logError (runtime-core.esm-bundler.js:6664)
    	handleError (runtime-core.esm-bundler.js:305)
    	callWithErrorHandling (runtime-core.esm-bundler.js:259)
    	flushJobs (runtime-core.esm-bundler.js:483)
    	promiseReactionJob
    

    To Reproduce Steps to reproduce the behavior:

    1. clone my sample repository https://github.com/eltorio/hello-openlayers.git
    2. yarn install && yarn serve
    3. goes to http://127.0.0.1:8080/
    4. See error

    Expected behavior Display a full width map and height 400px

    package.json

    {
      "name": "hello-openlayers",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "@fortawesome/fontawesome-free": "5.15.3",
        "@popperjs/core": "2.9.1",
        "@tailwindcss/forms": "0.2.1",
        "@vue/compiler-sfc": "3.0.7",
        "chart.js": "2.9.4",
        "core-js": "3.9.1",
        "gulp": "4.0.2",
        "gulp-append-prepend": "1.0.8",
        "tailwindcss": "2.0.4",
        "vue": "3.0.7",
        "vue-router": "4.0.5",
        "vue3-openlayers": "^0.1.55"
      },
      "devDependencies": {
        "@babel/core": "7.13.10",
        "@babel/eslint-parser": "7.13.10",
        "@vue/cli-plugin-babel": "5.0.0-alpha.7",
        "@vue/cli-plugin-eslint": "5.0.0-alpha.7",
        "@vue/cli-service": "5.0.0-alpha.7",
        "autoprefixer": "10.2.5",
        "eslint": "7.22.0",
        "eslint-plugin-vue": "7.7.0",
        "postcss": "8.2.8",
        "vue-template-compiler": "2.6.12"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "rules": {},
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        }
      },
      "postcss": {
        "plugins": {
          "autoprefixer": {}
        }
      },
      "browserslist": [
        "> 1%",
        "last 2 versions"
      ]
    }
    
    

    **Vue **

    <template>
    <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">
    
        <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" 
        :projection="projection" />
    
        <ol-tile-layer>
            <ol-source-osm />
        </ol-tile-layer>
        
    </ol-map>
    </template>
    <script>
    import {
        ref
    } from 'vue'
    export default {
        setup() {
            const center = ref([40, 40])
            const projection = ref('EPSG:4326')
            const zoom = ref(8)
            const rotation = ref(0)
            return {
                center,
                projection,
                zoom,
                rotation
            }
        },
    }
    </script>
    

    main.js

    import { createApp } from "vue";
    import { createWebHistory, createRouter } from "vue-router";
    
    // styles
    
    import "@fortawesome/fontawesome-free/css/all.min.css";
    import "@/assets/styles/tailwind.css";
    
    // mouting point for the whole app
    
    import App from "@/App.vue";
    
    //vue3 openlayers
    import OpenLayersMap from 'vue3-openlayers';
    import 'vue3-openlayers/dist/vue3-openlayers.css';
    import Test from "@/views/OpenLayers.vue";
    
    // routes
    
    const routes = [
      {
        path: "/",
        component: Test,
      },
      { path: "/:pathMatch(.*)*", redirect: "/" },
    ];
    
    const router = createRouter({
      history: createWebHistory(),
      routes,
    });
    
    const app = createApp(App);
    
    app.use(router);
    app.use(OpenLayersMap);
    app.mount("#app");
    
    Reviewed by eltorio at 2022-01-19 15:13
  • 4. Delete Geometries After Draw Or Any Other Geometries

    When implement ol-interaction-draw how i can add feature to user delete the selected shape , i'm try from ol-interaction-clusterselect get the featureSelected event and if have a function to delete the current element or something like that or please if have some other way.

    Thank you.

    Reviewed by ibrahim-developper at 2021-09-15 17:21
  • 5. Flowline or multicolor multi-line-string ? (display elevation)

    I cannot see in the doc an example of a multicolor linestring

    the closest I fount is the multi-line-string so I tried this

          <ol-feature v-if="waypoints && waypoints.length > 0">
            <ol-geom-multi-line-string :coordinates="waypoints"></ol-geom-multi-line-string>
            <ol-style :overrideStyleFunction="overrideStyleFunction">
              <ol-style-stroke color="green" :width="7"></ol-style-stroke>
            </ol-style>
          </ol-feature>
    

    problem is that my overrideStyleFunction is only triggered once and the line is the same color everywhere not sure what I am doing wrong

    OL has Flowline which could be great to have as a component ?

    Reviewed by signmeuptwice at 2021-09-13 15:45
  • 6. ol-layerswitcherimage-control has extra non existent layer and all layers are selected by default

    I could not find any documentation on this. If I missed it all my apologies for a useless post

    I see that the demo has the exact same behavior; Did you forget props in demo ?

    using the <ol-layerswitcherimage-control >

    I have an extra layer with image data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAEAAAABA … eJLjLwPul3vj5d0eAAAAAElFTkSuQmCC

    then by default all my layers are selected; this is a big performance issue

    Can you please let me know how to control this component ?

    Reviewed by signmeuptwice at 2021-09-09 10:48
  • 7. Usage in a component render function

    Hi,

    I would like to render the "ol-map" (and its children components) using the h() function. Something like:

    h(Map, {
        class: 'q-mt-md',
        loadTilesWhileAnimating: true,
        loadTilesWhileInteracting: true,
        style: 'height:400px'
      }, [ 
          h(View, {
              center: [0, 45],
              rotation: 0,
              zoom: 8,
              projection: 'EPSG:4326'
          }),
          h(FullScreenControl),
          h(TileLayer, null, [ h(SourceOSM) ])
      ])
    

    What is the appropriate import directive that I could use to get access to the component definitions Map, View, FullScreenControl, TileLayer etc. ?

    Thanks

    Reviewed by ymarcon at 2022-02-28 11:33
  • 8. [Warning] No map visible because the map container's width or height are 0

    from doc example, inserting the following component

    <ol-overviewmap-control><ol-tile-layer><ol-source-osm /></ol-tile-layer></ol-overviewmap-control>

    gives error

    [Warning] No map visible because the map container's width or height are 0.

    I imported

    import 'vue3-openlayers/dist/vue3-openlayers.css'

    tested in my project and with fresh project from latest source

    Reviewed by signmeuptwice at 2021-09-04 15:08
  • 9. Beginner question: load ol-source-wmts from geoserver found TileMatrix are missmatch.

    Hi ,

    I want to load a map from geoserver. I config the tile cache in geoserver and i can get tile image from browser . http://localhost:28080/geoserver/gwc/service/wmts/rest/test_site:south_sea_release/default/EPSG:4326/EPSG:4326:7/46/200?format=image/png

    I use ol-source-wmts to load the tile image:

    <ol-tile-layer :zIndex="1001" :center="center">
          <ol-source-wmts
              :url="url"
              :matrixSet="matrixSet"
              :format="format"
              :style="styleName"
              :projection="projection"
              requestEncoding="REST"
          >
          </ol-source-wmts>
        </ol-tile-layer>
    
        const url = ref('http://localhost:28080/geoserver/gwc/service/wmts/rest/test_site:south_sea_release/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png')
        const layerName = ref('test_site:south_sea_release')
        const matrixSet = ref('EPSG:4326')
        const format = ref('image/png')
        const styleName = ref('default')
    

    I found some error in browser console and the actual request is: http://localhost:28080/geoserver/gwc/service/wmts/rest/test_site:south_sea_release/default/EPSG:4326/3/2/6?format=image/png

    I found the source code to compute matrixIds are

         const getTileGrid = computed(() => {
          
                const resolutions = new Array(14);
                const matrixIds = new Array(14);
    
                for (var z = 0; z < 14; ++z) {
    
                    resolutions[z] = size.value / Math.pow(2, z);
                    matrixIds[z] = z;
                }
    
                return new WMTSTileGrid({
                    origin:origin.value,
                    resolutions,
                    matrixIds
                });
            });
    

    So i want to know how to add the prefix (e.g. EPSG:4326 in this question).

    I'm a beginner to use openlayer and geoserver and not sure if this can be configed in geoserver.

    Thanks a lot. Jeffry

    Reviewed by wangrognjie at 2022-01-14 10:15
  • 10. Issue with the snap interaction & how to automatically select/modify a feature on drawend?

    1. In the following example, when drawing, the snap interaction works only for the first drawn polygon. Or if you first select and modify one of the two polygons and then start drawing a polygon, the snap interaction doesn't work. -However the snap interactions works on the modify interaction.

    2. I am having a hard time figuring out how to automatically select / modify a polygon when I finish drawing it on the drawend event. Adding the following to the drawend function doesn't quite work and I don't think I am doing it the right way.

    selectedFeatures.value = event.feature
    modifyEnabled.value = true
    

    https://codesandbox.io/s/vue3-openlayers-forked-qqrqx?file=/src/App.vue

    Reviewed by akc4 at 2021-07-30 23:07
  • 11. Source change on modify & stopClick parameter on draw interaction

    in the following example using the draw interaction with the my generated features. If I draw a polygon and then click on another polygon to select it and modify it, the drawn one disappears because the source changes.

    However when using the :url features if you draw a polygon and then select a country and modify it, the drawn polygon doesn't disappear.

    So if I understand correctly, if I want the source to remain the same I must use the :url instead of :features parameter to load features?

    Also the stopClick on the parameter on the draw interaction doesn't seem to work, it still fires the click event.

    https://codesandbox.io/s/vue3-openlayers-forked-qqrqx?file=/src/App.vue:807-816

    Reviewed by akc4 at 2021-07-30 02:53
  • 12. WIP: Typescript types declarations

    Added basic typescript declaration for the module.

    Description

    • Created typescript declaration file
    • Added declarations that declare return values of the inject method provided by the plugin.

    Motivation and Context

    When using a module with typescript there are some types missing and can be declared.

    How Has This Been Tested?

    Created new Nuxt 3 plugin, with next code:

    import OpenLayersMap from 'vue3-openlayers'
    import 'vue3-openlayers/dist/vue3-openlayers.css'
    
    export default defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(OpenLayersMap)
    })
    

    Then created a component with example code:

    export default {
      setup() {
        const center = ref([34, 39.13])
        const projection = ref('EPSG:4326')
        const zoom = ref(6)
        const rotation = ref(0)
    
        const format = inject('ol-format');
    
        const geoJson = new format.GeoJSON();
       ...
    

    Without the types declarations, the type of format is unknown. With the declarations, the types properly resolved to the ol types.

    Types of Changes

    • [ ] Bugfix: Typescript types declarations
    Reviewed by R3VoLuT1OneR at 2022-05-22 19:37
  • 13. Adding a wms layer

    Hello,

    I have a question about adding a wms layer. I'm new to openlayers and vue composition api so bear with me.

    The scenario is the following, I have a map and a sidebar in which a user can click on a toggle button to see certain wms layers. When the toggle button is clicked I manage to add the WMS layer to the map object by using the addLayer() method, but after that I just can't get the layer to be rendered on the map.

    My map component looks like this,

    
    <template>
        <ol-map id="map" ref="map" :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true">
          <ol-view
            ref="view"
            :center="center"
            :rotation="rotation"
            :zoom="zoom"
            :projection="projection"
          />
          <ol-fullscreen-control />
          <ol-zoom-control />
    
          <ol-tile-layer title="Base map" type="base">
              <ol-source-osm />
          </ol-tile-layer>
    
          <ol-vector-layer title="Stations zones">
            <ol-source-vector :url="urlStationsZonesLayer" :format="formatGeojson">
            </ol-source-vector>
            <ol-style>
              <ol-style-fill color="#ffffff11"></ol-style-fill>
              <ol-style-stroke :color=color.blue :width="2" ></ol-style-stroke>
            </ol-style>
          </ol-vector-layer>
    
          <ol-vector-layer title="Stations">
            <ol-source-vector :url="urlStationsLayer" :format="formatGeojson">
            </ol-source-vector>
            <ol-style>
                <ol-style-circle radius="6">
                    <ol-style-fill color="#ffffff"></ol-style-fill>
                    <ol-style-stroke :color=color.blue :width="3" ></ol-style-stroke>
                </ol-style-circle>
            </ol-style>
          </ol-vector-layer>
    
          <ol-vector-layer title="TODO">
            <ol-source-vector :url="urlStationsLayer" :format="formatGeojson">
            </ol-source-vector>
            <ol-style>
                <ol-style-circle radius="2">
                    <ol-style-fill :color=color.blue></ol-style-fill>
                </ol-style-circle>
            </ol-style>
          </ol-vector-layer>
        </ol-map>
    </template>
    
    <script lang="ts">
    import { defineComponent, onMounted, ref } from 'vue';
    import { GeoJSON } from "ol/format";
    import { colors } from '../utils/_colors';
    import LayerSwitcher from 'ol-layerswitcher';
    import OpenLayersMap from 'vue3-openlayers';
    import 'ol-layerswitcher/dist/ol-layerswitcher.css';
    
    export default defineComponent({
      name: 'Map',
      setup: () => {
        //reactive data
        const map = ref(OpenLayersMap);
        const center = ref([485016.44, 6550857.95]);
        const zoom = ref(9);
        const rotation = ref(0);
    
        //data
        const projection = 'EPSG:3857';
        const urlStationsLayer = '/api/stations';
        const urlStationsZonesLayer = '/api/stations-zones';
        const formatGeojson = new GeoJSON();
        const color = colors;
    
        //lifecycle hooks
        onMounted(() => {
          map.value.map.addControl(new LayerSwitcher());
        })
    
        return {
          map,
          center,
          zoom,
          rotation,
          projection,
          urlStationsLayer,
          urlStationsZonesLayer,
          formatGeojson,
          color
        }
      }
    })
    </script>
    

    Currently my map object is passed as a prop to the sidebar component and the function to toggle the wms layer within the sidebar component is the following,

        const toggleWmsLayers = (k: number) => {
          const map = props.olmap.map.map;
          const layerToShow = props.wmsLayers.find(layer => layer.id === k)
    
          map.addLayer(new TileLayer({
            source: new TileWMS({
              url: layerToShow.url,
              params: {'LAYERS': layerToShow.layer, 'TILED': true},
              serverType: 'geoserver',
              transition: 1,
            })
          }))
        }
    

    If I console.log(map.getAllLayers()) I can see that the layer has been added, but I guess I'm missing an important step to actually see it on my map.

    Reviewed by LenaertsJ at 2022-05-19 15:08
  • 14. Is there an option to load locally stored files (e.g. from indexedb as strings) into a xyz source

    Hey there,

    is there an option to load locally stored files (e.g. from indexedb as strings) into a xyz source? As of now it's possible to provide a template url but I need an option to provide data directly depending on coordinates given.

    Something like:

    tileUrlOffline(coordinate: Array<string>) {
            return this.mapSettings[this.activeMap].tiles.find(
              (tile) =>
                tile.id ===
                `OSM_${coordinate[0]}_${coordinate[1]}_${-coordinate[2] - 1}`
            )
          },
    `
    Reviewed by AlexanderBrese at 2022-05-08 18:54
  • 15. [Support] Looking for accessing the `map` object in Typescript component

    Hello,

    I'm using your package in a project. We are also using Typescript and managed to get a map displayed correctly. I can interact in the map by adding the default provided controls like <ol-layerswitcher> etc, etc...

    I'm opening this issue because I would like to add a custom layer switcher (https://github.com/walkermatt/ol-layerswitcher) and I'm unable to access the map object and call the addControl method.

    Is there a way to access this object from the map component definition ?

    The whole project can be found here: https://gitlab.com/champs-libres/egeriec/egeriec-app/-/tree/main/frontend

    I'm a newcomer in the JS world, please bear with me please!

    Thanks in advance.

    Reviewed by drupol at 2022-04-19 08:53
  • 16. Can not use with webpack-cdn-plugin

    webpack config like this

           {
              name: 'vue3-openlayers',
              var: 'OpenLayersMap',
              path: 'dist/vue3-openlayers.umd.min.js',
            },
    
    

    Got error :

    Uncaught ReferenceError: OpenLayersMap is not defined
        at Object.vue3-openlayers (external var "OpenLayersMap":1:1)
        at __webpack_require__ (bootstrap:24:1)
        at fn (hot module replacement:61:1)
        at Module../src/main.js (.svg$:69:1)
        at __webpack_require__ (bootstrap:24:1)
        at startup:6:1
        at startup:6:1
    
    Reviewed by jiayp at 2022-04-15 01:22
  • 17. Is it possible to assign style to particular features inside an animated cluster layer?

    Is your feature request related to a problem? Please describe. I'm not sure. I tried to find an example where I can assign individual styles to geo-points regarding some attribute of those points (say you have a map with geo-points and they are color-coded depending if there's an issue in such place), but if they're inside an animated clusterlayer the layer style is defining the style, but the geo point doesn't seem to be able to get it individually.

    Describe the solution you'd like Doing it this way doesn't work: It will take the styles of the animation layer, but if I remove it and leave only the style in the feature, it won't take any style at all.

    <ol-animated-clusterlayer :animationDuration="500" :distance="40">
            <ol-source-vector ref="vectorsource">
              <ol-feature v-for="site in geopoints" :properties="{name: site.name}">
                <ol-geom-point
                    :coordinates="fromLonLat(site.coordinates, projection.value)"
                ></ol-geom-point>
                <ol-style v-if="site.id == 8">
                  <ol-style-circle :radius="radius">
                    <ol-style-fill :color="fillColor"></ol-style-fill>
                    <ol-style-stroke :color="strokeColor" :width="strokeWidth"></ol-style-stroke>
                  </ol-style-circle>
                </ol-style>
              </ol-feature>
            </ol-source-vector>
    
            <ol-style :overrideStyleFunction="overrideStyleFunction">
              <ol-style-stroke color="red" :width="2"></ol-style-stroke>
              <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>
    
              <ol-style-circle :radius="20">
                  <ol-style-stroke color="rgba(255,255,255,0.1)" :width="15" :lineDash="[]" lineCap="butt"></ol-style-stroke>
                  <ol-style-fill color="rgba(255,255,255,0.5)"></ol-style-fill>
              </ol-style-circle>
    
              <ol-style-text>
                  <ol-style-fill color="white"></ol-style-fill>
              </ol-style-text>
            </ol-style>
          </ol-animated-clusterlayer>
    

    Describe alternatives you've considered

    Additional context

    Reviewed by supermarcos at 2022-04-10 22:26
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