Enquête sur les meilleurs outils de cartographie en ligne pour les développeurs Web : la feuille de route des feuilles de route

Il n'y a rien de tel qu'une bonne carte utile.

Aujourd'hui, l'utilisation de cartes en ligne est un processus simple et engageant. Créer vos propres cartes en ligne n'est plus une grosse entreprise ; nous avons à notre disposition une large gamme d'outils de cartographie en ligne disponibles, allant de gratuits et simples, à des fonctionnalités riches et complexes à utiliser. Pour les développeurs Web qui ne sont pas familiarisés avec la cartographie Web, l'agonie du choix peut être intimidante. Vous voulez faire des cartes, mais vous ne savez pas par où commencer ni quels outils utiliser. Je suis ici pour vous aider avec cette liste des meilleurs outils de cartographie.

Un peu d'histoire

Depuis ses débuts, la technologie a eu une influence sur la cartographie et sur la façon dont les cartes sont utilisées. Au fur et à mesure que la technologie progressait, les processus de cartographie et de cartographie ont évolué avec elle, passant de cartes dessinées manuellement sur papyrus à des cartes interactives sur le Web.

La seconde moitié du 20ème siècle a été un tournant pour la cartographie. L'ordinateur est devenu un outil de choix. La photographie aérienne, l'imagerie satellitaire et la télédétection ont changé la façon dont les données spatiales sont recueillies. Les Systèmes d'Information Géographique (SIG) étaient nés. Finalement, les cartes SIG ont commencé à passer du bureau au Web, et les grands fournisseurs de SIG ont commencé à créer les premiers frameworks pour les cartes en ligne.

Mais la cartographie SIG n'est pas facile. Il nécessite de nombreuses technologies côté serveur, des normes géospatiales et des protocoles, ainsi que leurs implémentations. Cela nécessite de comprendre les données géospatiales et les projections cartographiques, de savoir comment rassembler les données, comment afficher les données, quelles couleurs utiliser, comment généraliser les données à des échelles spécifiques, comment placer des étiquettes sur la carte, comment configurer un serveur qui servira les cartes, comment utiliser une base de données spatiale, etc. Le SIG regorge d'abréviations, telles que WMS, WFS, EPSG, CRS, SLD, GML, TMS, pour n'en nommer que quelques-unes, et pour les connaître et les comprendre, vous devez lire des livres, des articles universitaires et des articles.

L'évolution de la cartographie en ligne

Les premières cartes Web ne montraient généralement qu'une seule image de carte très petite. À cette époque, le panoramique était mis en œuvre en déplaçant une étape, généralement de la moitié de la taille de la carte, dans l'une des huit directions possibles de la boussole - N, NW, W, SW, S, SE, E, NE. Une fois que l'utilisateur a cliqué sur le bouton de panoramique ou de zoom, une toute nouvelle image doit être rendue sur le serveur de carte, chargée sur le réseau, puis traitée par le navigateur. En raison des contraintes de la technologie, les cartes n'occupaient qu'une très petite partie de l'ensemble de la page Web. Pour obtenir une meilleure interaction, les premières cartes nécessitaient des plugins comme Flash ou des plugins propriétaires basés sur Java, ou même ActiveX, qui ne fonctionnaient que dans Internet Explorer.

Google a bouleversé le monde de la cartographie lorsqu'il a introduit Google Maps en 2005. Parmi ses innovations, Google a introduit le panoramique continu par glissement. Leur solution consistait à afficher une carte découpée en plusieurs images carrées plus petites appelées "tuiles". Ces tuiles ont été rendues et diffusées à partir d'un "serveur de tuiles de carte" et mesurent généralement 256 x 256 pixels. Le zoom et le panoramique ne nécessitaient plus que le chargement de nouvelles tuiles de carte au lieu de recharger la page Web entière. Le résultat était une carte visible plus grande qui couvrait plus de la moitié de la fenêtre du navigateur et offrait une expérience fluide pour explorer la carte. En raison de la possibilité de «glisser» la carte avec les fonctions de zoom et de panoramique fluides, ces nouvelles cartes ont été appelées «cartes glissantes». Google a également autorisé les scripts, afin que les utilisateurs puissent mettre les cartes de Google sur leurs propres sites Web et ajouter leurs propres données à la carte. Cela a abouti à la création d'un autre nouveau terme : "Mash-ups de cartes".

