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
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 use Echarts and found that it generates massive amounts of the following warnings in firefox
Expected color but found ‘undefined’.........from DOM
Expected color but found ‘null’...................from DOM
It does this when I move my mouse over the bar graphs that I use. Especially when I have tooltip:{}
enabled and defined. The same messages are also generated in the example page of Echarts.
Should I be concerned about these warnings and can I do something about it.
Thanks Oscar Goos
I am using angular chart in one application which basically makes use of chart js. The version of chart js I am using at the moment is the 2.4.0, with angular chart version 1.1.1 (the current lastest one).
So, when I insert few series (for example 4) everything works fine. The problem is when I have cases that handle with 10 series at a time. The event of clicking the serie in order to hide it block somehow and this error is displayed in console:
Uncaught TypeError: Cannot read property 'clearRect' of null
at Object.helpers.clear (Chart.js:5880)
at Chart.Controller.clear (Chart.js:4072)
at Chart.Controller.draw (Chart.js:4365)
at ChartElement.animation.render (Chart.js:4345)
at Object.startDigest (Chart.js:3672)
at Chart.js:3645
To try to help you I moved to the line the error is occuring in Chart.js file:
// -- Canvas methods
helpers.clear = function(chart) {
chart.ctx.clearRect(0, 0, chart.width, chart.height);
};
Have anyone already got this problem? Does Chart js doesn't handle to many series?
Thanks
This was happening to me when I ran out of colors to use for my series. Once I fixed that the hiding and showing of series worked fine, plus no more errors.
I'm using Leaflet (v 0.7.7). It expects setting L_PREFER_CANVAS as a script tag, which is global. I wish to create 2 maps on same page, one with L_PREFER_CANVAS flag ON and once with OFF. How can I do that ?
1) I've tried setting window.L_PREFER_CANVAS before the map creation.
2) I've tried creating my layers with extended classes like this
var MyCircle = L.Circle.extend({
statics: {
CANVAS: true,
SVG: false
}
});
then using 'new MyCircle' instead of 'L.circle'.
Neither of the two methods have the desired effect, even though the map is rendered successfully
I'm looking into leaflet code but i'm not very comfortable with its inner workings yet, due to lack of js sorcery know-how i believe
Edit: A thing that partly works is cloning the entire leaflet source under a new object (M.* instead of L.), and keep my desired flag enabled for it. But its clumsy and breaks with plugins which add their functionality to L. classes. Thereby requiring more duplication to fix, which i'm trying to avoid
Would recommend you look into migrating onto Leaflet 1.0, where preferCanvas is now a traditional option inside the map constructor...Among many other significant improvements.
http://leafletjs.com/reference-1.0.0.html#map-prefercanvas