Wednesday, February 12, 2014

Map of Belgian municipalities and JSFiddle


In previous posts in showed the work I did on maps of The Netherlands. After that I thought it would be nice to see if I could do the same for Belgium. A benefit of looking at Belgian municipality borders don't change as much as the Dutch ones do.
As ever Wikipedia was a good source for a SVG version of the map I was looking for.

Map of Belgium with all the municipalities

There were only two problems. In the most recent maps of The Netherlands every municipality was a path and had it's name in the Id tag. You've guessed it, the Belgian map didn't have this. All the borders between two areas were a separate line. One municipality could be defined by maybe 5 lines but not one single area. So I needed some way turning all these lines into closed paths and putting the right name in the right path.

Inkscape SVG editing

I must add that Belgium has a very complex political system and maybe that is why they have over 400 municipalities.
To go from the border lines to paths I used a simple bucket fill in Inkscape. I think you lose some resolution in this process but for what I intend to do it's just important to get all the areas in the right place.
I found out that Inkscape has an Object Properties window (shift+ctrl+o if you're wondering) were you can change i.e. the Id and Title properties of an object in your SVG file. I had to use several .jpg maps which had the names of the municipalities on them and overlaid them with the empty SVG map.
This process cost me a couple of hours but I'm pleased with the result.

JSFiddle


It's possible to put an SVG directly into a blog. If you go to the HMTL mode you can just paste the SVG code in your post and it should show in the final version. But if it's too big it doesn't seem to work. So to show the map I made I had to try something else that didn't involve making my own website. I chose JSFiddle, a nice website to allows to create an account and to try out HTML, Javascript, etc and to share it with other developers.
The map, as is, can be found here. In this version of the map every municipality is one path, where the Id name and the Title are filled in. So if you hover with your mouse over an area you can see it's name (Title).

Future Work


If you would want to color every path individually to make a choropleth you still need to do some work and I intend to do that.
One thing I would like to add to the map is the different regions that exist, the governments, the districts, etc.
I also need some data to visualize. The Belgian government has some sites where they share data, but for now I didn't find them that insightful.
When I've made some examples I hope to post them soon.










No comments:

Post a Comment