Une carte avec Leaflet, OpenLayers 2 et OpenLayers 3

Je reprends la comparaison faite dans cet article de 2013 entre OpenLayers 2 et Leaflet, en y ajoutant OpenLayers 3. Voici donc le même concept de carte simple contenant des icônes et des popups s’affichant lors d’un click sur ces icônes. Toutes les cartes ont le même fond: le rendu standard d’OpenStreetMap. Elles ont aussi toutes la même couche de points, en format GML pour la carte OpenLayers 2 et en format geoJSON pour Leaflet et OpenLayers3. Voilà le résultat, faites CTRL+U sur les cartes en plein écran avec firefox et Chrome pour voir et comparer les codes!

 

Leaflet (en + grand)
OpenLayers2 (en + grand)
OpenLayers3 (en + grand)

Mon avis sur OpenLayers3:

  • Cela fait quelques années que cette librairie est annoncée, mais son usage ne semble pas vraiment décoller. En tout cas, il est difficile de trouver sur le web une documentation simple (en français ou anglais) sur son usage. Les tutoriaux officiels du site sont très pauvres.
  • Je trouve que le code est extrêmement compliqué pour des choses aussi simples qu’afficher un popup ou changer le curseur de la souris sur les icônes!
  • Il est aussi nécessaire de faire appel à certaines librairies extérieures pour des fonctions simples (popups et curseur), comme jQuery et bootstrap.

Bref, pas convaincu pour l’instant! En tout cas, il est clair que pour une carte simple, la meilleure librairie est Leaflet (la plus simple, la plus facile, la plus responsive).

GeoDATA 2014, Bruxelles

J’ai participé ce mardi 3 juin au GeoDATA2014, un événement gratuit de conférences sur les géodonnées organisé par des entreprises du géospatial. C’était le seul évènement de leur programme sur le continent, à Bruxelles, donc à ne pas manquer! Petit compte-rendu non exhaustif et subjectif de la journée avec une sélection de 3 présentations marquantes:

1) Tout d’abord, un showcase impressionant de T-Kartor (www.t-kartor.com), une boite de cartographie, qui a réalisé des supports cartographiques pour accompagner un ambitieux programme de mobilité dans trois villes: Londres, Birmingham et New York. C’est un projet multi-facette qui tourne autour du même support cartographique, une carte très bien faite, “so user-friendly”, qui doit permettre à un maximum de personnes, habitants de la ville ou de passage, de s’y orienter, de faciliter l’accès aux transports en communs et de pouvoir atteindre leur destination à pied ou à vélo. La carte en elle-même est une carte très lisible, au design moderne inspiré du web, avec les bâtiments principaux dessinés en perspective (3D) pour permettre aux gens de se retrouver facilement, et un cercle indiquant la zone accessible à 5 minutes à pied. Les cartes sont affichées sur des bornes disposés dans l’espace urbain à des endroits-clés, sur les arrêts de bus et métro et sur les stations de vélo en partage. Elles permettent de rendre la navigation à pied dans une ville plus facilement, et de ce fait accompagne le changement modal, qui se traduit à Londres par 9 % de voiture en moins et +173 % de vélo en plus sur la période 2010-2012 ! Une fabuleuse réalisation qui a inspiré la STIB, présent lors de cette journée, pour de futures réalisations similaires à Bruxelles. A suivre !

