S'abonner au Flux RSS

mardi, novembre 29 2011

Installer mapnik2 sur Debian Squeeze

La version de mapnik disponible dans squeeze est actuellement la 0.7.1 alors que la version 2.0 de Mapnik est déjà disponible pour Wheezy, j'ai backporté les paquets nécessaires pour faire du rendu avec mpanik2 pour la version squeeze de debian. Les .deb sont disponibles au téléchargement sur http://osm.fsffrance.org/debian-backports/

Un README détaille les étapes et les dépendances pour installer Mapnik2 sur votre Debian Squeeze.

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.

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.