S'abonner au Flux RSS

Mot-clé - openstreetmap

Fil des billets - Fil des commentaires

mercredi, juin 22 2011

Nouvelles cartes des éoliennes

En avril 2010 j'ai réalisé une première carte des éoliennes en france, cette carte utilise un fichier de données GML comme source de données. Afin de pouvoir réaliser une carte mondiale des éoliennes en particulier et des sources d'énergie en général j'ai mis en place une instance GeoServer avec une base de données Postgis comme source.

Ceci m'a permis de réaliser cette nouvelle carte de couverture mondiale qui recense aujourd'hui 40 781 éoliennes au plan mondial.

Cette carte sera mise à jour une fois par semaine dans un premier temps puis quotidiennement si la puissance machine le permet.

lundi, mai 23 2011

Rendu de tuile dynamique sous Debian Squeeze

Nous allons mettre en oeuvre une méthode génération de tuile à la volée en utilisant l'outil TileCache sur une distribution Debian Squeeze. Le principe de TileCache exposé ici et de servir par Apache un cgi qui va générer une tuile en utilisant le moteur de rendu mapnik et la stocker sur le disque pour ne pas avoir à la regénérer à chaque appel. La procédure part d'une installation minimale de la dernière version stable de Debian à savoir Squeeze.

Première étape, installer quelques outils de travail qui ne sont pas liés au sujet qui ici nous importe mais dont nous aurons besoin. Cette action se fait avec l'utilisateur root évidemement, chaque futur changement d'utilisateur unix sera clairement explicité.

apt-get install subversion wget unzip bzip2 apache2

Sans trop détailler cette partie nous allons installer une base de données spatiale.

apt-get install postgresql postgis postgresql-8.4-postgis osm2pgsql

Si votre environnement par défaut n'utilise pas une locale en UTF-8 vous aurez à recréer votre cluster postgres, pour cela détruisez l'actuel (toutes données seront perdues) et recréé le par défaut en UTF-8. Les trois commandes suivantes supprime le cluster actuel, créé le nouveau et le démarre.

pg_dropcluster --stop 8.4 main
pg_createcluster 8.4 main --locale fr_FR.UTF-8
pg_ctlcluster 8.4 main start

Pour les manipulations purement postgresql on travaille toujours avec l'utilisateur unix postgres, On passe donc sous cet utilisateur

su - postgres

On vérifie que le cluster est par défaut en utf-8 avec la commande :

psql -l

La colone encoding doit indique 'UTF8'

On créée un utilisateur sans privilèges particulier qui sera utilisé plus loin dans la configuration de mapnik.

createuser -S -D -R -P render

on considère dans la suite du billet que vous affectez ici le mot de passe 'render' à cet utilisateur ; dans la vrai vie personne n'ose faire une chose pareille évidemment :-)

Création de la base de données nommée render, que l'on affecte à l'utilisateur "render"

createdb -O render render

Les trois commandes suivantes servent à spatialiser la base. Cela permet de stocker et manipuler les objets géométriques directement avec des primitives postgres.

createlang plpgsql render
psql -q -d render -f /usr/share/postgresql/8.4/contrib/postgis-1.5/postgis.sql
psql -q -d render -f /usr/share/postgresql/8.4/contrib/postgis-1.5/spatial_ref_sys.sql

Les 3 commandes précédentes doivent être siliencieuses en cas de succès.

On rend la propriété des objets créés à notre utilisateur "render" (les commandes ont été lancées avec le user "postgres")

psql -d render -c 'ALTER TABLE geometry_columns OWNER TO render'
psql -d render -c 'ALTER TABLE spatial_ref_sys OWNER TO render'
psql -d render -c 'ALTER VIEW geography_columns OWNER TO render'

Il nous reste à effectuer l'installation du moteur de rendu mapnik et à charger le fichier de données dans la base de données Désormais nous allons travailler avec un utilisateur dédié au rendering

Retour en root pour installer la paquets nécessaires

apt-get install python-mapnik mapnik-utils

et création d'un utilisateur lambda

adduser render

On passe sous cet utilisateur render pour la suite.

