Questions tagged [vue.js]
Vue.js is an open-source JavaScript framework for building user interfaces. Questions about vue.js should contain a clear geospatial element, otherwise, they should be asked on StackOverflow.
23 questions
1
vote
0
answers
54
views
How to render marker for each features gotten from vector tile API in Mapbox GL JS?
I am using Mapbox GL JS in my vuetify project. I have a vector tile API. This API will return points for each tile (xyz). I use addSource and addLayer to render the features gotten from the vector ...
- 105
2
votes
2
answers
426
views
Prevent automatic zoom on location found event in Leaflet?
I have created the beginnings of a web app which will track locations in real time. It's all working, but every time the location updates, the zoom level refreshes to something that seems pre-defined. ...
- 123
1
vote
0
answers
168
views
Use external data for a Leaflet Choropleth map
I'm using Leaflet.js in a Vue project.
When I create the counties within a US State my GeoJSON looks like:
{
"type": "FeatureCollection",
"features": [
...
- 131
0
votes
1
answer
125
views
Fix problem of long URL when changing the dynamic style of a WMS?
I have created a Vue.js application that uses an OpenLayers map and I want to integrate a WMS layer that can dynamically change its style. My WMS layer displays the carbon emission of many entities of ...
- 1
2
votes
0
answers
1k
views
How to remove a marker from a Leaflet map?
I'm currently making a website where I'm using Leaflet 1.7.1 and Nominatim API and VueJS 3 and I'm trying to delete the marker after I search an address. When I search the address the first time ...
- 21
0
votes
0
answers
771
views
Openlayers 6 in Vue3 application not working properly
I have a vue3 app with a simple openlayers map, but anytime I try and add the source as a ref, and reference it in the onMounted hook, an error is generated in the console:
events.js?781a:63 Uncaught (...
- 23
0
votes
0
answers
733
views
Change map projection in Leaflet
I'm using leaflet in my current project. As a map sourse Leaflet consumes json-file with coordinates in WGS84 EPSG 4326.
<l-map
ref="myMap"
:zoom="zoom"
:...
- 1
1
vote
1
answer
299
views
Does the ol Layer 'visible' property affect if a source is retrieved via url?
I'm using openlayers 6 to try and display rail networks interactively on a map. This map lives in a vue application, and I want to load all required resources (json formatted vectors) from their ...
- 21
1
vote
1
answer
379
views
OpenLayers 6 custom control using Vuetify and a resizable div
I am trying to understand how to extend the Control class of a OpenLayers 6 map using Vuetify components inside. I have several ideas to implement such as a collapsable search bar or a simple ...
- 119
0
votes
1
answer
1k
views
Toggle dark mode on and off using on and un in OpenLayers
I made this codepen where I am setting a style to a layer on an event listener.
How can I programmatically toggle the styling on and off since my attempts to unlisten to the event for that layer have ...
- 119
2
votes
0
answers
4k
views
Leaflet/Vue 3 Issue Uncaught TypeError: Cannot read properties of null / this._map is null
I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla:
Uncaught TypeError: this._map is null Popup.js
and the error on chrome
...
0
votes
1
answer
805
views
GetFeatureInfo request from GeoServer responds with empty array
I am using the vue-leaflet and axios plugin in vue.js to make a GetFeatureInfo request to WMS tile layers served by Geoserver/Geowebcache for a certain point on the map, defined as marker.
I am ...
- 41
1
vote
1
answer
5k
views
How to add popup when clicking on layer using Vue3 and leaflet
I am building a web app using Vue 3 and Leaflet. I use the vue-leaflet plugin.
I have a background map and overlay layers, namely WMS tile layers served by Geoserver.
Now I want a popup to open at the ...
- 41
1
vote
1
answer
897
views
Dynamically change Leaflet PopUp Background on updating PopUp content
I have a function that sets new content to the Popup and opens it whenever the function receives data from the socket.
layer[i].getPopup().setContent(content)
layer[i].getPopup().options.autoClose = ...
2
votes
1
answer
2k
views
Splitting polygon with turf.rectangleGrid in vue.js Leaflet map
The turf.rectangleGrid function from turf.js (https://www.npmjs.com/package/@turf/rectangle-grid) makes rectangles inside a bbox, but I want them in a polygon.
The options take in a mask: Polygon not ...
1
vote
2
answers
2k
views
Unexpected token < in JSON at position 0
According to Google, this error seems to happen quite often, and now it happens to me. I read lots of the posts I found, but unfortunately my error remains...
I took a countries.json (I think from the ...
- 169
0
votes
0
answers
1k
views
How do I add OpenLayers “overlays” using Vue.js
I can't figure out how to implement an OpenLayers "overlay" in my Vue.js app. There doesn't seem to be much guidance online about how to do this. The Vue component below gives me the map ...
- 21
1
vote
0
answers
164
views
OpenLayers: How to re-add a feature that draws line segments of a tracked route?
My app records tracks (e.g. a bike route). There is a start and a stop button, which start and stop the recording of such a track. After a recording has been stopped, the user can start a new ...
- 169
0
votes
0
answers
477
views
SVG tile interactivity with vue leaflet
I am not being able to extract or interact with the svg tiles data on mouse hover/click using leaflet.
I have a tile server that serves svg tiles eg:https://sometileserver.com/roads/{z}/{x}/{y}.svg, ...
0
votes
1
answer
758
views
How to check for OL events in Vue?
I would like to observe things like maps.on('moveend') to update zoom level or center values. Currently I have a "construct" made up of computed params and watcher functions like this:
...
- 169
0
votes
1
answer
548
views
in a Vue/OL app, show a circle at location after zooming in
In my Vue app there is a button that, when clicked, zooms to the current location. The zoom is animated, and once the animation is finished, a circle should be added to the current location, which is ...
- 169
1
vote
1
answer
231
views
Style WM(T)S layers from a QGIS server into a Cesium imagery component
I have a QGIS server docker image which is serving some aerial images (raster data) on one virtual machine.
I have an other virtual machine which holds a Cesium cartographic web application in Vue.js.
...
- 10.9k
1
vote
1
answer
1k
views
VueJs Leaflet Get Color Function
I am using VueLeaflet to create a map like in this example: https://vue2-leaflet.netlify.com/examples/geo-json.html
I like to add some colors to the polygons like in this example:
https://leafletjs....
- 390