LeafLet.js not working with dynamicText Panel

[samant-rags]

getting L is underfined similar to this issue. The resolution in the issue was to sequence the loading of script files. Not sure how can we do the same in dynamicText Panel

https://stackoverflow.com/questions/44479562/l-is-not-defined-error-with-leaflet

[asimonok]

@samant-rags external scripts are loaded in the passed order but they don't work in edit panel mode. You have to open dashboard first to see loaded scripts and then open the edit panel mode. Also the lib requires rendered dom element so the initialization code should be added in After Render Code when it's ready - https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/pull/231

[samant-rags]

@samant-rags external scripts are loaded in the passed order but they don't work in edit panel mode. You have to open dashboard first to see loaded scripts and then open the edit panel mode. Also the lib requires rendered dom element so the initialization code should be added in After Render Code when it's ready - #231

Thanks a lot @asimonok @mikhail-vl
this works now with v4.2 with the new feature of Js code after content ready feature !!

[mikhail-vl]

@samant-rags Thank you for confirming!

[samant-rags]

Seems like dynamicText Panel on Grafana 10.3 the External Scripts feature is missing ?

[samant-rags]

Apologies guess i forgot to do this ...

[mikhail-vl]

Yes, disabling sanitizing is important and required from security considerations.

[yosiasz]

@samant-rags you have this working? Can you share how you did it please? I am still getting that error in latest. thanks!

[samant-rags]

hi @yosiasz yes this worked , hope you have disabled by setting below property in conf/custom.ini or default.ini
disable_sanitize_html = true

[yosiasz]

Are you able to share js code?

[samant-rags]

Sure *Scripts URL link: @.***/dist/leaflet.js

CSS :

.leaflet-container { height: 400px; width: 600px; max-width: 100%; max-height: 100%; }

Content HTML :

JS : After Content Ready

const map = L.map('map').setView([51.505, -0.09], 13);

const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);

const marker = L.marker([51.5, -0.09]).addTo(map) .bindPopup('Hello world!
I am a popup.').openPopup();

const circle = L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(map).bindPopup('I am a circle.');

const polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map).bindPopup('I am a polygon.');

const popup = L.popup() .setLatLng([51.513, -0.09]) .setContent('I am a standalone popup.') .openOn(map);

function onMapClick(e) { popup .setLatLng(e.latlng) .setContent(You clicked the map at ${e.latlng.toString()}) .openOn(map); }

map.on('click', onMapClick);

---

On Wed, Feb 21, 2024 at 10:29 PM ዮስያስ @.***> wrote:

Are you able to share js code?

— Reply to this email directly, view it on GitHub https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/issues/223#issuecomment-1957306732, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIDX3RXQKASV3HEYTEAYX3YUYRXTAVCNFSM6AAAAAA6KVATL2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJXGMYDMNZTGI . You are receiving this because you were mentioned.Message ID: @.***>

[yosiasz]

Thanks so much @samant-rags

[yosiasz]

@samant-rags and which version of leaflet solved the issue with L

Did you do something like this?

//const L = window.L
var L = window.L;

[samant-rags]

Just used 1.9.4

On Thu, Feb 22, 2024, 23:18 ዮስያስ @.***> wrote:

@samant-rags https://github.com/samant-rags and which version of leaflet solved the issue with L

Did you do something like this?

//const L = window.L var L = window.L;

— Reply to this email directly, view it on GitHub https://github.com/VolkovLabs/volkovlabs-dynamictext-panel/issues/223#issuecomment-1959957624, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIDX3VATNEA7ZVMABBWA43YU6AFHAVCNFSM6AAAAAA6KVATL2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJZHE2TONRSGQ . You are receiving this because you were mentioned.Message ID: @.***>

[mikhail-vl]

@samant-rags @yosiasz Thank you for providing examples. We included it in the documentation: https://volkovlabs.io/plugins/volkovlabs-dynamictext-panel/external/#leafletjs-interactive-maps

[yosiasz]

Yaay!! Not seeing it there yet. probably coming once build pipeline finishes

[mikhail-vl]

Yaay!! Not seeing it there yet. probably coming once build pipeline finishes

It's deployed, try to refresh to load updated content.