Soudain, les cartes en ligne deviennent populaires ; pour ajouter une belle carte à votre site Web, vous n'avez plus besoin d'être cartographe ou spécialiste SIG. Sur les ailes du mouvement "Web 2.0", et en s'appuyant sur des technologies modernes telles que HTML5, CSS3 et SVG, qui permettent de créer facilement du contenu interactif, les cartes interactives connaissent désormais une nouvelle renaissance.

Données cartographiques

Comme mentionné précédemment, les premières cartes en ligne étaient basées sur des ensembles de données SIG et leurs géodatabases spatiales. Peu de gens avaient accès à ces données, sans parler de leur prix. Google et les ensembles de données du projet OpenStreetMap (OSM) ont changé cela. La base de données de Google est privée et comporte des restrictions, tandis qu'OSM s'est inspiré du concept de Wikipédia, en tant que projet collaboratif pour créer une carte gratuite du monde. OpenStreetMap est construit par une communauté de cartographes bénévoles, qui contribuent et maintiennent les données spatiales.

En bref, la plus grande révolution qui a contribué à la simplicité de la cartographie aujourd'hui est que les problèmes liés à la maintenance d'un serveur cartographique et de la base de données spatiales ont été supprimés.

Choisir un framework de cartographie Web

Alors, avec toutes les options, comment choisir le bon outil de cartographie en ligne ? D'une part, il existe des fournisseurs commerciaux de cartes en ligne comme Google, MapQuest, Microsoft et Nokia. Ces services fournissent des tuiles de carte et des API JavaScript propriétaires pour les afficher et interagir avec une carte. D'autre part, il existe des projets de cartographie open source qui offrent un chargement facile des tuiles de carte basées sur OpenStreetMap. Ceux-ci incluent OpenLayers et Leaflet. Et puis il y a des projets tels que MapBox et CartoDB, qui basent leurs modèles commerciaux sur les bibliothèques open source et les données OSM, et apportent une valeur ajoutée mais ne sont pas gratuits.

Examinons quelques exemples de chacune de ces catégories. Ici, je vais discuter de plusieurs de ces outils de cartographie en ligne, en fournissant un bref aperçu de chacun, ainsi que des exemples de code, et en pesant le pour et le contre. Nous avons également écrit un tutoriel de mappage D3.js que vous pourriez trouver intéressant en tant que lecture séparée.

Google Maps

Commençons par le choix le plus évident, Google Maps. La première version de l'API Google Maps a été lancée en février 2005 et l'actuelle API Google Maps v3 en juin 2009. L'API Google Maps n'est pas seulement le point de terminaison de l'API JavaScript ; il comprend plus de projets et offre plusieurs façons différentes d'intégrer Google Maps dans des pages Web avec une personnalisation étendue.

Les API Google Maps actuellement disponibles incluent :

• API Javascript de Google Maps
• API Google Cartes statiques
• API d'intégration de Google Maps
• SDK Google Maps pour iOS
• API Google Maps Android v2

Pour vous aider à choisir la bonne API, Google a développé un sélecteur d'API.

Il convient de noter que même si les API de base sont gratuites, certaines limitations sont imposées. La première est que les cartes doivent être librement et publiquement accessibles aux utilisateurs finaux. Deuxièmement, les limites d'utilisation : le service est gratuit tant que votre site ne génère pas plus de 25 000 chargements de cartes par jour, sur une période de 90 jours. Si vous avez besoin de plus grandes échelles ou si vous souhaitez une carte privée, ou si vous gérez un site Web d'entreprise ou commercial, vous devriez envisager de payer pour l'API Google Maps for Work.

