Creating clickable areas on a MapEl that trigger a callback with values

Hi all

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!

4 posts - 2 participants

Read full topic