I am trying to write JS and HTML code. When I run it in the JS runtime it works for me but when I bring the code to the panel (dynamic text panel) it fails to display. What could be the problem and what is the solution?
Welcome @mirib
Please copy the js code not a picture of the jscode
Its very small Nd we won’t need to retype the whole thing on our side
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
#map {
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Wait for the page to load completely and only then start running the code document.addEventListener('DOMContentLoaded', function() {
// Creating a variable of type "map" and defining the main view of the map
var map = L.map('map').setView([51.505, -0.09], 13);
// Adding the map layer to the map itself
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
var geojson ={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "AOIs": "bbb", "daily": "33"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 33.5, 32.0 ], [ 33.5, 29.0 ], [ 36.0, 29.0 ], [ 36.0, 27.5 ], [ 33.5, 27.5 ], [ 32.5, 27.5 ], [ 29.0, 27.5 ], [ 29.0, 32.0 ], [ 33.5, 32.0 ] ] ] } },
{ "type": "Feature", "properties": { "AOIs": "aaa", "daily": "23"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 34.5, 32.5 ], [ 36.0, 32.5 ], [ 36.0, 29.0 ], [ 33.5, 29.0 ], [ 33.5, 32.0 ], [ 33.5, 32.5 ], [ 34.5, 32.5 ] ] ] } }
]
}
;
var myStyle = {
color: 'black',
weight: 1
};
// Adding the GEOJSON layer to the map with customized configuration and behaviorvar geojsonLayer = L.geoJSON(geojson, {
style: function(feature) {
var dailyImagesValue = feature.properties.daily;
var fillColor = calculateFillColor(dailyImagesValue);
var style = Object.assign({}, myStyle);
style.fillColor = fillColor;
style.color = fillColor;
return style;
},
onEachFeature: function(feature, layer) {
// Adding a click event to each entity in GEOJSON
layer.on('click', function() {
geojsonLayer.eachLayer(function(l) {
if (l !== layer) {
var currentFillColor = l.options.fillColor;
var originalFillColor = calculateFillColor(l.feature.properties.daily);
l.setStyle({color: originalFillColor});
}
});
var currentFillColor = layer.options.fillColor;
if (currentFillColor === 'black') {
layer.setStyle({color: calculateFillColor(layer.feature.properties.daily)});
} else {
layer.setStyle({color: 'black'});
}
});
// Added a tooltip to every entity in GEOJSON
var tooltipContent = feature.properties.AOIs+": " + feature.properties.daily;
layer.bindTooltip(tooltipContent, {sticky: true});
}
}).addTo(map);
//A function that returns the corresponding color according to a certain value
function calculateFillColor(value) {
if (value < 10) {
return 'orange';
} else if (value < 20) {
return 'brown';
} else if (value < 30) {
return 'blue';
} else if (value < 40) {
return 'pink';
} else if (value > 50) {
return 'yellow';
} else if (value < 60) {
return 'green';
} else if (value < 80) {
return 'black';
} else {
return 'red';
}
}
});
</script>
</body>
</html>
Besides, even when I write only this HTML:
World MapWorld Map
He doesn't show me here and elsewhere yes.Toda
Please read the docu pn external libraries
Also why not use geomap or orchestra cities plugin for this? Because of lack of styling?
Shalom
1 Like
No, because I had to add click events which, as much as I tried, I couldn’t create. I need to create click events on the polygon so that when a polygon is clicked its frame is painted black and also a certain variable is updated to the NAME value of the polygon. I did not succeed in geomap and orchestra cities plugin.
1 Like
1 Like
Well done @yosiasz! We will add an example in the documentation.
Dynamic Text plugin follows security guidelines to load external libraries. You can load them only if sanitized mode is disabled.
1 Like
@mikhailvolkov , @yosiasz
I searched a lot until I found this issue
I’m working on exactly this and ran into the same problem
I want to add javascript code and I don’t have
external resources option in the panel
I can’t understand where Sanitize should be disabled
I thought in Advanced Settings
But I don’t have that either
can you help me
1 Like
@miriamwolloch Sanitize should be disabled in the Grafana settings using configuration file or environment variables:
@mikhailvolkov
Thank you!
It helped me a lot!
Now I will try to work with it.
If I get stuck I’ll post here again
1 Like
First thing, I want to thank you from the bottom of my heart, you helped me a lot!! Second thing, I want to move forward with my project. I encountered another problem: I want to access through the JS the variables of the dashboard I created in Grafana. How do you do that? Is it also possible to update the variable?
Always check the doco
1 Like
Hello!
I enjoyed seeing that you uploaded my code to the Gafna documentation!
I was also happy to see that you are using my code to direct other users who are having trouble with this.
I wanted to ask if you could write it in my name as well so I can present it in job interviews?
2 Likes
@mirib I have not problems with that.
Is it regarding Leaflet External JavaScript and CSS | Volkov Labs?
What should I write mirib?
Yes thank you!
I would love for you to write this on my GitHub username: @BlinderMiri.
1 Like