su - render

Installation de mapnik depuis le dépôt svn officiel d'openstreetmap dans le répertoire /home/render/mapnik

svn co http://svn.openstreetmap.org/applications/rendering/mapnik

Toutes les informations nécessaires au rendu ne sont pas stockées dans la base de données, une partie est utilisée depuis des fichiers de formes appelés Shapefiles. On trouvera par exemple dans ceux-ci le contour des continents, qui contrairement aux autres données dans OSM bougent bien peu. Avant de pouvoir faire nos rendus nous allons donc les récupérer grâce à un script bash qui télécharge les fichiers nécessaires et les décompresse dans le répertoire courant :

cd mapnik && bash get-coastlines.sh

Là vous pouvez aller prendre un café, un sandwich ou une entrecôte suivant le débit de votre liaison internet. Le total des fichiers réléchargés dépasse les 450Mo.

A cette étape nous nous rappochons d'OpenStreetMap et allons récupérer les données pour les charger dans notre base. Nous récupérons le fichier pour la région Basse-Normandie, à vous d'adapter pour coller à votre besoin. Les deux sources de fichiers d'export les plus utilisés aujourd'hui sont Geofabrik et Cloudmade, arbitrairement nous utiliserons Cloudmade.

wget http://downloads.cloudmade.com/europe/western_europe/france/basse-normandie/basse-normandie.osm.bz2

Le chargement des données dans la base se fait avec le logiciel osm2pgsql, celui-ci utilise en entrée un fichier de données (comme celui fraichement téléchargé) et un fichier de style qui permet de filtrer les clés sur les objets en fonction de ce que l'on veut afficher sur notre carte. Le packaging de debian évoluant moins rapidement que les tags dans OSM nous allons légèrement adapter le fichier de style ajoutant la clé 'addr:housename' au fichier de style pour que notre démonstration fonctionne.

cp /usr/share/osm2pgsql/default.style .
echo 'node,way addr:housename text linear' >> default.style

Longue étape, le chargement des données se fait avec la commande :

osm2pgsql -s -S default.style -d render basse-normandie.osm.bz2

là encore pour pouvez aller vous ressourcer en alcaloïde méthylxanthine ,

Avec les sources de mapnik est distibué le style utilisé pour le rendu sur le site openstreetmap.org autant l'utiliser. Étant assez complexe il est découpé en plusieurs fichiers xml qu'il faut réassembler en spécifiant la connexion à postgresql qui sera utilisée pour le rendu. Cela se fait en utilisant le script pyhton generate_xml.py de la façon suivante :

./generate_xml.py --host=localhost --port=5432 --user=render --password=render --dbname=render osm.xml > osm-local.xml

Le fichier osm-local.xml sera celui utilisé au final par mapnik, il fait tout de même 9682 lignes, on voit bien l'intérêt du découpage.

J'en profite pour féliciter ceux qui sont arrivés jusque ici et les rassurent aussi, on voit le bout.

Si on fait le point, nous avons nos données de stockées dans la base et le moteur de rendu est installé et configuré, ne nous reste donc plus qu'à passer au sujet principal de ce billet, à savoir TileCache :

Installation se fait au travers du paquet eponyme

apt-get install tilecache

La configuration s'effectue dans le fichier dans /etc/tilecache.cfg auquel nous ajouterons juste une section finale composée de :

[osm]
type=Mapnik
mapfile=/home/render/mapnik/osm-local.xml
spherical_mercator=true
tms_type=google

Cette simple configuration conclue l'installation et il ne nous reste qu'à tester l'ensemble

Par défaut TileCache va stocker les tuiles générées dans /tmp/tilecache à vous d'adapter au besoin. Dans un prochain billet on verra le cache des tuiles directement dans Memcached.

Ma machine de test s'appelle geti que vous remplacerez dans l'url suivante par le nom de votre machine

L'appel de cette url devrait vous afficher la ville de Cherbourg

http://geti/cgi-bin/tilecache.cgi/1.0.0/osm/12/2029/1395.png

