Dynamic Zooming using Leaflet mapping library

[yosiasz]

Dashboard variable countries

select 'China' as __text, '104.1954,35.8617' as __value union
select 'Ethiopia', '40.4897,9.1450' union
select 'Sardina', '9.283447, 40.078072'

external js

https://unpkg.com/leaflet@1.9.4/dist/leaflet.js

external css

https://unpkg.com/leaflet@1.9.4/dist/leaflet.css

Content

<div id="weathermap"></div>

After Content javascript

function mapit(lat, lon) {
  document.getElementById('weathermap').innerHTML = ""
  document.getElementById('weathermap').innerHTML = "<div id='map'></div>";
  var map = new L.Map('map');
  map.setView(new L.LatLng(lat, lon), 4);
  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);
}

var countries= context.grafana.replaceVariables("${countries:value}")
var lon = Number(countries.split(",")[0])
var lat = Number(countries.split(",")[1])

mapit(lat, lon)

css

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

[mikhail-vl]

@vitPinchuk Could you please review and update Leaflet.js section in documentation.

[mikhail-vl]

Resolved in VolkovLabs/volkovlabs.io#684