How to add SVG map of UK with clickable counties

Dash Python
1

Hi
I am making to make an SVG map of the UK. The user will be able to click on individual counties and trigger an event. Is there any way to do this in dash? I really want to use python and dash for this project but I can’t seem to find a solution. Having an image won’t work as I want to be able to click on individual counties. Is there a not-too-complicated way to do it?
Thanks

2

You could use a mapbox plot or Dash Leaflet,

In both cases, you would need GeoJSON data for the relevant countries.

3

But with an SVG map of counties I could click and detect which county I had clicked on. How would I do that using mapbox or leaflet?

4

You would add a GeoJSON layer with each of the countries as a feature. You could then add a callback that is triggered when the feature (the country) is clicked.

5

Thanks for the replies. Could you point me in the direction of a useful tutorial?

6

You can see how to use click events in the GeoJSON example.

7

Ok. It seems I need some basic help getting started. I have a geojson file with all the UK Counties. How do I simply display this map on a Dash using python? If I can just get started I think I’ll learn fast, but I can’t figure out this really basic stuff. Please can someone help? Thanks.

8

Hi Emil

Apologies for my ignorance. I know you are an expert here and I was wondering if you would be able to post some simple code of how to display a map of the uk using dash-leaflet and how I could use my geojson file to overlay the counties?
Thanks.

9

If you replace the geojson in the example (us states) with your geojson with UK country, i guess the map should be more or less as you intend?

10

Screenshot 2020-09-29 at 10.04.55
Screenshot 2020-09-29 at 10.04.552852×780 202 KB

Hi Emil,
Thank you so much for offering suggestions. I’m really struggling with this stuff! I copied the geojson file exactly and then ran it from PyCharm but I get a different, completely non-interactive output! What am I doing wrong?

11

Hi Emil, would you have a really simple example of incorporating this stuff in a dash-leaflet app? I come from an
objective C and swift background and am really struggling!
Thanks

12

@Rocky - Also see our examples here: https://plotly.com/python/mapbox-county-choropleth/. These examples demonstrate how to use a custom geojson file. The counties should be accessible via click with the clickData property (https://dash.plotly.com/interactive-graphing)

1 Like
13

Hi Emil and chriddyp.

Thanks for your help so far. I realised my stupidity regarding the USA map example. I have now managed to get my UK counties showing on a map of the UK. Now I have another basic question: in the example on the dash-leaflet.herokuapp, when the user hovers over a county, the county name is shown underneath in a separate div. Is there a simple way to show the county name on the map inside the actual county?

Thanks