Vous reconnaitrez facilement la forme de l'url que vous pourrez utiliser avec Leaflet par exemple.

Pour tester plus en avant votre installation vous pouvez récupérer un fichier simple de test disponible sur mon serveur, adaptez le nom de la machine dans le code et placez le fichier à la racine de votre site web, vous disposerez d'une carte navigable avec des tuiles générées à la volée !

wget http://carto.quiedeville.org/leaflet/article-test.html

Bugs, problèmes, mécompréhension, les commentaires sont ouverts.

dimanche, mai 22 2011

Leaflet, un nouveau concurrent pour OpenLayers ?

Dans un précédent billet j'évoquais les possibilités de réduction de taille de la librairie OpenLayers, avoisinant le méga de données en natif je trouve cette librairie un peu trop gourmande. En réduisant au maximum les fonctionnalités j'arrivais à une taille de 154Ko ce qui permettait d'afficher des tuiles issue d'OpenStreetMap et d'avoir les fonctionnalités de déplacement et de zoom de base.

Si la problématique de la taille est primordiale dans votre déploiement de carte ligne vous serez intéressé par la nouvelle librairie Leaflet que vient de publier Cloudmade. Conçue pour les applis web et mobiles Leaflet ne pèse à ce jour que 64Ko. On ne retrouve que les fonctions de bases, mais déjà bien assez pour la plupart des cartes vues sur le web. Les fonctions de bases sont présentes avec en plus des possibilités d'ajout d'objets géometriques et les interactions minimales pour ouvrir les classiques popups. Publiée sous licence BSD le code est disponible sur Github, vous pourrez y signaler des bugs éventuels ou demander des nouvelles fonctionnalités sur la page de suivi d'anomalie.

Même si tous les exemples utilisent comme source le service MApzen de Cloudmade, il est possible d'utiliser n'importe quel serveur de tuile. J'ai fait une carte sommaire de la Bretagne avec les tuiles OSM standards, je suis assez emballé de la rapidité d'affichage,

Je vous invite à laisser en commentaire vos impressions et éventuellement à débattre de ses avantages/inconvénients par rapport à OpenLayers ; dont on attend la version 2.11 dans les jours/semaines à venir.

lundi, janvier 31 2011

Service de frame pour cartes libres

Une remarque fréquemment entendue lors des présentations du projet OpenStreetMap est l'apparente compléxité à mettre une carte sur son site ; comparaison généralement faite avec d'autres services de cartes en ligne que nous ne nommerons pas ici.

Il est déjà possible d'obtenir un code d'iframe grâce au bouton Export sur le site du projet ; mais cette option n'est pas suffisemment connue ni facilement accessible à la diffusion des cartes dans les pages contact des sites web.

Pour remédier à cela et participer à la diffusion du projet OSM j'ai mis en ligne un service web de mise à disposition de frame nommé cartosm.eu.

Le service permet la création du code HMTL à insérer sur un site web pour y ajouter une iframe contenant une carte avec différentes options. Les cartes générées sont configurables pour y inclure une épingle, les rendre fixes, ajouter un lien vers une carte plus grande, ...


La carte ci-dessus est ajoutée à ce billet en y insérant le code HTML suivant :

<iframe width="330" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://cartosm.eu/map?lon=-3.4549803733223&lat=47.637733494058&zoom=18&width=330&height=250 &mark=true&nav=true&pan=true&style=default"></iframe><br /><div id="cartosmlink"><a href="http://www.openstreetmap.org/?lat=47.637733494058&lon=-3.4549803733223&zoom=18&layers=M" style="text-align:left;">Voir sur une carte plus grande</a></div>

vendredi, janvier 21 2011

Réduire la taille de la librairie OpenLayers

La librairie OpenLayers est constituée d'un ensemble de classe, de fonctions, de librairies externes, qui sont séparés dans 292 fichiers Javascript. Le principe de la construction de la librairie est de rassembler tous les fichiers pour n'avoir au final qu'un seul .js à mettre sur votre serveur web. Nous allons décrire ici la méthode qui permet de pour choisir quelles parties seront incluses dans le fichier final. Pour ma part j'ai l'habitude d'exclure tous les objets type Marker des cartes qui ne sont composées que de tuiles de bases, on enlèvera de même tous les contrôles inutilisés.

