#1 Tue 21 August 2012 11:34
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Solution pour application webmapping
Bonjour tout le monde,
Je suis chargé de mettre en place une application webmapping pour diffusion des données géostatistiques à l'interêt de l'institut national de la statistique, la base de données de l'institut est énorme! (centaines de fichiers excel).
J'ai réussi à faire une cartographie interactive et à afficher des graphiques "highcharts" tout en utilisant l'api Google Maps et la solution Google docs : "FusionTablesLayer" comme source de données, j'ai cru que j'ai réussi enfin mais mon encadreur m'a surpris par son insatisfaction à mon travail, mais en réalité il a raison parce que la solution que j'ai utilisé n'est plus pratique pour une base de données de telle taille (problème de sécurité, d'accès, d'édition et de mise à jour continue..), et il a donc souligné la nécessité de l'utilisation d'un SGBD et d'avoir les couches de découpages administratifs dans des tables à coté et indépendamment des tables de données statistiques et de faire le lien entre les deux au moment de l'éxecution.
Ce qui est clair: pas d'utilisation de "FusionTablesLayer" de google, pas de format ".geojson".., quelle est donc la solution alternative ??
J'ai vraiment besoin des idées et des suggestions et merci pour votre aide
Hors ligne
#2 Tue 21 August 2012 12:48
- nicolas33
- Participant occasionnel
- Lieu: Bordeaux
- Date d'inscription: 26 Sep 2006
- Messages: 16
Re: Solution pour application webmapping
Bonjour,
Pour le SGBD, tu pourrais utiliser PostgreSQL et son extension spatiale PostGis pour stocker tes données et faire ensuite des "vues" pour lier tes tables via une clé (code insee par exemple).
Nicolas
Hors ligne
#3 Tue 21 August 2012 13:10
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Merci Nicolas pour ta réponse,
j'ai déjà utiliser postgis dans mon premier essai et j'ai des codes géographiques uniques pour chaque niveau de découpages, ceux sont les ID que j'utilise, j'ai réussi avant à afficher des couches postgis avec openlayers en sous format vecteur, mais réellement je ne sais pas comment faire le lien entre une couche et une table de statistique CSV par exemple, y a-t-il un exemple ?
Et après est ce que je continuer avec la même solution highcharts sans problème ?
Hors ligne
#4 Tue 21 August 2012 13:49
- nicolas33
- Participant occasionnel
- Lieu: Bordeaux
- Date d'inscription: 26 Sep 2006
- Messages: 16
Re: Solution pour application webmapping
t'est-t-il possible t'intégrer tes csv dans postgres ou tu dois les garder sous le format csv?? si tu as l'autorisation de les passer sous forme de table, utilise la commande sql "COPY FROM" de postgres (copy nom_table from "chemin/ficihier.csv" , attention aux entetes, je le te laisse regarder sur le net pour la synthaxe et parametres possibles) . Si tu as pu passer tes csv dans des tables sous postgres, apres il te reste à faire la jointure en créant une vue, exemple "CREATE VIEW nom_vue AS SELECT * FROM nom_table_csv LEFT JOIN nom_table_geo on id_commun_table1 = id_commun_table2 " .
Je pense que tu peux utiliser highcharts, fait attention aux droits de licences (j'ai vu que la version gratuite n'était pas autorisé dans tous les cadres de projet)
Nicolas
Hors ligne
#5 Tue 21 August 2012 13:56
- Delu
- Participant actif
- Lieu: Briançon
- Date d'inscription: 29 Apr 2008
- Messages: 76
Re: Solution pour application webmapping
comme te le dit Nicolas, tu devrais utiliser postgis pour le webmapping et pour mettre à jour postgis en temps réel à partir de fichiers CSV, regarde du coté de Talend Open studio. C'est un peu touffu mais cet ETL opensource te permet de faire beaucoup choses.
TU dessines graphiquement un job qui va exécuter une tache de transfert de données avec un format en entrée et un format en sortie (par ex csv --> postgis). Entre les deux tu peux mettre un Tmap qui va transformer/mapper tes champs d'entrée vers les champs de sortie. Ensuite tu exportes le job. Tu obtiens une archives zip contenant un .bat ou un .sh que tu pourras lancer à volonter pour mettre à jour tes tables postgis.
Pour la sécurité si tu ne dois pas utiliser le geojson : ??? Il ne te reste plus qu'a faire travailler mapserver pour qu'il te retourne des images qui ne contiennent pas les informations vecteur.
Hors ligne
#6 Tue 21 August 2012 14:31
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Merci bien Nicolas et Delu,
Pour l'import des fichiers csv dans postgis je n'ai aucun problème parce que j'ai réussi à faire ça avant en utilisant la commande COPY, j'ai aussi utiliser le protocole WFS pour afficher une couhe vecteur par couplage mapserver/postgis.., mais ce que je ne comprend pas maintenant : quel est le format de données que je vais afficher avec openlayers ? une couche vecteur jointe à une table csv ? est ce que highcharts va travailler avec le même principe? avec l'api google maps et les données "FusionTablesLayer" s'était simple j'utilise le sélectionneur de couche pour afficher ou cacher une donnée, et maintenant ? je suis perdu là , dois- je créer un formulaire extjs ?
désolé d'avoir poser trop de questions mais je me trouve face à la solution difficile
Hors ligne
#7 Tue 21 August 2012 14:57
- nicolas33
- Participant occasionnel
- Lieu: Bordeaux
- Date d'inscription: 26 Sep 2006
- Messages: 16
Re: Solution pour application webmapping
en sortie mapserver renvoie une image de type png ou autre selon la configuration de ton flux wms.
pour tes graphiques tu les affichais avec ta carto ou dans un bloc à part?
Nicolas
Hors ligne
#8 Tue 21 August 2012 15:07
- René-Luc D'Hont
- Participant assidu
- Date d'inscription: 7 Nov 2006
- Messages: 328
- Site web
Re: Solution pour application webmapping
Achref_geo,
En fait ce que demande ton maître de stage est de recréer en interne le même mécanisme que celui que tu as découvert avec les outils Google. Tout d'abord la raison pour laquelle ta maquette ne peux être mis en production est que l'organisme pour lequel tu travailles ne souhaite pas transférer toutes ces données à Google, qui obtiendrait ainsi gratuitement une grande quantité d'information.
Donc si tu souhaites faire simple :
* BDD Postgresql/PostGIS
* import des données SIG et de tous les CSV dans la BDD
* création d'une vue par type de données avec un ST_AsGeoJSON
* Un script serveur PHP, Python, Perl ou Ruby qui renvois la vue au format GeoJSON grâce à ST_AsGeoJSON pour la géométrie
* Dans OpenLayers tu appelles une vue via ton script serveur au format GeoJSON
Et tu te retrouveras avec le même mécanisme que Google, bien sûr pour ton ST_AsGeoJSON tu choisi la projection de sortie.
Enfin tu peux faire un autre script qui renvois les données au format JSON à partir des vues pour alimenter HighCharts.
Rien d'extraordinaire, juste un peu de code.
Hors ligne
#9 Tue 21 August 2012 15:47
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Merci à vous on s'approche,
à Nicolas : je crois que le format png de mapserver ne sera pas interrogeable non ? les graphiques pour le moment je les donne juste une position (top/left) dans la carte (je vous joint une imprime)
à René-Luc D'Hont : tu ne m'as pas parlé de la jointure des tables shp et csv ? aussi je n'ai pas compris qu'est ce que ça veut dire création d'une vue par type de données ? pour le script php j'avait quelque difficulté dans sa configuration j'espère que je réussi cette fois (je dois).
Hors ligne
#10 Tue 21 August 2012 15:59
- René-Luc D'Hont
- Participant assidu
- Date d'inscription: 7 Nov 2006
- Messages: 328
- Site web
Re: Solution pour application webmapping
Achref_geo,
Une vue est une requête SQL, ici tes jointures, stocké et nommé dans la base de données. Tu pourras interagir avec une vue comme une simple table.
Donc je te conseil d'importer tes fichiers CSV, de créer tes jointures, de les enregistrer sous forme de vue, et d'exploiter tes vues comme des tables géographiques ou non.
Hors ligne
#11 Tue 21 August 2012 16:16
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bon je comprend maintenant, merci beaucoup
si je rencontre des problèmes, je viendrais ici poser des questions
Hors ligne
#12 Wed 22 August 2012 09:51
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bonjour à tous
J'ai importé des données shp et csv dans ma base postgis, et j'ai réussi à faire une jointure entre une couche ponctuelle et une table csv en suivant cette vidéo (pour qui s'intéresse) : http://www.youtube.com/watch?v=WFbOBsZozvY , j'ai remplacé "SELECT table.the_geom " par "SELECT
st_asgeojson(the_geom)" et j'ai obtenu comme résultat une nouvelle table dont la géométrie est sous format geojson , enfin j'ai enregistré cette table sous forme de vue.
Maintenant je veux savoir est ce que je peut afficher cette couche avec google maps sans avoir besoin d’intégrer openlayers ? y a-t-il une méthode simple ? je veux utiliser seulement l'api google maps parce que j'ai remarqué que l'utilisation de HighChart ou Google Chart avec google maps et plus simple qu'avec openlayers
Hors ligne
#13 Wed 22 August 2012 10:58
- René-Luc D'Hont
- Participant assidu
- Date d'inscription: 7 Nov 2006
- Messages: 328
- Site web
Re: Solution pour application webmapping
Bonjour Achref_geo,
Google Maps préfère le KML plutôt que le GeoJSON, mais en utilisant Google Maps tu fournis toujours tes données à Google ;-) le KML sera lu par les serveurs de Google afin de l'afficher. D'ailleurs es-tu sûr de ne pas enfreindre les Conditions Générales d'Utilisations gratuites ?
Hors ligne
#14 Wed 22 August 2012 13:44
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bonjour René-Luc D'Hont et merci pour ton aide,
Bon pour le moment je vais laisser tomber le problème de sécurité, l'essentiel que je te travail sur un SGBD (on peut pas tout faire dans la période du stage), je dois donc créer des vues postgis avec le format kml, c'est simple, mais comment l'afficher sur google maps ?
je n'ai pas compris ta dernière question à propos des conditions d'utilisations gratuites, ??
Dernière modification par Achref_geo (Thu 23 August 2012 10:56)
Hors ligne
#15 Thu 23 August 2012 10:58
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bonjour à tous,
J'ai maintenant une vue postgis enregistré sous format kml, comment je peut l'afficher avec google maps sans avoir recourt à openlayers ?? je n'ai pas trouvé la solution dans les docs
Merci pour votre aide
Hors ligne
#16 Thu 23 August 2012 12:02
- Delu
- Participant actif
- Lieu: Briançon
- Date d'inscription: 29 Apr 2008
- Messages: 76
Re: Solution pour application webmapping
Je ne connais pas google maps mais je pense que tu dois pouvoir faire une requête AJAX vers une URL interne. Cette URL doit pointer vers un fichier php qui va te construire et te retourner le fichier KML.
Pour avoir la structure du KML (proche de l'XML), tu devrais trouver un exemple sur le net. Sers toi de firebug pour contrôler que la structure de ce KML soit correcte.
ici https://developers.google.com/maps/docu … /reference tu as une description de la function "GDownloadUrl" qui correspond peut-être à ce que tu cherches.
Sinon, il y a très longtemps, j'ai fait un petit bout de code en google maps pour récupérer des infos dans une base postgis suite au placement d'un pointeur. Voici une function en xmlHttpRequest, du javascript de base.
Tu passes l'URL comme paramètre : strURL et les paramètres éventuels dans le qstr
voici la function
Code:
function getTerritoire(strURL,qstr) { var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { var root = self.xmlHttpReq.responseXML.documentElement; var commune = root.getElementsByTagName('val1')[0].getAttribute('valeur'); var statut_zone = root.getElementsByTagName('val2')[0].getAttribute('valeur'); var secteur = root.getElementsByTagName('val5')[0].getAttribute('valeur'); var valx = root.getElementsByTagName('val3')[0].getAttribute('valeur'); var valy = root.getElementsByTagName('val4')[0].getAttribute('valeur'); updatePage(commune,secteur,statut_zone,valx,valy); } } self.xmlHttpReq.send(qstr); }
voici un exemple d'usage avec comme paramètres le xy du marqueur placé par l'utilisateur
Code:
var qstr = 'x=' + escape(x) + '&y=' + escape(y); getTerritoire("tonurl.php", qstr);
coté php mon script me retourne un xml
Code:
header('Content-type: text/xml'); echo '<?xml version="1.0" encoding="UTF-8"?>' . '<root>' . '<val1 valeur="'.$id_commune.'" />' . '<val2 valeur="'.$id_statut_zone.'" />' . '<val3 valeur="'.$xwgs84.'" />' . '<val4 valeur="'.$ywgs84.'" />' . '<val5 valeur="'.$id_sect.'" />' . '</root>';
Tu peux t'inspirer de ça pour ton besoin sachant qu'il y a certainement une différence entre retourner du xml comme ici et du KML comme tu as besoin.
SINON
regarde ici https://developers.google.com/maps/docu … #KMLLayers
Ton script php peux construire un fichier kml avec la function fopen. Ce qui te permet d'écrire ce fichier localement sur ton serveur (dans un espace accessible par le web) ensuite tu utilises
Code:
var ctaLayer = new google.maps.KmlLayer('http://tonadresse.xx/tonappli/tonfichier.kml'); ctaLayer.setMap(map);
Hors ligne
#17 Thu 23 August 2012 12:40
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Merci Delu pour cette réponse détaillée,
Ce que je comprend, comme dans le cas de "FusionTablesLayer", Google doit toujours avoir un accès aux données !
je vais essayé avec la deuxième solution elle me parait la plus abordable, dans le cas de "FusionTablesLayer" j'ai tout simplement importé mes fichiers dans un compte Google, mais cette fois comment je peut mettre mon fichier dans un espace accessible par le web ?
Hors ligne
#18 Thu 23 August 2012 13:32
- René-Luc D'Hont
- Participant assidu
- Date d'inscription: 7 Nov 2006
- Messages: 328
- Site web
Re: Solution pour application webmapping
Archref_geo,
Regarde le code de cette exemple OpenLayers :
http://openlayers.org/dev/examples/sund … cator.html
Change la valeur de l'url de la couche sundials
Code:
var sundials = new OpenLayers.Layer.Vector("KML", { projection: map.displayProjection, strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "kml/sundials.kml", format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true }) }) });
Lors de la méthode zoomToExtent change les coordonnées par celles de la France en longitude latitude et le travail est fini
Code:
map.zoomToExtent( new OpenLayers.Bounds( 68.774414, 11.381836, 123.662109, 34.628906 ).transform(map.displayProjection, map.projection) );
Donc rien de très compliquer, tu peux utiliser OpenLayers!
Hors ligne
#19 Thu 23 August 2012 13:51
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bonjour René-Luc D'Hont,
C'est un bon exemple, et je sais qu'avec openlayers l'affichage sera plus simple et facile, mais après l'emploi de la bibliothèque HighCharts avec OpenLayers va me poser des probèmes c'est sûr
J'insiste à utiliser Google Maps seulement parce c'est avec Google Maps que j'ai réussi déjà à générer des graphiques HighCharts (comme dans l'imprime écran attachée avant) et ça était très simple , par contre je n'ai pas trouvé aucun exemple d'utilisation de Highcharts avec openlayers, et la cartographie interactive et les graphes de statistiques sont presque les produits finales de mon application
Hors ligne
#20 Thu 23 August 2012 14:23
- René-Luc D'Hont
- Participant assidu
- Date d'inscription: 7 Nov 2006
- Messages: 328
- Site web
Re: Solution pour application webmapping
Bon OKI après avoir regarder ton imprécran je vois ce que tu veux faire et ce n'est pas forcément très compliqué non plus!
Chaque élément de ton KML possède un titre et une description, que tu construit avec ton PHP. Sachant que ta description peut-être du HTML, HTML qui peut contenir du code JavaScript qui sera exécuter lors de l'affichage de la popup. L'affichage de la popup est une fonctionnalité par défaut de l'exemple OpenLayers :
http://openlayers.org/dev/examples/sund … cator.html
Maintenant ce qui serait intéressant c'est de savoir comment avec Google tu générais tes graphic HighCharts ? Comment récupérais-tu les données de l'élément cliqué pour créer le graphic HighCharts ?
Peux-tu donner un peu de code ?
Hors ligne
#21 Thu 23 August 2012 14:47
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Oui bien sûr, maintenant je suis au travail et toute est sur mon ordinateur local , encore une heure je rentre chez moi et je poste ( je n'apprend pas le code par coeur, il est un peut long )
Merci René-Luc D'Hont
Hors ligne
#22 Thu 23 August 2012 15:28
- Delu
- Participant actif
- Lieu: Briançon
- Date d'inscription: 29 Apr 2008
- Messages: 76
Re: Solution pour application webmapping
mais cette fois comment je peut mettre mon fichier dans un espace accessible par le web ?
il te suffit de mettre ton kml dans un répertoire de l'appli. Tu as le répertoire racine de publication web par exemple www ou htdocs.
tu mets tes KML ici /htdocs/monappli/kml/monkml.kml
Tu donnes ensuite cette URL relative (kml/monkml.kml) ou absolue (http://mondomaine/monappli/kml/monkml.kml) à google maps qui devrait le lire.
Donc tu mets un kml qui fonctionne pour tester : /htdocs/monappli/kml/kmlok.kml
ensuite tu fais créer un kml par le script php dans le même répertoire : /htdocs/monappli/kml/kmlphp.kml
et tu vois si ça fonctionne. Si ça fonctionne avec kmlok.kml mais pas avec kmlphp.kml c'est que le script php est à revoir.
Hors ligne
#23 Thu 23 August 2012 19:23
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Salut,
Pour René-Luc D'Hont :
La couche utilisée dans cet exemple est une couche kml que je l'ai importé dans mon compte "google docs", et après google la transforme en une table CSV avec une colonne "geometry" format kml , voici le lien direct: https://www.google.com/fusiontables/Dat … uKioaVMpnA
vous pouver cliquer sur Visualise/Map et vous allez voir la couche ponctuelle affichée sous forme de markeur google maps, pour chaque table importée dans la compte, google attribut un lien qu'on l'utilise après dans notre code pour faire l'appel à la couche kml comme il le montre le code ci-dessous:
Code:
var dece = new google.maps.FusionTablesLayer({ map: map, heatmap: { enabled: false }, query: { select: "col8", from: "1cWEom28Eoldg4XMnCAdME6Yguv1sEuKioaVMpnA", where: "" }, suppressInfoWindows: true });
maintenant que la couche est affichée, le code qui permet de générer un graphique à chaque fois qu'on clique sur un point est:
Code:
$(document).ready(function(){ //chart options optionsChart = { chart: { renderTo: 'hc-ouput', defaultSeriesType: 'column', marginBottom: 35 }, title: { text: 'deces par genre et gouvernorat de declaration', style: { color: '#666666', }, align : 'left', fontSize: '5px', }, subtitle: { style: { color: '#000000', }, y: 37, align: 'left', width: 5, }, xAxis: { categories: [ 'male', 'femelle', 'total', ] }, yAxis: { min: 150, max: 9500, endOnTick : true, title: { text: ' deces ', style: { color: '#999999', } } }, legend: { itemStyle: {}, layout: 'vertical', backgroundColor: '#FFFFFF', align: 'left', verticalAlign: 'top', x: 100, y: 70, floating: true, shadow: true }, tooltip: { style: {}, formatter: function() { return '<b>'+ this.point.name +'</b><br/>'+ 'deces '+ this.x +': '+ this.y ; } }, plotOptions: { column: { pointPadding: 0.025, borderWidth: 0 } }, credits: { style: { color: '#666666', }, text: 'SOURCE: Institut National de la Statistique', href: 'http://www.ins.nat.tn/', position: { align: 'right', y: -3 } }, series: [{ data: [] }] }; //click listener google.maps.event.addListener(dece, 'click', function(q) { //writes chart updateChart(q); }); }); //writes chart function updateChart(q){ //assign data to chart variables var name = q.row['Gouvernora'].value var a = q.row['Male'].value var b = q.row['Femelle'].value var c = q.row['Totale'].value //write chart series var data = [ [name, a], [name, b], [name, c], ]; // Create the chart if it doesn't exist if(!chart) chart = new Highcharts.Chart(optionsChart); // Set new data to the chart chart.series[0].setData(data) }
Puisque vous avez un accès au fichier de données vous pouvez regarder bien la table pour mieux comprendre le code
Pour Delu:
J'ai télécharger le code de cet exemple de google : https://google-developers.appspot.com/m … /layer-kml je l'ai exécuté et il fonctionne sans problème, j'ai mis un de mes propres fichiers kml dans mon répertoire "htdocs/MonTP/Appli_stage" et j'ai changé ensuite l'url du code par mon url "http://localhost/MonTP/Appli_stage/kml_test.kml" la couche ne s'affiche plus, pour s' assurer que ce n'est pas lié à mon fichier kml j'ai téléchargé le fichier utilisé dans l'exemple en tapant l'url : http://gmaps-samples.googlecode.com/svn … ml/cta.kml et je l'ai stocké dans mon répertoire d'application ... et en lui faisant l'appel le même résultat est obtenue : rien ne s'affiche, je crois que Google n'accède pas à mon url : "http://localhost/MonTP/Appli_stage/.." non?
Hors ligne
#24 Fri 24 August 2012 07:44
- freesnowpetrel
- Participant assidu
- Lieu: Pretoria, Afrique du Sud
- Date d'inscription: 1 Mar 2007
- Messages: 222
Re: Solution pour application webmapping
Exact Achref_geo !
Google ne peux accéder à ton kml en local, tu dois le mettre sur un serveur accessible via le web.
Rodolphe
Hors ligne
#25 Fri 24 August 2012 09:24
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bonjour freesnowpetrel,
Comment mettre le fichier kml sur un serveur accessible via le web alors qu'il est stocké dans une base postgis ? et je dois travailler avec un SGBD
Hors ligne
#26 Fri 24 August 2012 09:59
- Delu
- Participant actif
- Lieu: Briançon
- Date d'inscription: 29 Apr 2008
- Messages: 76
Re: Solution pour application webmapping
Bonjour freesnowpetrel,
Comment mettre le fichier kml sur un serveur accessible via le web alors qu'il est stocké dans une base postgis ? et je dois travailler avec un SGBD
c'est php qui va créer le fichier kml en lisant le contenu de la base de données. C'est php qui va écrire le fichier avec la function fopen.
Pour le moment tu développes en local mais une fois que ton application sera chez un hébergeur, le fichier kml sera accessible.
En attendant, pour tester, tu dois mettre ton kml sur un serveur accessible et fournir ce lien dans ton code à gmaps
Attention, si ton application a vocation à rester sur un serveur local non accessible via le web, ce sera plus compliquer d'utiliser gmaps
Hors ligne
#27 Fri 24 August 2012 10:25
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bonjour Delu,
Je comprend et j'attend encore René-Luc D'Hont pour voir s'il y a une solution avec openlayers
Hors ligne
#28 Mon 27 August 2012 13:05
- René-Luc D'Hont
- Participant assidu
- Date d'inscription: 7 Nov 2006
- Messages: 328
- Site web
Re: Solution pour application webmapping
Bonjour Achref_geo,
Tout d'abord, il faut savoir qu'il est possible, en plus du nom et de la description d'un objet géographique, de passer les différents attributs de ceux-ci dans un KML. Cela se fait à l'aide de la balise ExtandedData :
* https://developers.google.com/kml/docum … tendeddata
Ensuite le parser KML d'OpenLayers permet de récupérer ces données que l'on retrouvera dans attributes :
* http://dev.openlayers.org/releases/Open … ML-js.html
Maintenant si nous reprennons ton code et celui de l'exemple OpenLayers :
* http://openlayers.org/dev/examples/sundials.html
Il faut tout d'abord modifier ta méthode Updateharts :
Code:
function updateChart(f){ //assign data to chart variables var name = f.attributes['Gouvernora']; var a = f.attributes['Male']; var b = f.attributes['Femelle']; var c = f.attributes['Totale']; //write chart series var data = [ [name, a], [name, b], [name, c], ]; // Create the chart if it doesn't exist if(!chart) chart = new Highcharts.Chart(optionsChart); // Set new data to the chart chart.series[0].setData(data) }
Et modifier la méthode onSelectFeature :
Code:
function onFeatureSelect(event) { var feature = event.feature; UpdateChart(feature); }
Tu peux aussi modifier onFeatureUnselect et onPopupClose pour tenir compte de cette modification.
Hors ligne
#29 Mon 27 August 2012 21:40
- Achref_geo
- Participant actif
- Date d'inscription: 19 Feb 2012
- Messages: 107
Re: Solution pour application webmapping
Bonjour René-Luc D'Hont et merci
Tu as raison, je crois que c'est plus simple que j'ai pensé mais il me reste de savoir comment mettre le "chart" dans le pop up ? j'ai utilisé la fonction "fonctionUpdateChart(feature); " mais firebug me dit qu'elle est indéfinie ! j'ai suivi l'exemple que tu attaché http://openlayers.org/dev/examples/sundials.html et voici un peut du code :
Code:
var select = new OpenLayers.Control.SelectFeature(pop); pop.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect }); map.addControl(select); select.activate(); function onPopupClose(evt) { select.unselectAll(); } function onFeatureSelect(event) { var feature = event.feature; var content = "<h2>"+feature.attributes.Name + "</h2>" ; var popup = new OpenLayers.Popup.FramedCloud("chicken", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100,100), content, null, true, onPopupClose); feature.popup = popup; map.addPopup(popup); } function onFeatureUnselect(event) { var feature = event.feature; if(feature.popup) { map.removePopup(feature.popup); feature.popup.destroy(); delete feature.popup; } }
avec ça j'obtient au click un pop up dont il est affiché le nom du secteur, comment remplacer le "content" du pop up qui est le nom dans mon exemple par le graphique ? j'ai trouvé cet exemple http://www.flatapps.net/RenewableEnergyFacilities.html il est très proche mais ici c'est la bibliothèque Google Chart et c'est un peut différent au niveau du code
Dernière modification par Achref_geo (Mon 27 August 2012 21:46)
Hors ligne
#30 Tue 28 August 2012 10:07
- René-Luc D'Hont
- Participant assidu
- Date d'inscription: 7 Nov 2006
- Messages: 328
- Site web
Re: Solution pour application webmapping
L'idée serait de remplacer le contenu de la popup :
Code:
var content = '<div id="hc-output"> </div>';
Et de créer à chaque fois le highcharts après ajout de la popup à la carte :
Code:
map.addPopup(popup); chart = new Highcharts.Chart(optionsChart); updateChart(feature);
Et ça devrait le faire.
Petit problème possible s'assurer que ta div hc-output ai bien une taille fixe.
Hors ligne