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:
This second example has a continuation post: Kartograph tutorial III: Symbols
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.
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
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>
This renders the SVG without any styling or interaction. But is the basic way to start any Kartograph.js project.
<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"/>
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:
function setColors(value){
map.getLayer('municipalities').style('fill', function(data) {
var positions = new Array();
positions[0] = parseInt(data.ciu);
positions[1] = parseInt(data.psc);
positions[2] = parseInt(data.erc);
positions[3] = parseInt(data.pp);
positions[4] = parseInt(data.icv);
positions[5] = parseInt(data.cs);
positions.sort(function(a,b) { return b-a; });
var bgColor;
if (positions[value-1] == parseInt(data.ciu)){
bgColor = "#99edff";
} else if (positions[value-1] == parseInt(data.psc)){
bgColor = "#ff9999";
} else if (positions[value-1] == parseInt(data.erc)){
bgColor = "#EDE61A";
} else if (positions[value-1] == parseInt(data.pp)){
bgColor = "#005aff";
} else if (positions[value-1] == parseInt(data.icv)){
bgColor = "#74ff74";
} else if (positions[value-1] == parseInt(data.cs)){
bgColor = "#ff7b00";
}
return bgColor;
});
}
First, we set the style to the layer with the method style. the first argument is the property to change, fill 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:- value is the position to show (from 1 to 5)
- To sort the positions in the array in descending order, use the sort() method, with a function to order the elements as numbers. See why here.
- Then, check which party corresponds to the number of votes at the desired position, and set the color.
setColors(1);
and a select element is created to select the position and change the colors when the option is changed:
<select onChange="changePos(this)"> <option value="1">1st position</option> <option value="2">2nd position</option> <option value="3">3rd position</option> <option value="4">4th position</option> <option value="5">5th position</option> </select>
An auxiliar function is created to get the option value:
function changePos(sel){
var value = sel.options[sel.selectedIndex].value;
setColors(value);
}
That's all!
The best is to download the code or look at the working web.
Of course, some styling is still needed to do a deliverable web page, but the main idea is already done.
The best is to download the code or look at the working web.
Of course, some styling is still needed to do a deliverable web page, but the main idea is already done.