Tout d'abord, récupérez l'archive contenant les sources sur le site du projet, la version à la rédaction de ce billet est la 2.10.

wget http://www.openlayers.org/download/OpenLayers-2.10.tar.gz

Décompressez ensuite l'archive obtenue et placez vous dans le répertoire build qui contient les scripts de construction.

tar xvfz OpenLayers-2.10.tar.gz
cd OpenLayers-2.10/build/

On trouve dans le répertoires les scripts build.py et buildUncompressed.py écrits en python. Les fichiers de profile full.cfg library.cfg, et lite.cfg, le fichier de licence et un traditionnel README.txt qui contient un peu d'aide, juste un peu.

Le script nommé build.py prend 2 options. La première permet de spécifier le fichier de profile à utiliser (par défaut full.cfg) et la deuxième le nom du fichier généré (par défaut OpenLayers.js)

exécution du programme :

./build.py

ou

./build.py full

on note que le fichier de profil est à indiquer sans l'extension .cfg

build.py utilise jsmin (présent dans le répertoire tools/ de l'archive) pour minifier le code généré, si vous ne souhaitez pas le faire il vous faudra alors utiliser le script buildUncompressed.py pour construire votre librairie. La génération non compressée aboutit à un fichier de 2.6M, on réservera cette version pour les devs :-)

Par défault le script build.py utilise le fichier de configuration full.cfg qui comme son nom l'indique contient l'ensemble des librairies et classes du projet OpenLayers ainsi que les inclusions externes. Les fichiers sont placés dans le répertoire lib/ dans la racine de l'archive. La création du build full donne

Total files merged: 269
Compressing using jsmin.

Pour une taille de 929K.

Une compilation avec la configuration plus légère en utilisant le profile lite.cfg aboutit à 128K pour seulement 23 fichiers de sources utilisés, le gain est net et sans appel.

On aboutit avec ce fichier au minimum requis pour afficher une carte dans une page web, un minimum de contôles sont toutefois nécessaires pour permettre à l'internaute d'interagir sur la carte. C'est dans ce sens que j'ai créé le fichier ci-dessous qui me permet d'aboutir à un fichier de 154K ce qui fait tout de même un gain de 80% en taille.

[first]
OpenLayers/SingleFile.js
OpenLayers.js
OpenLayers/BaseTypes.js
OpenLayers/BaseTypes/Class.js
OpenLayers/Util.js

[last]

[include]
OpenLayers/Map.js
OpenLayers/Layer/TMS.js
OpenLayers/Control/Attribution.js
OpenLayers/Control/PanZoom.js
OpenLayers/Control/Navigation.js
OpenLayers/Control/ArgParser.js

[exclude]

Un fichier de profile se décrit en 4 sections qui contiennent chacune un ensemble de nom de fichier faisant référence au répertoire lib/ de la racine. Les fichiers présents dans include sont inclus dans le fichier final quand ceux de la section exclude en sont exclus. Il est possible de laisser la section include vide et de ne seulement spécifier que ceux qui ne seront pas utilisés, dans ce cas tous les fichiers sources sont inclus ; c'est d'ailleurs le choix fait dans le profil full.

Un fichier présent dans la section first sera inclus en début de processus, pour la section last il sera poussé à la fin du fichier, un fichier présent dans l'une de ces 2 sections doit figurer également dans la section include sinon une erreur se produit. La section include à prédominance sur la section exclude, un fichier présent dans les 2 sera inclus au final.

Dans la version par défaut la localisation française n'est pas incluse, on ajoutera la ligne "OpenLayers/Lang/fr.js" dans la section include pour corriger cela, raison de plus pour les francophones de construire eux mêmes leur librairie.

Il ne faut pas voir la finalité de la réduction de taille comme un gain en temps de transferts, au vu du volume de tuiles qui accompagnent une carte cela ne serait pas pertinent. Le gain le plus intéressant se trouve au niveau de l'exécution du code javascript dans le navigateur pour une part. D'autre part moins on à de code exposé, moins on a de bugs potentiels.

Un dernier intérêt à mettre en place cette méthode et vous l'aurez vite compris c'est que vous pouvez inclure votre propre code Javascript dans la lib et ne plus avoir qu'un seul fichier .js à charger pour animer vos cartes, et un fichier de moins, c'est une socket de moins, des octets en moins, une ligne de log en moins ...

vendredi, novembre 12 2010

Proposition de nouveau rendu mapnik

Le rendu actuel des réserves naturelles dans mapnik fait que lorsque qu'une réserve est composée de terres émergées et de surface aquatique la limite entre les deux est peu intuitif à la lecture de la carte. J'ai ouvert un ticket ce jour pour proposer un nouveau rendu à base d'image hachurée sur fond transparent.

Le rendu actuel donne ce résultat :

smallold.png

et le nouveau celui-ci

smallnew.png

Pour de plus grandes images vous pouvez consulter cette comparaison entre les deux rendus que je vous invite à commenter ici.

jeudi, novembre 11 2010

Installer la librairie OpenLayers sur votre serveur

Utiliser une librairie JavaScript distante est une dépendance dangeuresue pour un site web, en cas de problème sur le site OpenLayers les cartes sur vos sites ne seraient plus affichées, pour éviter cela nous allons voir comment installer la librairie à la racine de votre serveur web.

La librairie sera installée à la racine du serveur web dans un répertoire nommé opl210.

Première étape récupérer l'archive sur le site, ici nous la sauvegardons dans la racine du serveur.

wget http://www.openlayers.org/download/OpenLayers-2.10.tar.gz

On décompresse l'archive dans le répertoire courant

tar xvfz http://www.openlayers.org/download/OpenLayers-2.10.tar.gz

Il ne nous reste qu'à copier les fichiers nécessaires dans le répertoire opl210.

cp OpenLayers-2.10/OpenLayers.js opl210/
cp -r OpenLayers-2.10/img/ opl210/
cp -r OpenLayers-2.10/theme/ opl210/

Nous pouvons désormais supprimer l'archive OpenLayers-2.10.tar.gz et le répertoire OpenLayers-2.10 qui ne sont plus utiles.

Nous utiliserons maintenant dans notre page html la librairie locale en indiquant dans les headers l'emplacement de celle-ci :

<script type="text/javascript" src="/opl210/OpenLayers.js"></script>

Inutile de préciser où sont stockées les images et les styles utilisés, la librairie les cherche par défaut dans le répertoire/url où celle-ci se trouve. Dans le prochain billet nous verrons lors de la personnalisation de la carte comment indiquer des répertoires différents afin de pouvoir organiser les fichiers à son habitude.

NB : le fichier readme.txt contient une erreur sur l'emplacement du fichier OpenLayers.js ne pas s'y fier, j'ai ouvert un ticket pour corriger cette erreur

La mise en oeuvre de ce billet est consultable dans : local.html

lundi, novembre 8 2010

OpenLayers et les projections

Dans ce deuxième billet consacré à Openlayers nous allons aborder les sytèmes géodésiques et les projections. Sans entrer dans les détails il faut savoir que la représentation de la terre qui est ronde sur une feuille de papier plane représente un casse tête depuis des siècles à tous les cartographes, pour faire cela au mieux (avec le minimum de déformations) on a inventé les systèmes géodésiques et les projections cartographiques.

Quand vous utilisez un GPS dans votre voiture, en randonnée ou en vélo la position que vous lisez sur l'écran est exprimée en longitude et latitude dans le système géodésique WGS 84. L'EPSG qui se charhe de référencer les différents systèmes lui a attribué le numéro 4326, les codes EPSG sont une référence pour les outils manipulant des données géographiques comme Postgis ou OpenLayers, ils sont d'ailleurs utilisés par aussi par l'Open Geospatial Consortium.

Tout serait simple si OpenLayers utilisait ce système pour référencer les tuiles qui composent la carte, mais OpenLayers utilise le système 900913, car c'est ce système qui est utilisé lors de la création des tuiles, nous devons donc l'utiliser pour positionner notre carte, comme nous l'avons fait dans le précédent billet. Je reviendrais plus tard sur les origines du système 900913, les habitués de l'écriture cowboy pourront déjà faire des recherches sur le moteur éponyme.

Un peu de pratique maintenant et positionnons notre carte avec des données WGS 84. Dans notre précédent exemple nous avons centré la carte sur la position 30000,580000, position exprimée dans le système 900913.

var center = new OpenLayers.LonLat(30000,5800000);

Afin de pouvoir spécifier center dans le système WGS 84 nous allons créer 2 objets de projection avec la classe OpenLayers.Projection, un objet pour le WGS 84 en utilisant son code EPSC 4326, et un pour le système attendu par OpenLayers 900913.

var projFrom = new OpenLayers.Projection("EPSG:4326");
var projTo = new OpenLayers.Projection("EPSG:900913")

Nous allons donc cette fois pourvoir définir notre centre avec une coordoonée en longitude est de 0.2694 approximatif, et une latitude nord de 46.1224.

var center = new OpenLayers.LonLat(0.269494585,46.1224893);

Il ne nous reste plus qu'à tranformer notre point center avec la fonction transform pour obtenir un point nommé cproj que l'on pourra utiliser pour positionner la carte.

var cproj = center.transform(projFrom, projTo);

Le contenu de center est transformé d'un système de projection source projFrom dans un système destination projTo, ce qui nous permet d'obtenir dans la variable cproj une position exprimée dans le système 900913, il ne nous reste plus qu'à utiliser cette position pout centrer la carte.

map.setCenter(cproj, 5);

La mise en oeuvre de ce billet est consultable dans : projections.html

mercredi, novembre 3 2010

Utiliser OpenLayers et OpenStreetMap : la carte minimale

Ce billet est le premier d'une série sur la vulgarisation d'OpenStreetMap et OpenLayers. Nous allons voir ici qu'il est très simple aujourd'hui d'inclure une carte nabvigable dans une page web.

Le code de ce billet est mise en oeuvre dans : minimal.html

L'intégration d'une carte dans une page web consiste à ajouter une balise <div> avec un id nommé ici map. L'initialisation de la carte se fera au chargement de la page, pour cela on ajoute un appel à la fonction javascript init() dans la balise <body>.

<body onload="init()">

  <div>Démonstration de carte openstreetmap minimale</div>

  <div id="map"></div>

</body>

Dans l'en-tête de la page on définira la fonction init() comme suit. Dans cette première approche on se contente d'une carte simple que l'on positionne sur un point définit au niveau de zoom 5. Dans un prochain billet on verra comment utiliser un système de coordonnées plus commun.

    <script type="text/javascript">
    function init(){

      // Création d'un objet map
      var map = new OpenLayers.Map('map');

      // Ajout d'un calque en utilisant le rendu par défaut
      map.addLayer( new OpenLayers.Layer.OSM() );

      // Création du point central de la carte à partir 
      //de coordonnées géographiques
      var center = new OpenLayers.LonLat(30000,5800000);

      // Positionnement de la carte sur le point central,
      // au niveau de zoom 5
      map.setCenter(center, 5);
    }
    </script>

Les propriétés visuelles de la carte, sa taille et la bordure noire sont définies comme pour tout objet html par une feuille de style CSS directement en utilisant l'identifiant de l'objet <div>.

     #map {
       width: 600px;
       height: 400px;
       border: 1px solid black;
     }

Nous avons maintenant une carte dans notre page web sur laquelle il est possible de se déplacer, de modifier le niveau de zoom, de faire glisser à la souris et bien d'autres choses encore. Les connaisseurs reconnaîtront le rendu utilisé dans cet exemple, c'est le rendu réalisé par mapnik, utilisé sur le portail OpenStreetMap. Rendu que nous n'avons pas choisi et que nous verrons comment changer dans un prochain billet. Vous pouvez maintenant intégrer dans votre CMS à base de logiciel libre une carte à base de données libres.

page 2 de 2 -