Day #3: Berlin districts as an Interactive map

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.

Second, we wanted to modify the SVG file with JavaScript. There is a JavaScript library called Raphael which simplifies work with vector graphics on the web. We downloaded and included raphael.js to the index.html page. There is also a nice converter which converts SVG to OPF to Raphael. We copied the code to home.js file.

Finally, there was a JavaScript file for editing. The converter skipped all special characters and the code which was generated was not as clean as possible. We cleaned the file in order to make it easier to handle and tried out different border widths, colors etc. It is easy to change for example the color of an element with JavaScript just by searching correct ID-elements from the file.

And here it is:

The next step is to combine the template with the data and visualize information in it.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>