Il me faut une carte

Thomas Gratier WebGeoDataVore

Les cartes initialement

Pendant un temps

Après

Maintenant

Souvent

Le parti pris

  • se concentrer sur les solutions clientes avec faible dépendance au back-office.
  • prendre deux cas d'utilisation courants:
    • le survol d'un contour administratif pour afficher un contenu ou ouvrir un lien hypertexte
    • l'ajout d'un ou plusieurs points pour se situer sur un plan

L'Image Map

Ancien mais peut servir

<img src="super-mario-carte-monde.gif" width="960" 
     height="501" border="0" usemap="#map" />
<map name="map">
    <area shape="circle" coords="232,40,12"
          href="http://fr.wikipedia.org/wiki/Arctique" />
    <area shape="circle" coords="531,391,12"
          href="http://fr.wikipedia.org/wiki/Johannesburg" />
    <area shape="circle" coords="226,301,12"
          href="http://fr.wikipedia.org/wiki/Cordillère_des_Andes" />
    <area shape="circle" coords="562,194,12"
          href="http://fr.wikipedia.org/wiki/Turquie" />
    <area shape="circle" coords="782,315,12"
          href="http://fr.wikipedia.org/wiki/Indonésie" />
    <area shape="circle" coords="637,92,12"
          href="http://fr.wikipedia.org/wiki/Russie" />
</map>

Mise en oeuvre facilitée avec Gimp (un plugin est présent par défaut)

Démo d'une image Map

Forces-faiblesses

Forces:

  • superposer sur un raster une couche interactive, utile pour habiller une carte statique existante en partant d'aucune donnée

Faiblesses:

  • interactivité limitée
  • limitations dues au raster

Les solutions SVG

Différentes sauces:

Un aperçu "classique"

Forces-faiblesses

Forces:

  • Redimensionnable/déformable car vecteur
  • Stylable à volonté en CSS
  • Basé sur un standard omniprésent
  • Facile à prendre en main en particulier pour ceux qui partent de D3.js

Faiblesses:

  • Limité à des zones sans trop d'objets à représenter car surcharge du DOM.
  • Inadapté pour donner un contexte (fonds de carte).
  • Création de contours depuis des données cartographiques spécialisées ou de créer/adapter des SVG

Démo reprojection à la volée

Les frameworks cartographiques dédiés

Forces

  • Superposer facilement les couches d'informations
  • Permettent la contextualisation avec des fonds de carte

Faiblesses

  • Nécessite de savoir convertir des données cartographiques un minimum car on ne travaille pas avec du SVG mais des formats plus "exotiques".

OpenLayers 2 et 3

OpenLayers 2 et 3

  • surpuissants mais complexes
  • plutôt pour des besoins métiers (projections, web services spécifiques,...)

Bon choix dès qu'on évalue mal le besoin métier à venir.

Leaflet

Leaflet

  • petit noyau bien maintenu
  • extensions pratiques

Un bon choix par défaut pour la plupart des besoins simples comme "Où vous êtes"

Live démo Leaflet

    var map = L.map('map').setView([47.2053814, -1.560521], 15);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; ' +
        '<a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(map);

    var quartierCrea = L.marker([47.20659, -1.56329]).addTo(map)
        .bindPopup("<b>Bonjour quartier de la création!</b><br />Nous présentons ici.");
    quartierCrea.openPopup();

    var meltingPotes = L.marker([47.20508, -1.55777]).addTo(map)
        .bindPopup("<b>Bon appétit bien sûr!!<b>");

     L.polyline( [
      [47.20665775248662, -1.563328206539154],
      [47.20647553468404, -1.5632852911949155],
      [47.20660308721156, -1.562080979347229],
      [47.20456949895177, -1.5616893768310547],
      [47.20499225848552, -1.5577894449234009]
    ]).addTo(map).bindPopup("Je mène à la nourriture.");

Démo

Forces-faiblesses

Forces

  • Superposer facilement les couches d'informations
  • Permettent la contextualisation avec des fonds de carte

Faiblesses

  • Nécessite de savoir convertir des données cartographiques un minimum car on ne travaille pas avec du SVG mais des formats plus "exotiques".

Conclusion

Des ponts entre solutions

  • D3 peut utiliser des tuiles OpenStreetMap comme Leaflet ou OpenLayers pour avoir du contexte
  • Leaflet comme OpenLayers 3 peuvent superposer des représentations de D3

Pas de solution unique, juste des choix pour s'adapter au besoin