Image Map for interactive neighborhood map

this exemple is pretty old (2013) but it demonstrates what can be done in SVG and interactive map ... it's a basis, but it is a starting point

https://www.puce-et-media.com/wp-content/uploads/developper-avec-lopen-web-platform/schema-SVG.svg

click on the legend, bottom right corner

Hi @defaultb6gpvtgomtuq,

Do not use Photoshop to generate code for you.  It never works well in production.

Old fashioned client-side images maps won't work in responsive layouts.  The hotspots invariably fall out of register when the image is resized which creates massive usability problems and frustration.  So that's no solution.

Best advice is to manually code with SVG images.  Or avoid interactive maps if you possibly can.

For this proof of concept, I used a few math-based SVG shapes layered over a responsive, raster background image.  Each SVG shape links out to another URL.

You can see the code and a working example on JS Fiddle below.  Resize your browser viewport to test it.

https://jsfiddle.net/NancyO/6k3v4ge1/21/

Hopefully this will give you a starting point to work with.  Post back if you have any questions.

without any hesitation, go to SVG.
maybe some tuto could help you search for interactive svg map, if not there is plenty of library .. search for interactive svg library

personnaly I use illustrator , once your map is drawn, you can easly add, id and script from the interactive palet. are you used to illustrator ?

Ideally, this type of thing would be done as an interactive SVG.

There are a fair number of tutorials online for creating them. Many use the interactive map as their example. One I cam across in a quick search: https://www.petercollingridge.co.uk/tutorials/svg/interactive/interactive-map/

You could use Illustrator to make the map, then DW to handcode the interactivity.