I am trying to create a map that can be clicked on, which in turn generates a bunch of statistics based on the part of the map that was clicked. For example, if zone_1 is clicked, the statistics for that zone are displayed in a DataTable somewhere else on the same page. For now, a simple Label that shows the last location clicked will suffice.
Here is the reduced layout:
html.Div([ html.Label( id="current_location", children="" ) ]), html.Div([ html.MapEl( children=[ html.Area(id='zone_1', target='', shape="poly", coords="0,0,210,210,421,0,0,0", alt="zone_1"), html.Area(id='zone_2', target='', shape="poly", coords="210,210,421,0,421,421,210,421,210,210", alt="zone_2"), html.Area(id='zone_3', target='', shape="poly", coords="0,0,210,210,210,421,0,421,0,0", alt="zone3"), ], name='map'), html.Img(src="assets/map_basic.png", useMap='#map') ]),
I can make the different clickable areas click through to separate pages fine, which implies the map is set up correctly, but I want to stay on the same page and pass a value to a callback to run some statistics on it.
What is the best way to approach this?
Furthermore, would there be a simple way to then scale this to be used with 100+ clickable areas?
Any help would be appreciated, cheers!