In my
last post I showed how to create a cool SVG map using Kartograph, to be opened and edited with an Inkscape-like program.
The elections were celebrated and
CiU won again, but with less votes. I could either update the map or play with the same data. The fun with Kartograph is using the generated SVG to create interactive web pages using Kartograph.js, so this is what I'll do.
The web page will be able to:
- Generate the map not only for the first position, but also for the others
- Query every municipality to know which were the results there.
As usual, the code is
available to download, and at
the working web page too.
This second example has a continuation post:
Kartograph tutorial III: Symbols
Changes to the SVG
In the other post, we used the SVG only to draw, but now we need to add data to it, so we can query it.
So change the municipalities layer at the file elections.json from:
"municipalities":{
"src": "./mun_out.shp"
}
to:
"municipalities":{
"src": "./mun_out.shp",
"attributes": {"winner": "Winner","ciu": "CiU","psc":"PSC-PSOE","erc":"ERC","pp":"PP","icv":"ICV-EUiA","cs":"C's","name":"Name"}
}
This will add the attributes set in the shapefile geometries to the SVG geometries.
To generate the SVG again, just type:
kartograph -o elections.svg elections.json
Viewing the map in a web page
Even though is quite simple, I haven't found any really basic working example, so here it is:
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script src="raphael-min.js"></script>
<script src="kartograph.min.js"></script>
<script language="JavaScript">
function loadMap(){
var map = Kartograph.map('#map', 600, 0);
map.loadMap('elections.svg', function() {
map.addLayer('background');
map.addLayer('world');
map.addLayer('depth');
map.addLayer('trees');
map.addLayer('crops');
map.addLayer('municipalities');
}, { padding: -30 })
}
</script>
</head>
<body onLoad="loadMap()">
<div id="map"></div>
</body>
</html>
- Include jquery, raphael and kartograph
- The map must be created when the page loads, so the function loadMap() is called at the body tag , using the onLoad event.
- Kartograph.map('#map', 600, 0) creates the map at the div tag with the id map. X size will be 600 px, and the aspect ratio will be respected, because the y size is 0. When an other y is set, strange things happen with the png borders.
- loadMap draws the map from the file elections.svg. Then, executes a function. In this case, the function loads all the layers one by one, using the method addLayer(LayerNameInTheSVG)
- padding: -30 removes the strange lines from the vectors in the borders by padding the image. Try without using it to understand what happens.
This renders the SVG without any styling or interaction. But is the basic way to start any Kartograph.js project.
CSS Styling
There are two ways to add styles to the map. We will use both, to show them.
The first one, is to use a separate css file, as in
the last post.
Adding the css file is quite tricky, because of the IExplorer compatibility. Now, the loadMap call would look like:
map.loadMap('elections.svg', function() {
map.loadCSS('elections.css', function() {
map.addLayer('world');
...
});
})
So, the only thing that the
loadMap method does, is calling the
loadCss method, which will do all the stuff.
The css file is also different than the one used before. To style the layer world, the css section will be:
#map svg path.world {
stroke: #fff;
fill: #cccccf;
fill-opacity: .7;
}
Tip1: Be careful, Chrome doesn't reload your css even though you use ctrl-F5!
Tip2: Do not separate the CSS elements with comas (look at the example). With the python example, this didn't matter.
The other way is using the style method from the layer, as we will see in the final part of the post.
Adding tooltips
If we want the web page to show a tooltip with the result when the mouse is over a municipality, just add a tooltip to the desired layer (municipalities, in this case). The function in loadCSS will be now:
map.loadCSS('elections.css', function() {
...
map.addLayer('municipalities');
$.fn.qtip.defaults.style.classes = 'qtip-light';
map.getLayer('municipalities').tooltips(function(data) {
return [data.name, 'CiU: <b>' + data.ciu + '</b><br/>PSC-PSOE: <b>'+ data.psc + '</b><br/>ERC: <b>' + data.erc+'</b><br/>PP: <b>'+data.pp+'</b><br/>ICV-EUA: <b>'+data.icv+'</b><br/>C\'s: <b>'+data.cs+'</b>'];
});
});
A function is called as a parameter to the tooltips method of the layer municipalities. This function returns what we want to be shown in the tooltip. The data parameter has all the attributes in the SVG geometries. In this case, a list with the results is shown.
The other line in the code just sets the style of the tooltip.
The official documentation has more information about the options.
Also, the tooltips styles and javascript must be included in the header, adding:
<script src="jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.qtip.css"/>
Setting the colors in the map
Finally, the map will be colored. By default, depending on the winner party, but with a combo box to choose the position.
So first, a function is created to sort the results in every municipality, and set the style with a different color for every party:
. the first argument is the property to change,
in this case. The second parameter is the value to set. In this case, it will depend of the function that chooses the position. Things to look at:
This function will be called at the beginning to show the first position by default:
