Creating an image map with clickable areas

Dash Python
1

I am trying to create an image map with clickable areas with the below given code on an image file dashboard.gif.
I am not sure about my syntax but I get an error when trying to run the code:
AttributeError: ‘module’ object has no attribute ‘Map’

import dash
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
	html.Img(
		html.Map([
			html.Area(target='', alt='gerar', title='gerar', href='1', coords='427,136,319,89', shape='rect'),
			html.Area(target='', alt='otimizar', title='otimizar', href='2', coords='142,170,34,123', shape='rect'),
			html.Area(target='', alt='assegurar', title='assegurar', href='3', coords='283,170,173,120', shape='rect')],
			name='image-map'
		),
		src='images/dashboard.gif', 
		usemap='#image-map'
	)
])

if __name__ == '__main__':
    app.run_server()

To me it seems that the Map attribute is not implemented for the html components. If so, any ideas how I could tackle this problem?

2

Hello, the element you should use here is html.MapEl (don’t hesitate to do html. + TAB in Ipython/jupyter to discover the names, that’s how I just found out the name!). Here is a working example below

import dash
import dash_html_components as html

app = dash.Dash()

filename = 'https://bestpostarchive.com/wp-content/uploads/2019/02/driving-in-the-streets-of-san-fr-800x445.jpg'


app.layout = html.Div([ 
    html.MapEl([
        html.Area(target='', alt='otimizar', title='otimizar', href='https://www.google.com', coords='1,1,500,500', shape='rect'),
            ],
                        name='map'),
        html.Img(src=filename, useMap='#map')
])  

if __name__ == '__main__':
    app.run_server(debug=True)
3

Thank you very much Emanuelle, I appreciate it. It got my code running. I will look into jupyter. Have not installed it yet.