Mise en œuvre

Voici un exemple d'implémentation d'une simple carte Google dans le code. Il montre comment créer une carte simple à l'aide de l'API, placer un marqueur sur la carte et ouvrir une fenêtre contextuelle d'un clic de souris.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(45.8167, 15.9833), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: new google.maps.LatLng(45.8167, 15.9833), map: map }); google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infowindow.setContent("Zagreb"); infowindow.open(map, marker); } })(marker)); </script> </body> </html>

La carte résultante ressemble à ceci :

Avantages

• Développé et maintenu par Google.
• De nombreuses API différentes pour inclure une carte dans votre site Web ou votre application.
• Grande communauté d'utilisateurs.
• Très bonne documentation de l'API, avec beaucoup d'exemples.

Les inconvénients

• Sommes-nous sûrs que nous ne verrons pas d'annonces à un moment donné ?
• Tout le monde l'utilise ; toutes les cartes (pour la plupart) se ressemblent.
• API fermée et propriétaire.
• Pas de plugins à côté de ceux officiellement développés par Google.
• Tarification peu claire pour Google Maps for Work.

Couches ouvertes

OpenLayers a été développé par MetaCarta en tant qu'équivalent open source de Google Maps, et la première version a été publiée en juin 2006. OpenLayers est un outil de cartographie en ligne qui implémente une API JavaScript pour créer des applications géographiques riches basées sur le Web, avec une API similaire à la API Google Maps. OpenLayers a gagné en popularité très rapidement et le développement au début a été rapide. OpenLayers 2 est sorti seulement deux mois après la version 1, en août 2006. La bibliothèque était constamment en développement et de nouvelles versions avec de nouvelles fonctionnalités étaient constamment ajoutées. L'inconvénient de cette progression rapide était que la bibliothèque de la version 2 est devenue très grosse et maladroite, atteignant finalement 1 Mo et contenant plus de 100 000 lignes de code ! Bien qu'il ait de nombreuses fonctionnalités, toutes n'étaient pas nécessaires aux utilisateurs réguliers.

C'était la principale raison d'une réécriture complète de sa bibliothèque. L'objectif était de cibler les dernières fonctionnalités HTML5 et CSS3, avec les mêmes fonctionnalités d'OpenLayers 2, telles que la prise en charge des projections, des protocoles standard et des fonctionnalités d'édition. L'accent était mis sur l'amélioration des performances, des versions plus légères, des composants visuels plus jolis et une meilleure API. Cet OpenLayers 3 bien amélioré a été publié en août 2014.

Mise en œuvre

