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 grande entreprise; nous avons à notre disposition une large gamme d'outils de cartographie en ligne disponibles, du simple et gratuit à l'utilisation riche et complexe. Pour développeurs web pas familier avec la cartographie Web, l'agonie du choix peut être intimidante. Vous souhaitez créer 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 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, des cartes dessinées manuellement sur papyrus aux cartes interactives sur le Web.

Cartographie dans le passé.

La seconde moitié du XXe siècle a été un tournant pour la cartographie. Les ordinateurs sont devenus 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. Systèmes d'information géographique (GIS) sont 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 cadres pour les cartes en ligne.

Mais la cartographie SIG n'est pas facile. Cela nécessite de nombreuses technologies côté serveur, normes géospatiales et protocoles, ainsi que leurs implémentations. Il faut comprendre les données géospatiales et les projections cartographiques, savoir comment collecter 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 très petite image de carte. À cette époque, le panoramique était mis en œuvre en déplaçant d'un pas, 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 tels que 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 en introduisant Google Maps en 2005. Parmi ses innovations, Google a introduit le panoramique continu par glisser-déposer. Leur solution était d'afficher une carte découpée en plusieurs petites images carrées appelées «tuiles». Ces tuiles ont été rendues et servies à 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 désormais 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é la création de scripts, afin que les utilisateurs puissent placer 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 nouveau terme: «Mash-ups de cartes».

Soudainement, les cartes en ligne deviennent populaires; pour ajouter une jolie 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 s'appuyant sur des technologies modernes comme HTML5, CSS3 et SVG, qui permettent de créer facilement du contenu interactif, les cartes interactives vivent désormais une nouvelle renaissance.

Cartographie dans le futur?

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 leur géodatabases . Peu de gens avaient accès à ces données, sans parler de leur prix. Google et le OpenStreetMap (OSM) a changé cela. La base de données de Google est privée et comprend restrictions , tandis que OSM s'est inspiré du concept de Wikipedia, 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 création de cartes facile aujourd'hui est que le problème lié à la maintenance d'un serveur de carte et de la base de données spatiale a été supprimé.

Choisir un cadre de cartographie Web

Alors, avec toutes les options, comment choisir le bon outil de cartographie en ligne? D'une part, il existe des fournisseurs de cartes en ligne commerciaux comme Google, MapQuest, Microsoft et Nokia. Ces services fournissent des tuiles cartographiques 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 de 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.

Jetons un coup d'œil à 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 les avantages et les inconvénients. Nous avons également écrit un Tutoriel de cartographie D3.js que vous pourriez trouver intéressant en 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é introduite 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 propose plusieurs façons différentes d'intégrer Google Maps dans des pages Web avec une personnalisation étendue.

Les API Google Maps actuellement disponibles comprennent:

• API Javascript de Google Maps
• API Google Static Maps
• 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 est à noter que si les API de base sont gratuites, certaines limitations sont imposées. Le premier est que les cartes doivent être librement et publiquement accessibles aux utilisateurs finaux . Deuxièmement, les limitations d'utilisation: le service est gratuit tant que votre site ne génère pas plus de 25 000 chargements de cartes chaque jour, sur une période de 90 jours . Si vous avez besoin de plus grandes échelles ou souhaitez une carte privée, ou si vous gérez un site Web d'entreprise ou commercial, vous devriez envisager de payer pour API Google Maps for Work .

la mise en oeuvre

Voici un exemple de mise en œuvre 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 avec un clic de souris.

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));

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 API, avec de nombreux exemples.

Les inconvénients

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

OpenLayers

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 unique qui implémente une API JavaScript pour créer des applications géographiques Web riches, avec une API similaire à l'API Google Maps. OpenLayers a gagné beaucoup de terrain 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 ces progrès rapides était que la bibliothèque de la version 2 est devenue très grande et maladroite, atteignant finalement 1 Mo et contenant plus de 100 000 lignes de code! Bien qu'il soit livré avec de nombreuses fonctionnalités, toutes n'étaient pas nécessaires aux utilisateurs réguliers.

C'était la raison principale pour 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 principalement mis sur l'amélioration des performances, des versions plus légères, des composants visuels plus jolis et une meilleure API. Cette OpenLayers 3 largement amélioré a été publié en août 2014.

la mise en oeuvre

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

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' : ''; });

Et le résultat:

comment c++

Avantages

• Gratuit et open source.
• Bibliothèque riche en fonctionnalités pour vos besoins de cartographie.
• De nombreux 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 fonctionnalités d'édition.

Les inconvénients

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

Brochure

Il est sûr de dire que Brochure est né en réaction au ballonnement, au désordre et à la complexité d'OpenLayers. Vladimir Agafonkin a été invité à construire un wrapper autour d'OpenLayers, mais il a plutôt créé une alternative OpenLayers simple et légère, et en mai 2011 Leaflet est né. Vladimir s'est concentré sur la simplicité, les performances 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. Néanmoins, 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 le support mobile à l'esprit.

