GeoExamples: kartograph tutorial II: going interactive

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:

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.

This function will be called at the beginning to show the first position by default:

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.

4 comments:

AnonymousDecember 13, 2012 at 8:13 PM
Thanks for this example. It helps a lot to be able to see all the code when examining a new package.
sai charan singhSeptember 24, 2013 at 3:11 PM
This comment has been removed by the author.
Sairin LoteNovember 27, 2013 at 5:33 PM
Bravo! I had no previous experience with JavaScript and the example of how to insert a map in html were vague! Your example really helped me!
S LopMarch 11, 2015 at 8:07 PM
Thank you for the example. If I use a css file to apply styles based on a layer attributes, what do I change?
#map svg path.world ----> ???

Thursday, November 29, 2012

kartograph tutorial II: going interactive

Viewing the map in a web page

CSS Styling

Adding tooltips

Setting the colors in the map

4 comments: