We wanted to create a template for an interactive map of city districts in Berlin. The aim of this post is to help people to accomplish the same task individually at home. If you still cannot do it, ask us..
First, we searched for an SVG-map, which would have clear borders and colors. We opened the map in Adobe Illustrator for further editing and saved it in Illustrator file format. We moved all top level districts to their own layers (cut => paste in place), removed all shadows from the borders (select => Same – Stroke width) and combined the paths in a layer (select all => compound path). We compared the city districts in our initial data and districts in the map. They were not 100% identical, so we added couple of layers and divided some districts to two or three smaller districts. We named the original layer as text, moved it to the top and removed high level city district names. After that we saved the file in SVG format.
And here it is:
The next step is to combine the template with the data and visualize information in it.