I found this link
that shows how to make a clickable SVG map using HTML-CSS. Since Grafana only provides a specific type of map (the world map) for data analysis, I thought I could add this HTML-CSS code in the ‘text’ panel to display the SVG map.
Can anyone help me with the execution of the same? Is it even possible?
I have tried adding some code:
For another reference: Chris Lee | Copywriting and Content Strategy
Apache ECharts panel supports SVG maps out of the box.
Here is the example:
https://echarts.volkovlabs.io/d/X1mkMIFVz/geo-map?orgId=1&editPanel=8
Thank you for the link! I found the Apache Echarts plugin really informative. It is perfectly suitable for the world (and USA) maps. However, I’m unable to use the map of a specific Indian state instead of the already available maps.
So instead, I just added the SVG map code of the Indian state in the ‘Text’ panel(as HTML code) and added CSS.
I am hoping to apply relevant JS in the script tag. Hope that will work similarly to how it’s working in the Apache echarts Geo/Map type.
@saymeowmeow SVG Map can be loaded from Static, like in the example, or any other data source. GeoJSON can be loaded from external resources or just simple add file to the ./maps folder inside the plugin.
If Text won’t work for you, you can take a look at the Dynamic Text panel, which supports HTML template, JavaScript Code and CSS styles.
Thank you for this insight! Can I also add a geojson file to the maps folder?
Also, to make things complicated I am required to not add static data over the SVG. I have to display data returned from a PostgreSQL query in the tooltip that appears on mouse hover
For your firsr question 
@saymeowmeow We explained in the documentation and YouTube tutorials how to work with dynamic data from Data Sources: Data Sources | Volkov Labs