Voyons comment la même carte que dans l'exemple précédent, cette fois en utilisant OpenLayers 3.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://openlayers.org/en/v3.2.1/build/ol.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.2.1/resources/jquery.min.js"></script> <script src="http://openlayers.org/en/v3.2.1/resources/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css"> </head> <body> <div class="map"> <div></div> </div> <script type="text/javascript"> var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857')), name: 'Zagreb', }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ target: document.getElementById('map'), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], controls: ol.control.defaults(), view: new ol.View({ center: ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) }); var element = document.getElementById('popup'); var popup = new ol.Overlay({ element: element, positioning: 'bottom-center', stopEvent: false }); map.addOverlay(popup); map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); $(element).popover('show'); } else { $(element).popover('destroy'); } }); map.on('pointermove', function(e) { if (e.dragging) { $(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); </script> </body> </html>

Et le résultat :

Avantages

• Gratuit et open source.
• Bibliothèque riche en fonctionnalités pour vos besoins de cartographie.
• Beaucoup d'exemples.
• Prise en charge d'une gamme de types de données et de normes SIG.
• Prise en charge intégrée des projections cartographiques et des fonctions d'édition.

Les inconvénients

• La version 3 est toujours en développement intensif et l'API change toujours à chaque version intermédiaire.
• Syntaxe API compliquée.
• La documentation de la version 3 n'est actuellement pas aussi complète qu'elle pourrait l'être.

Brochure

Il est prudent de dire que Leaflet est né en réaction au gonflement, à l'encombrement et à la complexité d'OpenLayers. Vladimir Agafonkin a été invité à créer un wrapper autour d'OpenLayers, mais il a plutôt créé une alternative simple et légère à OpenLayers, et en mai 2011, Leaflet est né. Vladimir s'est concentré sur la simplicité, la performance et la convivialité de cet outil cartographique en ligne. La bibliothèque principale n'a que des fonctionnalités de base, ce qui est suffisant pour la plupart des cas d'utilisation réels. Pourtant, Leaflet peut être étendu avec une énorme quantité de plugins faciles à développer et à ajouter en plus de la bibliothèque principale. De plus, Leaflet a été développé à partir de zéro avec un support mobile à l'esprit.

Leaflet est facile à utiliser et possède une API bien documentée, ainsi qu'un code source simple disponible sur GitHub. En raison de l'accent mis sur les performances, la convivialité, la simplicité, la petite taille et la prise en charge mobile, il est nettement moins compliqué qu'OpenLayers.

L'avenir de Leaflet semble également intéressant. Selon Vladimir, il prévoit que la prochaine version majeure soit encore plus simple, améliore encore les performances et améliore l'infrastructure du plug-in.

Mise en œuvre

Voici à nouveau la même carte qu'auparavant, cette fois implémentée à l'aide de Leaflet.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div></div> <script type="text/javascript"> var map = L.map('map').setView([45.8167, 15.9833], 10); var mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'; L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7'}).addTo(map); var marker = L.marker([45.8167, 15.9833]).bindPopup("Zagreb").addTo(map); </script> </body> </html> 

Avantages

• Gratuit et open source.
• Petit et rapide.
• Syntaxe API simple et facile.
• Compatible avec les mobiles.
• Bon pour obtenir une carte en ligne rapidement et facilement.
• Beaucoup d'exemples avec une très bonne documentation.

Les inconvénients

• Manque de fonctionnalités avancées.

MapBox

Une startup nommée MapBox tente de révolutionner le marché cartographique en ligne, dans le but de créer des cartes en ligne plus esthétiques et plus polyvalentes. L'API JavaScript MapBox utilise Leaflet et est écrite sous la forme d'un plug-in Leaflet. Il étend les fonctionnalités de Leaflet et s'intègre à d'autres services Web MapBox, y compris l'hébergement MapBox pour les cartes et les ensembles de données personnalisés créés par l'utilisateur. Outre l'API JavaScript, MapBox inclut les services connectés suivants :

• SDK mobiles iOS et Android.
• Un ensemble de cartes préconçues.
• Cartes statiques pouvant être affichées sans avoir besoin d'une bibliothèque de cartes.
• Un service de géocodage.
• Un service d'orientation.

MapBox offre non seulement son service de cartographie, mais également l'accès aux données, y compris les images satellite acquises en privé, les données ouvertes de la NASA et les données mondiales communautaires d'OpenStreetMap. Le style des données est effectué à l'aide de CartoCSS, un format de style créé par MapBox, basé sur CSS et le cadre de style LESS. Bien que le service MapBox offre un niveau gratuit, il est limité en bande passante et en stockage, et pour toute utilisation sérieuse, le service doit être payant.

De nombreuses grandes entreprises ont reconnu les avantages de MapBox et l'utilisent sur leurs propres sites. Ils incluent Foursquare, Evernote, Pinterest, The Financial Times, GitHub et Etsy, pour n'en nommer que quelques-uns.

CartoCSS

Voici un exemple de carte MapBox élégante utilisant un style appelé Pirates , créé par les concepteurs de MapBox. Étant donné que MapBox s'exécute au-dessus de Leaflet, le code pour l'intégrer dans votre page Web serait similaire à l'exemple Leaflet ci-dessus :

Comme mentionné ci-dessus, CartoCSS est utilisé pour styliser les tuiles vectorielles dans MapBox. Cela se fait à l'aide de leur MapBox Studio, qui est également open source. Avec MapBox Studio, il est possible de créer vos propres styles de carte à partir de zéro, ou de modifier et d'étendre les styles existants créés par d'autres concepteurs. Une fois votre carte personnalisée téléchargée sur votre compte MapBox, vous pouvez l'intégrer sur votre site à l'aide de l'API MapBox.

Voici un exemple du CartoCSS utilisé pour obtenir la couche de base Pirates :

 @name: '[name_en]'; @name_arrr: "[name_en].replace('([Aa]r)','\1rr')"; @land: #fff8f0; @water: #cdd; @park: #cda; Map { background-color:@land; background-image:url(img/noise.png); } #admin[maritime=0][zoom>=3] { line-join: round; line-color: #478; comp-op:multiply; // Countries [admin_level=2] { line-cap:round; line-width: 0.8; [zoom>=6] { line-width: 2; } [zoom>=8] { line-width: 4; } [disputed=1] { line-dasharray: 4,4; line-cap:butt; } } // States / Provices / Subregions [admin_level>=3] { line-width: 0.4; line-dasharray: 10,3,3,3; [zoom>=6] { line-width: 1; } [zoom>=8] { line-width: 2; } [zoom>=12] { line-width: 3; } } } @water_line:lighten(@water,8); #water { ::b { polygon-pattern-file:url(img/water.png); polygon-pattern-alignment:global; } polygon-fill: mix(@water,#fff,50); polygon-gamma: 0.6; comp-op:multiply; a/line-color:@water_line; a/line-width:-0.4; a/line-comp-op:multiply; a/line-smooth:2; b/line-color:@water_line; b/line-width:-0.4; b/line-comp-op:multiply; b/line-smooth:4; c/line-color:@water_line; c/line-width:-0.4; c/line-comp-op:multiply; c/line-smooth:6; [zoom>=12] { a/line-width:0.8; b/line-width:0.8; c/line-width:0.8; } } #waterway { comp-op:multiply; [type='river'], [type='canal'] { line-color: @water; line-width: 0.5; [zoom>=12] { line-width: 1; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [type='stream'] { line-color: @water; line-width: 0.5; [zoom>=14] { line-width: 1; } [zoom>=16] { line-width: 2; } [zoom>=18] { line-width: 3; } } } #landuse { ::glow { comp-op:multiply; [class='park'],[class='pitch'],[class='school'] { line-width:2; line-join:round; [class='park'] { line-color:#ddb; } [class='pitch'] { line-color:#eed; } [class='school'] { line-color:#edb; } } } ::main[zoom>=0] { comp-op:multiply; [class='park'] { polygon-pattern-file:url(img/park.png); polygon-pattern-alignment:global; } [class='school'] { polygon-fill:#ed9; polygon-opacity:0.5; } } ::wood[class='wood'] { line-color:#C3CFB4; line-opacity:0.33; line-width:3; line-join:round; polygon-pattern-file:url(img/forest.png); polygon-pattern-alignment:global; comp-op:multiply; opacity:0.5; } } #building { polygon-fill:#efe8d8; comp-op:multiply; [zoom>=15] { line-color:#efe8d8 * 0.9; [zoom>=15] { line-width:0.2; } [zoom>=16] { line-width:0.4; } [zoom>=17] { line-width:0.8; } } } #tunnel { opacity: 0.5; } #road, #tunnel, #bridge { ['mapnik::geometry_type'=2] { line-width: 1; line-color:#edc; line-comp-op:multiply; [class='motorway'], [class='main'], [class='motorway_link']{ line-color:#dba; [zoom>=10] { line-width: 1; } [zoom>=12] { line-width: 2; } [zoom>=14] { line-width: 3; } [zoom>=16] { line-width: 5; } } [class='street'], [class='street_limited'] { [zoom>=13] { line-width: 1.4; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [class='street_limited'] { line-dasharray: 4,1; } [class='path'] { line-dasharray: 3,2; } } }

Arrgh, mon pote !

Jetez un œil à certains des autres styles MapBox prédéfinis ici.

Avantages

• Prolonge le dépliant.
• Grand référentiel d'images satellite détaillées et sans nuages.
• Données de terrain détaillées.
• De nombreux services connectés.
• Des cartes magnifiquement conçues prêtes à l'emploi.
• Interface graphique pour styliser et personnaliser les cartes existantes.

Les inconvénients

• Les goodies ne sont pas gratuits.
• La tarification est davantage basée sur le trafic que sur les fonctionnalités.

CartoDB

Pour une visualisation et une analyse de données géospatiales plus complexes, CartoDB est l'un des meilleurs outils disponibles. Il s'agit d'un service cloud qui stocke des données géographiques dans une base de données spatialement activée dans le cloud appelée PostGIS, fournissant des outils pour accéder aux données, les analyser à l'aide des pouvoirs spatiaux et de géolocalisation de PostGIS et les afficher à l'aide de Leaflet.

CartoDB a été créé en raison d'un manque d'alternatives pour faciliter la visualisation et le stockage des données géospatiales. Par conséquent, CartoDB peut être considéré comme une alternative aux Fusion Tables de Google. Les utilisateurs peuvent importer des ensembles de données dans divers formats, y compris des tableaux CSV, KML ou Excel, et les superposer sur des cartes provenant de sources courantes telles que Google, Here (Nokia) ou OpenStreetMap. Étant donné que toutes les géodonnées sont stockées dans une véritable base de données, les données peuvent être consultées et interrogées avec SQL, puis stylisées avec CSS.

Le service CartoDB est proposé en « freemium » ; les utilisateurs qui laissent leurs données ouvertes au public peuvent héberger gratuitement leurs projets sur le site CartoDB. Pour stocker des données privées, importer plus de 5 Mo de données ou utiliser plus de cinq tables, les utilisateurs doivent souscrire à un forfait premium.

GéoJSON

CartoDB est un outil de visualisation de données, il est donc utilisé un peu différemment des autres exemples d'outils de cartographie en ligne. Votre carte CartoDB visualisera automatiquement toutes les données qui ont des coordonnées géoréférencées sur la carte. Nous pouvons donc afficher une étiquette pour Zagreb en l'ajoutant simplement à notre base de données PostGIS. Voici un exemple formaté en GeoJSON :

 { "type": "FeatureCollection", "features": [ { "type":"Feature", "geometry": { "type":"Point", "coordinates":[15.9833,45.8167] }, "properties": { "cartodb_id":1, "name":"Zagreb", "description":null, "created_at":"2015-02-20T21:02:16Z", "updated_at":"2015-02-20T21:03:59Z" } } ] } 

Cependant, pour vraiment avoir une idée de ce dont CartoDB est capable, jetez un œil à leur galerie.

Avantages

• Idéal pour gérer et stocker des données géospatiales.
• Prend en charge de nombreux formats de données et de grands ensembles de données.
• Basé sur des produits open source éprouvés, tels que Leaflet et PostGIS.
• Modèle gratuit.

Les inconvénients

• Pas libre.
• La tarification est basée sur la taille des données stockées, ce qui peut coûter cher si de très grands ensembles de données sont utilisés.

Autres options pour les développeurs Web

Ce sont les cadres de cartographie les plus populaires actuellement disponibles, mais il existe d'autres options moins connues dans la nature. Si vous êtes lié à l'écosystème Microsoft, ils proposent une API similaire à Google Maps appelée Bing Maps API.

Et, nous ne pouvons pas passer sans mentionner un dinosaure dans le monde de la cartographie en ligne, MapQuest. Il existe toujours et propose les outils de cartographie MapQuest.

Si vous recherchez une approche légèrement différente de la création de cartes, Kartograph est intéressant car il a été créé en pensant aux besoins des concepteurs et des journalistes de données.

Styliser vos cartes

Tous ces cadres offrent un moyen de personnaliser le style et l'apparence de vos cartes. MapBox et CartoDB proposent un style utilisant CSS ou une variante de CSS.

Du côté de Google, la version 3 de l'API Google Maps a introduit des cartes personnalisées. Cela a finalement permis aux développeurs, en particulier aux concepteurs, de personnaliser davantage la conception par défaut de Google Maps, visible partout, et de l'aligner davantage sur le thème visuel général d'un site Web. Au sein de la riche communauté Google Maps, quelques ressources de style ont vu le jour. Le plus notable est Snazzy Maps, une communauté de personnes créant des styles personnalisés pour Google Maps et les partageant gratuitement.

Si vous avez décidé d'utiliser OpenLayers ou Leaflet, vous êtes limité aux tuiles de carte pré-rendues. Heureusement, il existe une gamme différente de tuiles de carte à choisir, allant de Google, Nokia, Bing ou des tuiles OSM par défaut, à celles spécialement créées par des concepteurs, tels que Stamen. Pour avoir une idée du nombre de tuiles de carte disponibles ou de leur apparence les unes par rapport aux autres, visitez les sites Streetmap Smackdown ou Map compare.

L'avenir des cartes Web et des outils de cartographie

L'avenir du monde de la cartographie s'annonce intéressant. Voici quelques technologies émergentes qui auraient ressemblé à de la science-fiction il y a seulement quelques années :

• Vector-Only - L'utilisation de cartes vectorielles au lieu d'images raster avec D3.js apporte un nouveau monde de fonctionnalités qui ne sont pas possibles avec les frameworks standard. MapBox va également dans ce sens, avec MapBox GL, basé sur OpenGL.
• 3D - Le terrain et les bâtiments en trois dimensions apparaissent désormais sur les cartes, et OpenLayers v3 est livré avec un support intégré pour Cesium.
• SIG et analyse spatiale dans le navigateur Web - Déjà possible avec Turf. Turf est une bibliothèque JavaScript qui prend en charge les opérations spatiales et statistiques, la classification des données et la création de données GeoJSON, le tout dans le navigateur.

Emballer

Chacun des meilleurs outils de cartographie en ligne répertoriés ici a ses forces et ses faiblesses. Par exemple, les exemples de code montrent la simplicité d'utilisation de Leaflet, par rapport à la complexité apportée par OpenLayers. Mais Leaflet ne résoudra pas vos problèmes spatiaux complexes là où OpenLayers le fera. Le choix se résume à vos besoins.

Résumer:

• Google Maps - Solution de cartographie bien arrondie et établie, en particulier pour les non-développeurs pour obtenir une carte de base sur le Web, ainsi que tous les pouvoirs pour lesquels Google est (in) célèbre.
• OpenLayers - Pour les situations où d'autres cadres de cartographie ne peuvent pas résoudre vos problèmes d'analyse spatiale.
• Brochure - Actuellement, facilement le meilleur cadre de cartographie à des fins de cartographie générale, surtout si vous n'avez pas besoin des services supplémentaires fournis par MapBox ou CartoDB.
• MapBox - Solution de cartographie à croissance rapide et en évolution du marché lorsque vous souhaitez plus de contrôle sur le style de la carte ou avez besoin de services que d'autres ne fournissent pas, tels que des images satellite détaillées, le géocodage ou les directions.
• CartoDB - Si vous avez des ensembles de données lourds, stockés dans différents formats de données, ne cherchez pas plus loin.

Lectures complémentaires sur le blog Toptal Engineering :

• Servir les clusters de cartes 50 fois plus rapidement grâce à une mise en cache plus intelligente