9
29 oct 2008

Introduction


Une carte n'est qu'un des nombreux moyens existants (graphique, tableaux....) permettant l'affichage et la mise en forme de données. Pourtant la plupart des librairies cartographiques actuelles se résument à un affichage "simple" de données géographiques. Or la plus value d'une donnée est justement sa mise la possibilité de la faire parler, de dégager une tendance, bref de l'utiliser...

C'est pourquoi après avoir consulté le blog de Bjørn Sandvik et notamment son article sur le couplage d'OpenLayers et google Chart je me suis lancé le projet d'arriver à un résultat similaire mais en utilisant uniquement des librairies OpenSource : OpenLayers et Artichow.

Logique du script


La logique du script se base sur trois éléments majeurs :

  • Un serveur WFS (ou tout autre format permettant l'affichage d'objet vecteur)
  • Une librairie permettant de générer des graphiques (dans notre cas Artichow)
  • La propriété externalGraphic de l'objet Style associé à ma couche vecteur

Concrétement, lors de l'appel de ma couche WFS j'ai spécifié dans mon protocole d'utiliser une image dont l'URL pointe vers mon script générant à la demande une image (grâce à Artichow). Ainsi pour chaque nouvel objet vecteur ajouté, un graphique est généré.

Mise en application


  • Côté client : la partie JavaScript (openLayers)

Comme souligné précédemment, c'est une propriété particulière de l'objet style,externalGraphic , qui nous permet d'afficher une image. La portion de script ci-dessous présente succintement la logique utilisée :


function featureStyle() {
styleCircle = new OpenLayers.Style(
{
fillOpacity: 0.7,
pointRadius: "${radius}",
externalGraphic: "${getChartURL}"
},{
context: {
radius: function(feature) {
var minV = 28196;
var maxV = 1336317;
var minR = 2;
var maxR = 30;
surf = Math.round(minR+( (maxR-minR)*( (feature.attributes.POP_TOTAL-minV)/(maxV-minV) )));
surf = surf* Math.pow(2,map.getZoom()-1)
console.log(surf);
return surf;
},
getChartURL: function(feature) {
var charturl = './php_graph/graphCircle.php?value='+feature.attributes.POP_TOTAL/2000+'&surf='+styleCircle.context.radius(feature)*2+'&urban='+feature.attributes.URBAN+'&rural='+feature.attributes.RURAL;
return charturl;
} // End of function getChartURL
} // End of obj context
}
); // End of obj OpenLayers.Style
styleMap = new OpenLayers.StyleMap({'default':styleCircle, 'select': {fillOpacity: 1}});
return styleMap;
}

Concrétement, ma propriété externalGraphic pointe vers la fonction getChartURL. Dans celle-ci j'ai défini une variable charturl dans laquelle est spécifiée le chemin d'accès à mon script générant l'image ainsi que les informations dont j'ai besoin pour le graphique.

  • Côté serveur : la partie PHP (Artichow)

Pour chaque objet vecteur dessiné sur la carte, mon navigateur fait appel à un script php qui retourne ensuite le graphique désiré sous forme d'image. Le script utilisé est le suivant :

getValueUrban = $_GET["urban"];
getValueRural = $_GET["rural"];
require_once "../lib/php/Artichow/Pie.class.php";
//NewGraph Obj
$graph = new Graph(300, 300);

//Value
$values = array(getValueUrban,getValueRural);
$aThemeColor = array(
new Color(255,0,0,80),
new Color(0,0,255,80)
);

//Type of graph
$plot = new Pie($values,$aThemeColor);
$plot->set3D(20);
$plot->explode(array(0 => 15));
$plot->legend->hide(TRUE);
$plot->label->hide(TRUE);
$plot->setStartAngle(90);

//Background Transparent
$plot->setBackgroundColor(new Color(255,255,255));
$color_gd = imagecolorallocate($graph->getDriver()->resource, 255,255,255);
imagecolortransparent($graph->getDriver()->resource, $color_gd);
//Border
$border = new Border();
$graph->add($plot);
$graph->border->hide(true);
return $graph->draw();

Dans mes variables globales GET je récupère les informations envoyées par mon navigateur que j'inclut ensuite au graphique final.

Exemple de carte


Les données utilisées proviennent de : geodata

Capture.png

graph_bar.png

A propos de l'auteur: 
Arnaud Vandecasteele

Fervent défenseur de l'Open Source, Arnaud s'est spécialisé dans le développement d'application cartographiques web. OpenLayers, PostGIS ou encore Django sont autant d'outils qu'il manipule au quotidien.
S'il n'est pas en face de son ordinateur, vous le retrouverez un GPS à la main en train de cartographier pour OpenStreetMap, de faire voler son drone ou sur un tatami !

Commentaires

Merci pour ce site et ces territoriaux très clairs et agréables à lire.
Juste une petite indication : Les dernières versions de MapServeur gère l'insertion de graphique, ce qui permet d'alléger le client dans le cas d'un trop grand nombre de graphique.

Bonjour,

Es ce que vous avez le fichier zip de projet. J'ai un probleme à le realiser, je voudrai bien que vous me le envoyer.

Merci.

C'est à dire me fichier zip?
Tous les fichiers nécessaires sont disponibles sur le site.

Arnaud

j'ai une base de données (postgreSql)en eau, qui contient les prelèvement en eau par secteur(domestique, industrie, agriculture) par pays. l'objectif est d'afficher des graphiques sur une carte.Es ce que de preferece d'ajouter librairie Artichow pour creer les graphiques à chaque fois ou bien les créer à l'aide d'un et les mettre dans un fichier KML (je l'ai jamais utilisé)?

Par ce que je trouve les calculs que vous avez fait difficile et j'arrive pas à les adapter à mes propres valeurs de la BD.

MErci .

Bonjour,

Vos exemples ( http://ks356007.kimsufi.com/arno/geotribu/applications/tutoriaux/tuto_wm... et http://ks356007.kimsufi.com/arno/geotribu/applications/tutoriaux/tuto_wm...) ont un problème avec l'installation de PHP, l'antialiasing n'est pas prise en compte dans Artichow.

Deux possibilités : changer les paramétrages PHP
http://artichow.org/forum/read.php?2,3138,3140

ou changer des lignes dans Artichow
http://artichow.org/forum/read.php?2,3482,3487#msg-3487

ThomasG

Je vous remercie pour la remontée d'information.
Le problème est maintenant résolu !

Arnaud

Bonjour,
Cette fonctionnalité m'intéresse beaucoup. Est-il possible de télécharger la librairie Artichow ?
Merci

Bonjour,
en effet Artichow semble avoir disparu des écrans.
J'ai trouvé une copie par ici : http://cspfj.svn.sourceforge.net/viewvc/cspfj/trunk/concrete/sqlresult_b...
A voir ce que ça donne.

Je comprends pas pourquoi utiliser artichow puisque geoserveur propose un service interner de charting
http://geoserver.geo-solutions.it/edu/en/pretty_maps/charting.html