Leaflet est facile à utiliser et dispose d'une API bien documentée, ainsi que d'un code source simple disponible sur GitHub . En raison de sa concentration sur les performances, la convivialité, la simplicité, la petite taille et la prise en charge mobile, il est nettement moins compliqué que OpenLayers.

L’avenir de Leaflet semble également intéressant. Selon Vladimir, il prévoit la prochaine version majeure de être encore plus simple , l'amélioration des performances et la mise à niveau de l'infrastructure du plugin.

la mise en oeuvre

Voici à nouveau la même carte qu'avant, cette fois mise en œuvre à l'aide de Leaflet.

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);

Avantages

• Gratuit et open source.
• Petit et rapide.
• Syntaxe API simple et facile.
• Compatible mobile.
• Idéal 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é de la cartographie en ligne, dans le but de créer des cartes en ligne plus esthétiques et plus polyvalentes. La API JavaScript MapBox utilise Leaflet et est écrit comme un plugin Leaflet. Il étend les fonctionnalités du dépliant et s'intègre à d'autres Services Web MapBox , y compris l'hébergement MapBox pour les cartes et ensembles de données personnalisés créés par l'utilisateur. Outre l'API JavaScript, MapBox comprend les services connectés suivants:

• Mobile iOS et Android SDK.
• Un ensemble de Plans .
• Cartes statiques qui peut être affiché sans avoir besoin d'une bibliothèque de cartographie.
• À Service de géocodage .
• À Service d'orientation .

MapBox offre non seulement son service de cartographie, mais aussi un accès aux données, y compris des images satellites acquises en privé, des données ouvertes de la NASA et des données mondiales gérées par la communauté d'OpenStreetMap. Le style des données se fait à l'aide de CartoCSS , un format de style créé par MapBox, basé sur CSS et le framework 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 payé.

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 lisse utilisant un style appelé Les pirates , créé par les concepteurs de MapBox. Puisque 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. Ceci est fait en utilisant leur MapBox Studio , qui est aussi 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 à votre site à l'aide de l'API MapBox.

Voici un exemple de CartoCSS utilisé pour obtenir le Les pirates couche de base:

@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

• Étend le dépliant.
• Grand référentiel d'images satellites détaillées et sans nuages.
• Données de terrain détaillées.
• De nombreux services connectés.
• 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.
• Tarification repose davantage 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 les données géographiques dans une base de données spatiale 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 la visualisation et le stockage faciles des données géospatiales. Par conséquent, CartoDB peut être considéré comme une alternative à Tables de fusion 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, Ici (Nokia) ou OpenStreetMap. Étant donné que toutes les géodonnées sont stockées dans une base de données réelle, les données peuvent être consultées et interrogées avec SQL, puis stylisées avec CSS.

Le service CartoDB est proposé en tant que «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 s'abonner à un plan premium .

GeoJSON

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 Freemium.

Les inconvénients

• Pas libre.
• Tarification est basé sur la taille des données stockées, qui peut devenir coûteuse 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 API Bing Maps .

Et, nous ne pouvons pas aller sans mentionner un dinosaure dans le monde de la cartographie en ligne, MapQuest. Il est toujours là et offre Outils de cartographie MapQuest .

Si vous recherchez une approche légèrement différente de la création de cartes, Cartographe est intéressant car il a été créé en pensant aux besoins des designers 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.

Sur le front de Google, la version 3 de l'API Google Maps a été introduite cartes personnalisées . Cela a enfin permis aux développeurs, en particulier aux concepteurs, de disposer de plus d'espace pour personnaliser la conception Google Maps par défaut vue 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 Cartes Snazzy , 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 des tuiles Google, Nokia, Bing ou OSM par défaut, à celles spécialement créées par les concepteurs, telles que Étamine . Pour avoir une idée du nombre de tuiles de carte disponibles ou de leur apparence par rapport aux autres, visitez le Plan de rue Smackdown ou Comparaison de carte des sites.

L'avenir des cartes Web et des outils de cartographie

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

• Vecteur uniquement - 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 des frameworks standard. MapBox évolue également dans cette direction, avec MapBox GL , basé sur OpenGL.
• 3D - Le terrain et les bâtiments en trois dimensions apparaissent maintenant sur les cartes, et OpenLayers v3 est livré avec un support intégré pour Césium .
• SIG et analyse spatiale dans le navigateur Web - Déjà possible en utilisant Gazon . 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é qu'apporte OpenLayers. Mais Leaflet ne résoudra pas vos problèmes spatiaux complexes comme OpenLayers. Le choix dépend de vos besoins.

Résumer:

• Google Maps - Solution de cartographie bien équilibrée 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, en particulier si vous n'avez pas besoin des services supplémentaires fournis par MapBox ou CartoDB.
• MapBox - Solution de cartographie à croissance rapide et changeante pour le marché lorsque vous voulez 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 des 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.