Zoom on map after selection

forzacodm · April 2, 2024, 8:54am

Dear Community.
I would like to establish a link between two elements, a table element and a map. When I click on a row in the table, for example “Paris” as shown in the GIF attached, I want the map to zoom in on Paris and open a pop-up with the information about Paris.

cell selection and zoom on map GIF

yosiasz · April 2, 2024, 11:41am

Check this out

github.com/VolkovLabs/volkovlabs-dynamictext-panel

Dynamic Zooming using Leaflet mapping library

opened 06:05PM - 25 Mar 24 UTC

yosiasz

question

Dashboard variable `countries` ``` select 'China' as __text, '104.1954,35.86…17' 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 © <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; } ```

forzacodm · April 2, 2024, 1:01pm

Thank you for your reply. I’ll try and keep you in touch.