2) Deuxio, une présentation de TomTom, l’entreprise de GPS, qui utilise les données collectées sur ses milliers de GPS vendus aux automobilistes. A moins que vous ne le refusiez, toutes les données de trajets suivis par un automobiliste équipé d’un GPS sont en effet collectées par l’entreprise, rendues anonymes, puis traitées et enfin commercialisées ! Il y a 2 formes principales de données : celles en temps-réel, qui peuvent être utilisées en temps réel pour vous éviter les bouchons, et les données historiques, qui permettent de dégager des statistiques fiables sur la circulation routière. Les données historiques représentent à ce jour plus de 700,000 ans de conduite automobile non-stop ! Ces données sont assez précieuses pour décider des aménagements routiers, pour gérer la congestion du trafic, pour améliorer les itinéraires proposés sur les GPS et les sites internet de routage, mais aussi pour les compagnies d’assurances… Ainsi, on peut en tirer des profils de vitesse à n’importe quel endroit du réseau, qui donnent la vitesse de circulation moyenne en fonction de l’heure de la journée, pour les différents jours de la semaine. Ce qui est sympa, c’est que vous pouvez tester ces données gratuitement dans la démo trafficstats.tomtom.com.

3) Enfin, la journée s’est terminée par la présentation de la British Cartography Society (www.cartography.org.uk), une association qui entend faire la promotion des bonnes pratiques de cartographie. Ils partent du constat qu’aujourd’hui, beaucoup de personnes peuvent créer des cartes facilement (avec les logiciels SIG), mais qu’il leur manque souvent la formation et les bonnes pratiques pour faire de BONNES cartes. L’association entend donc promouvoir la cartographie comme un art, une science avec ses bonnes pratiques, à destination des professionnels comme des « map-lovers » amateurs. Ils éditent une revue scientifique, organisent une conférence annuelle et notamment des cours de cartographie dans des écoles. A noter leur petit livre de poche « Cartography : an introduction », que tout cartographe devrait avoir, que j’ai pu acheter à cette occasion et disponible sur le web ici. Pour les amoureux des cartes…

Geofabrik: des données OpenStreetMap en shapefiles

Il y a quelques jours, je cherchais des données géographiques pour faire rapidement un fond cartographique à cheval sur la Belgique, la France et le Luxembourg. S’il est relativement facile de trouver des shapefiles par pays sur des sites comme DIVA-GIS, c’est plus difficile de trouver des shapefiles trans-frontières, avec les mêmes attributs et sur lesquels la même symbologie peut ếtre appliquée.

D’où l’idée de passer par OpenStreetMap, qui devient sans doute la base de données géographiques vectorielles la plus complète et la plus accessible du monde! Une rapide recherche me fait tomber sur le site de Geofabrik, une entreprise qui propose des shapefiles issus d’OpenStreetMap par pays ou sous-régions. Et hop, on télécharge des shapefiles du monde entier qui sont toujours avec les mêmes attributs en un rien de temps! Il y a certainement moyen d’exporter les données d’OpenStreetMap par d’autres moyen ou de directement les importer dans ArcGIS ou QGIS, mais la solution de Geofabrik est simple et rapide!

Après une sélection des données affichées (par ex., seules les autoroutes et les grand-routes sont affichées parmi les voiries), voilà ce que cela donne avec QGIS:

Carte_Qgis_geofabrik

Il reste des imperfections dans les données OpenStreetMap dans cette carte, comme des routes non complètes (par ex. en Ardenne Française), des données manquantes ou incorrectes. Néanmoins, dans d’autres régions du monde, OpenStreetMap est la meilleure source de données géographique existantes en terme de complétude et surtout d’actualisation.

Créer une carte avec amMap

J’ai découvert récemment une petite librairie cartographique très simple à utiliser: amMap. Elle permet de créer des cartes thématiques du monde, de continents ou de pays, et est rapide à prendre en main. J’ai fait un exemple d’application avec une carte de la provenance des étudiants ULg du campus d’Arlon, sans doute le campus le plus multiculturel de Belgique!

Cet exemple (sans la légende) est fait en une vingtaine de lignes de code. J’aime bien le code pour les popups (là où ça commence par “ballonText”): juste une ligne de code, alors qu’avec OpenLayers, il en faut une bonne quizaine pour le même genre de résultat! Pour le reste du code, en s’inspirant des exemples fournis, il est facile de créer une carte sans devoir passer par un tuto.

var map;
			
AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "./ammap/images/";
    map.colorSteps = 11;
    map.mouseWheelZoomEnabled = true;
    map.balloon.color = "#000000";
   
    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        areas: [
            	{id:"DE",value:"1"},
		{id:"BR",value:"1"},
                ...
    };
    map.areasSettings = {
        autoZoom: true,
        balloonText: "[[title]]: [[value]]",
        selectedColor: "#696969"
    };

    map.dataProvider = dataProvider;    
    map.write("mapdiv");
});

Il y a une documentation claire et relativement complète sur le site d’amMap. Attention, amMap n’est pas une librairie de webmapping au même titre qu’OpenLayers ou Leaflet, c’est plutôt une librairie pour créer des cartes à grande échelle sur base de dessins de continents/pays pré-définis, et le résultat est plus proche d’un dessin que d’un Système d’Information Géographique. Par exemple, il n’y a pas de projection à définir et pas question d’y ajouter des WMS, des couches de GoogleMaps, etc. Les possibilités sont très limitées en comparaison d’autres programmes et librairies, mais c’est déjà suffisant pour nombre d’applications. Enfin, amMap est disponible gratuitement mais n’est pas un projet open-source, dommage :-(.

Imprimer une webmap avec le Pearl Crescent Page Saver plugin

Dans ce post, nous verrons comment il est possible d’éditer de (belles) cartes “papier” à partir de logiciels de webmapping. Alors c’est vrai que les webmaps ne peuvent rivaliser avec un logiciel de cartographie ou SIG pour créer de jolies cartes papier. Mais traduire une webmap dans un SIG pour l’édition d’une carte est une étape relativement fastidieuse, qui implique l’exportation des données cartographiques, la redéfinition de la symbologie et qui peut même se révéler impossible ou du moins beaucoup plus complexe lorsque la webmap affiche un fond cartographique venant d’une source tiers, typiquement GoogleMaps ou OpenStreetMap.

Si on veut avoir rapidement une version papier d’une webmap que vous avez créé, il existe mieux qu’une simple capture d’écran (print sreen)! Certains plugins disponibles sous Firefox permettent en effet de personnaliser la capture d’écran et notamment de faire une capture d’une page web, càd de TOUTE la page, indépendamment de la taille de votre écran et sans devoir “scroller” la page et de recoller des morceaux de capture d’écran.

Un des meilleurs plugins Firefox de capture de page est le Pearl Crescent Page Saver. dont une version gratuite est téléchargeable ici. Installez ce plugin Firefox, redémarrez Firefox et vous verrez une petite icône dans la barre d’outil en haut à droite:

img1
Vous avez donc la possibilité d’enregistrer la page entière! Les options de Page Saver permettent de choisir entre autres choses le format (PNG ou JPEG).

Cool, mais cela n’apporte évidemment strictement rien de plus qu’une capture d’écran classique si votre webmap s’affiche sur l’ensemble de l’écran, ce qui est souvent défini comme tel pour les webmaps! L’astuce est alors de définir votre carte sur une grande page web qui dépasse la taille de votre écran.

Par exemple, une webmap occupant tout l’écran se définit avec OpenLayers dans un fichier HTML de la façon suivante:

<div style="width:100%; height:100%" id="map"></div>

Mais il est tout à fait possible de faire une carte dépassant cet écran:

<div style="width:300%; height:300%" id="map"></div>

ou exprimé en pixels, par exemple:

<div style="width:5000px; height:5000px id="map"></div>

ce qui créé un fichier de 5000 x 5000 pixels. Il existe une limite de taille d’image pour le plugin (plantage de Firefox si dépassée) qui se situe un peu au-delà de 5000 x 5000 pixels, mais cette taille d’image est déjà suffisante pour réaliser un beau poster à une bonne résolution! Voilà donc un moyen d’imprimer une webmap en haute définition en changeant une ligne dans le code de la webmap.