Making an interactive map in javascript

For the first assignment of the Couse Data Visualisation I opted to use a dataset provided by CBS (Centraal Bureau voor de Statistiek), a Dutch Goverment body that publishes statistical information about The Netherlands.

I chose to use “wijk- en buurtkaart 2009“, a dataset that holds information about geographic regions in the Netherlands as I am interrested in learing about geo spatial information visualisation.

The dataset describes the information on three levels namely: province, municipality and neighborhood. After my initial prototype I opted for the municipalities as my level of granularity.

The data came in the form of a ESRI shapefile with assosiated data in the form of a dbf file. As my target platform I chose HTML5 because of its potential for interactivity.

My first order of business was to find ways to extract data from the ESRI shapefile in such a way that I could keep a usefull identifier per shape that I extracted.

After some googling I found a Perl script (shptosvg) to convert shapefiles into SVG. This worked fine for the part that it did extract the shapes and wrote out a nice SVG. It did not work so well for my proposes in that it did not write out a suitable identifier to associate each shape with the corresponding data. After some reading up on perl I make it write out the the municipality code as an id tag with each polygon.

When trying to load the SVG in Inkscape I found out that my modification had an error. The is needs to be unique but my data had cases where multiple polygons belonged to one municipality. I solved this by adding some junk as padding to the identifier and then during the SVG stage stripping the junk off.

For drawing all my nice polygons I used the excellent Raphaël javascript library. This does what it promises, “it simplifies your work with vector graphics on the web”. Raphaël wants paths and not polygons. Luckily someone else on the interwebs had solved my problem for me.

Not that I had a nice map displaying I needed to be able to access my dataset in order to do somethign with the data and the map. For this I went back to the shptosvg Perl script and mangled that into spitting out all data fields for each shape into something that is so close to json that adding a head and tail made it into valid JSON.


Leave a Reply

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