A governmental agency has a WMS layer and I want to display it on my leaflet canvas.
I add this code:
var wmslayer = L.tileLayer.wms('http://localhost:8080/geoserver/depo/wms',{
layers:'nep'
}).addTo(mymap);
This works fine. The layer is displayed. Now, the layer comes with two styles: "brightbackground" and "darkbackground". When I open the layer in QGIS I can select and add any of the styled layer. But when I add styles : 'darkbackground' to the code, like this:
var wmslayer = L.tileLayer.wms('http://localhost:8080/geoserver/depo/wms',{
layers:'nep',
styles:'darkbackground'
}).addTo(mymap);
I get an error saying:
L.TileLayer.NoGap.js:224 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
If I comment out the plugin "NoGap" I don't get any errors, but also not getting any wms-layer, unless I remove styles : 'darkbackground'. Then layer returns.
Any ideas how to use the style that comes with the WMS-layer? Is there anything I can do in Geoserver? Or can I serve it from any other place? Or are there any plugin that might help?
I'm out of ideas.
Related
When I call L.geoJSON(oporto) with https://3mapslab.github.io/Leaflet.streetlabels/demo/oporto.js I see the FeatureCollection on the map as https://jsfiddle.net/aejmdon7/ shows.
When I call L.geoJson(county) with https://www.terrafrost.com/leaflet/091-2.js I see the Polygon on the map as https://jsfiddle.net/aejmdon7/2/ shows. BUT when I try to wrap the Polygon type into a FeatureCollection it doesn't work. https://www.terrafrost.com/leaflet/091.js is my attempt to wrap it in a FeatureCollection and https://jsfiddle.net/aejmdon7/3/ shows it not not showing anything on the map.
Here's the diff between the two of them (diff 091.js 091-2.js):
1d0
< {"type":"FeatureCollection","name":"Counties","features":{"type":"Feature","properties":{"name":"Comal","show_on_map":true},"geometry":
3d1
< }}
So why does 091-2.js display a Polygon whereas 091.js doesn't? Clearly Leaflet supports FeatureCollections because the first JS Fiddle link makes use of them. So the fact that 091-2.js is wrapped in a FeatureCollections tag doesn't seem like that'd be the source of the problem so what is? Why is https://jsfiddle.net/aejmdon7/3/ not showing anything?
The problem is that the leaflet map inside the vue3 App loads perfectly and looks great. Also, when you click on a location with two icons in the same position, they open perfectly, but when you click on the same place again, the icons disappear and the "spider" remains visible (see picture).
spider remains
The methods in the Vue3 App are:
methods:{
setupMarkers(){
this.markers.clearLayers();
this.cursesData.forEach(cursa =>this.ficaMarkers(cursa));
this.map.addLayer(this.markers);
},
setupLeafletMap(){
this.map=L.map("mapContainer").setView(this.center,6);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution:'OpenStreetMap',
}).addTo(this.map);
this.markers= L.markerClusterGroup({
//spiderfyOnMaxZoom: true,
});
},
ficaMarkers(cursa){
this.markers.addLayer(L.marker([cursa.coordenades[0],cursa.coordenades[1]],{title:cursa.nom})
.bindPopup(cursa.distancies)
)
},
},
If someone could help me, I would be very grateful.
Thanks.
It is a similar issue as in Uncaught TypeError: this._map is null (Vue.js 3, Leaflet) :
What seems to be the culprit is the proxying of this.map by Vue, which seems to interfere with Leaflet events (un)binding. It looks like Vue 3 now automatically performs deep proxying, whereas Vue 2 was shallow.
In your case, the same thing happens for this.markers (which is the Leaflet MarkerClusterGroup).
A solution consists in "unwrapping" / un-proxying the map and the mcg whenever you use them, e.g. with Vue3's toRaw:
toRaw(this.map).addLayer(toRaw(this.markers));
Then we retrieve the normal MCG behaviour, i.e. if you click on the cluster while it is already spiderfied, nothing happens (whereas initially the Markers were collapsing, but the spider legs were remaining indefinitely)
Fixed CodeSandbox: https://codesandbox.io/s/markers-hide-spiders-stay-forked-l2ruqh?file=/src/App.vue
I wish to make a dropdown list to replace the default tool for layer selection.
Using this example included in from the GIT repository, and adjust for jsfiddle, I get the following error:
"<a class='gotoLine' href='#77:31'>77:31</a> TypeError: L.control.selectLayers is not a function"
using L.control.layers works fine, however, not selectLayers.
//var control = L.control.layers(baseMaps, overlayMaps)
var control = L.control.selectLayers(baseMaps, overlayMaps)
control.addTo(map);
The appropriate javascript files all seem to be in place, so.. what is missing here?
Fiddle link:
You added the wrong link of the libraries.
You have to use the raw link instead of the Github link
I try to use leaflet labels and on several pages it is successful. I wanted to use the same approach to display labels on another page and it responded with an obscure technical message which I did not understand:
Uncaught TypeError: Cannot read property 'call' of undefined
at e.whenReady (leaflet.js:6)
at e.addLayer (leaflet.js:6)
at e.showLabel (leaflet.label-src.js:538)
at e.showLabel (leaflet.label-src.js:287)
at e._onMarkerAdd (leaflet.label-src.js:383)
at e.fire (leaflet.js:5)
at e._layerAdd (leaflet.js:6)
at e.whenReady (leaflet.js:6)
at e.addLayer (leaflet.js:6)
at e.onAdd (leaflet.js:7)
After a lot of researching I found out that leaflet.label is deprecated for Leaflet 1.0.3, which makes sense, since we are using older leaflet version in other pages where the labels appear correctly, but on the newer leaflet versions it crashes the map. The docs say that I should use bindTooltip instead of bindLabel, but I do not know how. I have tried to call it with some content on a marker but it did not appear on the map and I did not find it in the generated structure.
So, my question is as follows: How can I use labels with Leaflet 1.0.3, which will be bound to a marker and will adjust in case of translation/zoom?
The Tooltip is indeed now directly part of Leaflet main library.
Note that it appears only on mouseover by default, but you can use the permanent option to have it remain always visible.
marker.bindTooltip("Some tooltip content", {
permanent: true
});
Example: http://playground-leaflet.rhcloud.com/tiqo/1/edit?html,output
I am following markercluster examples from Mapbox library, but can't solve my problem. If you guys take a look at my working example here, you will notice this line of code:
L.mapbox.featureLayer(markerLayer).on('ready', function(e) {
What I initally thought was I could put markers inside of markercluster featureLayer, but I guess it was a wrong approach. Any solutions? Thanks.
Example following here
The mapbox example you refer to makes an AJAX call to retrieve the GeoJSON data, hence it needs to attach an on "ready" listener.
In your case your GeoJSON data is defined in your scripts, so the "ready" event will not be triggered (besides, you should use L.mapbox.featureLayer with your GeoJSON object directly, not a Feature Layer).
You can simply use the eachLayer method to iterate through all created markers within the Feature Layer, and add them into your Marker Cluster Group.
var clusterGroup = new L.MarkerClusterGroup();
var markerLayer = L.mapbox.featureLayer(markers).eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
Updated Plunker: http://plnkr.co/edit/fN6xYcn1Lg532eLe39IS?p=preview