Add geojson Mapping with Dynamic Text & Leaflet example

[yosiasz]

@mikhail-vl

here it is

Download leaflet from https://leafletjs.com/download.html This demo is using 1.9.4

extract content and copy to the following grafana folder /public/3rd-party-libraries/leaflet

Then config DT external references

Content

<div id="map"></div>

javascript after content ready

//This data is coming from SQL Server query.
var geojson = JSON.parse(context.data[0][0].data);

//Addis Abeba centered
var map = L.map('map').setView([9.024857, 38.737607], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  maxZoom: 18,
}).addTo(map);

//if you want to use inline data
var geojsonv1 = {
  "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
};

var geojsonLayer = L.geoJSON(geojson).addTo(map);

Styling

#map {
  height: 480px;
  display: flex;
  flex-direction: row;
}