Encuesta de las mejores herramientas de creación de mapas en línea para desarrolladores web: la hoja de ruta para las hojas de ruta

No hay nada como un mapa bueno y útil.

Hoy en día, usar mapas en línea es un proceso fácil y atractivo. Hacer sus propios mapas en línea ya no es una gran empresa; Tenemos a nuestra disposición una amplia gama de herramientas de mapeo en línea disponibles, desde gratuitas y simples hasta ricas en funciones y complejas de usar. Para los desarrolladores web que no están familiarizados con el mapeo web, la agonía de elegir puede ser intimidante. Quieres hacer mapas, pero no sabes por dónde empezar ni qué herramientas usar. Estoy aquí para ayudar con esta lista de las mejores herramientas de mapeo.

Un poquito de historia

Desde sus inicios, la tecnología ha influido en la elaboración de mapas y en cómo se utilizan los mapas. A medida que avanzaba la tecnología, la cartografía y los procesos de creación de mapas evolucionaron con ella, desde mapas dibujados manualmente en papiro hasta mapas interactivos en la web.

La segunda mitad del siglo XX fue un punto de inflexión para la cartografía. Las computadoras se convirtieron en una herramienta de elección. La fotografía aérea, las imágenes satelitales y la teledetección cambiaron la forma en que se recopilan los datos espaciales. Nacieron los Sistemas de Información Geográfica (SIG). Eventualmente, los mapas GIS comenzaron a pasar del escritorio a la web, y los grandes proveedores de GIS comenzaron a crear los primeros marcos para mapas en línea.

Pero el mapeo GIS no es fácil. Requiere muchas tecnologías del lado del servidor, estándares geoespaciales y protocolos, junto con sus implementaciones. Requiere comprender los datos geoespaciales y las proyecciones de mapas, saber cómo recopilar los datos, cómo mostrarlos, qué colores usar, cómo generalizar los datos a escalas específicas, cómo colocar etiquetas en el mapa, cómo configurar un servidor que servirá los mapas, cómo usar una base de datos espacial, etc. GIS está lleno de abreviaturas, como WMS, WFS, EPSG, CRS, SLD, GML, TMS, solo por nombrar algunas, y para conocerlas y comprenderlas, debe leer libros, trabajos académicos y artículos.

La evolución de la cartografía en línea

Los primeros mapas web generalmente mostraban solo una imagen de mapa muy pequeña. En ese momento, la panorámica se implementaba moviéndose un paso, generalmente la mitad del tamaño del mapa, en una de las ocho posibles direcciones de la brújula: N, NW, W, SW, S, SE, E, NE. Después de que el usuario hiciera clic en el botón de panorámica o de zoom, sería necesario representar una imagen completamente nueva en el servidor de mapas, cargarla a través de la red y luego procesarla en el navegador. Debido a las limitaciones de la tecnología, los mapas solo ocupaban una parte muy pequeña de toda la página web. Para obtener una mejor interacción, los primeros mapas requerían complementos como Flash o complementos de propiedad basados ​​en Java, o incluso ActiveX, que funcionaba solo en Internet Explorer.

Google puso patas arriba el mundo de los mapas cuando presentó Google Maps en 2005. Entre sus innovaciones, Google introdujo el desplazamiento panorámico continuo arrastrando. Su solución fue mostrar un mapa dividido en muchas imágenes cuadradas más pequeñas llamadas "mosaicos". Estos mosaicos se representaron y sirvieron desde un "servidor de mosaicos de mapas" y, por lo general, tienen 256 x 256 píxeles. El zoom y la panorámica ahora solo requerían cargar nuevos mosaicos de mapas en lugar de volver a cargar toda la página web. El resultado fue un mapa visible más grande que cubría más de la mitad de la ventana del navegador y ofrecía una experiencia fluida para explorar el mapa. Debido a la capacidad de "deslizar" el mapa con las funciones suaves de zoom y panorámica, estos nuevos mapas se denominaron "mapas deslizantes". Google también permitió la creación de secuencias de comandos, de modo que los usuarios pudieran colocar los mapas de Google en sus propios sitios web y agregar sus propios datos al mapa. Esto dio lugar a la acuñación de otro nuevo término: "Mezcla de mapas".

De repente, los mapas en línea se vuelven populares; para agregar un mapa atractivo a su sitio web, ya no necesita ser un cartógrafo o un especialista en GIS. En las alas del movimiento "Web 2.0", y basándose en tecnologías modernas como HTML5, CSS3 y SVG, que permiten una fácil creación de contenido interactivo, los mapas interactivos ahora están viviendo un nuevo renacimiento.

Datos del mapa

Como se mencionó anteriormente, los primeros mapas en línea se basaban en conjuntos de datos GIS y sus geodatabases espaciales. No muchas personas tenían acceso a esos datos, sin mencionar su precio. Google y los conjuntos de datos del proyecto OpenStreetMap (OSM) cambiaron eso. La base de datos de Google es privada y viene con restricciones, mientras que OSM se inspiró en el concepto de Wikipedia, como un proyecto colaborativo para crear un mapa del mundo libre. OpenStreetMap está construido por una comunidad de mapeadores voluntarios, que contribuyen y mantienen los datos espaciales.

En resumen, la mayor revolución que contribuyó hoy a la creación de mapas fácil es que se eliminó el problema relacionado con el mantenimiento de un servidor de mapas y la base de datos espacial.

Elección de un marco de mapeo web

Entonces, con todas las opciones, ¿cómo elegimos la herramienta de mapeo en línea adecuada? Por un lado, existen proveedores comerciales de mapas en línea como Google, MapQuest, Microsoft y Nokia. Estos servicios proporcionan mosaicos de mapas y API de JavaScript de propiedad para verlos e interactuar con un mapa. Por otro lado, existen proyectos de mapeo de código abierto que ofrecen una fácil carga de mosaicos de mapas basados ​​en OpenStreetMap. Estos incluyen OpenLayers y Leaflet. Y luego están proyectos como MapBox y CartoDB, que basan sus modelos de negocio en las bibliotecas de código abierto y los datos de OSM, y aportan valor añadido pero no son gratuitos.

Echemos un vistazo a algunos ejemplos de cada una de estas categorías. Aquí, discutiré varias de estas herramientas de mapeo en línea, brindando una breve descripción general de cada una, junto con ejemplos de código, y sopesando los pros y los contras. También escribimos un tutorial de asignación de D3.js que puede resultarle interesante como lectura independiente.

mapas de Google

Comencemos con la opción más obvia, Google Maps. La primera versión de la API de Google Maps se presentó en febrero de 2005 y la versión 3 actual de la API de Google Maps en junio de 2009. La API de Google Maps no es solo el punto final de la API de JavaScript; incluye más proyectos y ofrece varias formas diferentes de integrar Google Maps en páginas web con una amplia personalización.

Las API de Google Maps actualmente disponibles incluyen:

• API de JavaScript de Google Maps
• API de mapas estáticos de Google
• API de inserción de Google Maps
• SDK de Google Maps para iOS
• Google Maps API de Android v2

Para ayudarlo a elegir la API correcta, Google desarrolló un selector de API.

Vale la pena señalar que, si bien las API básicas son gratuitas, se imponen algunas limitaciones. La primera es que los mapas deben ser de acceso libre y público para los usuarios finales. En segundo lugar, las limitaciones de uso: el servicio es gratuito siempre que su sitio no genere más de 25 000 cargas de mapas por día, durante un período de 90 días. Si necesita escalas más grandes o quiere un mapa privado, o está ejecutando un sitio web comercial o empresarial, debería considerar pagar por Google Maps API for Work.

Implementación

Aquí hay un ejemplo de cómo implementar un mapa de Google simple en el código. Muestra cómo crear un mapa simple usando la API, colocar un marcador en el mapa y abrir una ventana emergente con un clic del mouse.

 <!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>

El mapa resultante se ve así:

ventajas

• Desarrollado y mantenido por Google.
• Muchas API diferentes para incluir un mapa en su sitio web o aplicación.
• Gran comunidad de usuarios.
• Muy buena documentación de API, con muchos ejemplos.

Contras

• ¿Estamos seguros de que no veremos anuncios en algún momento?
• Todo el mundo lo está usando; todos los mapas (en su mayoría) tienen el mismo aspecto.
• API cerrada y propia.
• No hay complementos además de los desarrollados oficialmente por Google.
• Precios poco claros para Google Maps for Work.

capas abiertas

OpenLayers fue desarrollado por MetaCarta como código abierto equivalente a Google Maps, y la primera versión se publicó en junio de 2006. OpenLayers es una herramienta de mapeo en línea que implementa una API de JavaScript para crear aplicaciones geográficas ricas basadas en la web, con una API similar a la API de mapas de Google. OpenLayers ganó mucha tracción muy rápido y el desarrollo al principio fue rápido. OpenLayers 2 se lanzó solo dos meses después de la versión 1, en agosto de 2006. La biblioteca estaba en constante desarrollo y constantemente se agregaban nuevas versiones con nuevas características. La desventaja de este rápido progreso fue que la biblioteca de la versión 2 se volvió muy grande y torpe, alcanzando finalmente 1 MB de tamaño y ¡conteniendo más de 100,000 líneas de código! Si bien venía con muchas funciones, los usuarios habituales no necesitaban todas.

Esta fue la razón principal de una reescritura completa de su biblioteca. El objetivo era apuntar a las características más recientes de HTML5 y CSS3, con la misma funcionalidad de OpenLayers 2, como soporte para proyecciones, protocolos estándar y funcionalidad de edición. El enfoque principal estaba en las mejoras de rendimiento, compilaciones más ligeras, componentes visuales más bonitos y una mejor API. Este OpenLayers 3 muy mejorado se publicó en agosto de 2014.

Implementación

Veamos cómo el mismo mapa que en el ejemplo anterior, esta vez usando 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>

Y el resultado:

ventajas

• Gratis y de código abierto.
• Biblioteca repleta de funciones para sus necesidades de mapeo.
• Muchos ejemplos.
• Compatibilidad con una variedad de tipos de datos y estándares GIS.
• Soporte integrado para proyecciones de mapas y funciones de edición.

Contras

• La versión 3 todavía está en desarrollo intenso y la API sigue cambiando con cada lanzamiento de punto.
• Sintaxis API complicada.
• La documentación de la versión 3 actualmente no es tan completa como podría ser.

Folleto

Es seguro decir que Leaflet nació como una reacción a la hinchazón, el desorden y la complejidad de OpenLayers. Se le pidió a Vladimir Agafonkin que construyera un envoltorio alrededor de OpenLayers, pero en su lugar creó una alternativa OpenLayers simple y liviana, y en mayo de 2011 nació Leaflet. Vladimir se centró en la simplicidad, el rendimiento y la usabilidad de esta herramienta de mapas en línea. La biblioteca principal solo tiene una funcionalidad básica, que es suficiente para la mayoría de los casos de uso de la vida real. Aún así, Leaflet se puede ampliar con una gran cantidad de complementos que son fáciles de desarrollar y agregar a la biblioteca principal. Además, Leaflet se desarrolló desde cero teniendo en cuenta la compatibilidad con dispositivos móviles.

Leaflet es fácil de usar y tiene una API bien documentada, junto con un código fuente simple que está disponible en GitHub. Como resultado de su enfoque en el rendimiento, la facilidad de uso, la simplicidad, el tamaño pequeño y la compatibilidad con dispositivos móviles, es significativamente menos complicado que OpenLayers.

El futuro de Leaflet también parece interesante. Según Vladimir, planea que el próximo lanzamiento importante sea aún más simple, mejore aún más el rendimiento y actualice la infraestructura de complementos.

Implementación

Aquí está el mismo mapa que antes, una vez más, esta vez implementado usando 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> 

ventajas

• Gratis y de código abierto.
• Pequeño y rápido.
• Sintaxis API simple y fácil.
• Compatible con dispositivos móviles.
• Bueno para obtener un mapa en línea de forma rápida y sencilla.
• Muchos ejemplos con muy buena documentación.

Contras

• Falta de funcionalidad avanzada.

MapBox

Una startup llamada MapBox está tratando de revolucionar el mercado cartográfico en línea, con el objetivo de crear mapas en línea más versátiles y de mejor apariencia. La API JavaScript de MapBox emplea Leaflet y está escrito como un complemento de Leaflet. Amplía la funcionalidad de Leaflet y se integra con otros servicios web de MapBox, incluido el alojamiento de MapBox para mapas y conjuntos de datos personalizados creados por el usuario. Además de la API de JavaScript, MapBox incluye los siguientes servicios conectados:

• SDK móviles para iOS y Android.
• Un conjunto de mapas prediseñados.
• Mapas estáticos que se pueden mostrar sin necesidad de una biblioteca de mapas.
• Un servicio de geocodificación.
• Un servicio de Direcciones.

MapBox ofrece no solo su servicio de mapas, sino también acceso a los datos, incluidas imágenes satelitales adquiridas de forma privada, datos abiertos de la NASA y datos mundiales impulsados ​​por la comunidad de OpenStreetMap. El estilo de datos se realiza utilizando CartoCSS, un formato de estilo creado por MapBox, basado en CSS y el marco de estilo LESS. Aunque el servicio MapBox ofrece un nivel gratuito, está limitado en ancho de banda y almacenamiento, y para cualquier uso serio, se debe pagar el servicio.

Muchas grandes empresas han reconocido los beneficios que brinda MapBox y lo están utilizando en sus propios sitios. Incluyen Foursquare, Evernote, Pinterest, The Financial Times, GitHub y Etsy, por nombrar algunos.

CartoCSS

Este es un ejemplo de un elegante mapa de MapBox que usa un estilo llamado Piratas , creado por los diseñadores de MapBox. Dado que MapBox se ejecuta sobre Leaflet, el código para incrustarlo en su página web sería similar al ejemplo de Leaflet anterior:

Como se mencionó anteriormente, CartoCSS se usa para diseñar mosaicos vectoriales en MapBox. Esto se hace usando MapBox Studio, que también es de código abierto. Con MapBox Studio, es posible crear sus propios estilos de mapa desde cero o cambiar y ampliar los estilos existentes creados por otros diseñadores. Una vez que su mapa personalizado se cargue en su cuenta de MapBox, puede incrustarlo en su sitio utilizando la API de MapBox.

La siguiente es una muestra del CartoCSS utilizado para obtener la capa base de 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, compañero!

Eche un vistazo a algunos de los otros estilos de MapBox prediseñados aquí.

ventajas

• Prolonga Folleto.
• Gran repositorio de imágenes satelitales detalladas y sin nubes.
• Datos detallados del terreno.
• Muchos servicios conectados.
• Mapas bellamente diseñados listos para usar.
• Interfaz gráfica para diseñar y personalizar mapas existentes.

Contras

• Las golosinas no son gratis.
• El precio se basa más en el tráfico que en las características.

CartoDB

Para visualización y análisis de datos geoespaciales más complejos, CartoDB es una de las mejores herramientas que existen. Es un servicio en la nube que almacena datos geográficos en una base de datos espacialmente habilitada en la nube llamada PostGIS, que proporciona herramientas para acceder a los datos, analizarlos usando los poderes de geolocalización y espacial de PostGIS y mostrarlos usando Leaflet.

CartoDB se creó como resultado de la falta de alternativas para facilitar la visualización y el almacenamiento de datos geoespaciales. En consecuencia, CartoDB puede considerarse una alternativa a las Fusion Tables de Google. Los usuarios pueden importar conjuntos de datos en varios formatos, incluidos CSV, KML o tablas de Excel, y colocarlos en capas sobre mapas de fuentes comunes como Google, Here (Nokia) u OpenStreetMap. Dado que todos los geodatos se almacenan en una base de datos real, se puede acceder a los datos y consultarlos con SQL, y luego diseñarlos con CSS.

El servicio CartoDB se ofrece como "freemium"; los usuarios que dejan sus datos abiertos al público pueden alojar sus proyectos en el sitio web de CartoDB de forma gratuita. Para almacenar datos privados, importar más de 5 MB de datos o usar más de cinco tablas, los usuarios deben suscribirse a un plan premium.

GeoJSON

CartoDB es una herramienta para la visualización de datos, por lo que se usa de manera un poco diferente a los otros ejemplos de herramientas de mapeo en línea. Su mapa CartoDB visualizará automáticamente cualquier dato que tenga coordenadas georreferenciadas en el mapa. Entonces podemos mostrar una etiqueta para Zagreb simplemente agregándola a nuestra base de datos PostGIS. Aquí hay un ejemplo formateado 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" } } ] } 

Sin embargo, para tener una idea real de lo que CartoDB es capaz de hacer, eche un vistazo a su galería.

ventajas

• Excelente para administrar y almacenar datos geoespaciales.
• Admite muchos formatos de datos y grandes conjuntos de datos.
• Basado en productos probados de código abierto, como Leaflet y PostGIS.
• Modelo freemium.

Contras

• No gratuito.
• El precio se basa en el tamaño de los datos almacenados, lo que puede resultar costoso si se utilizan conjuntos de datos muy grandes.

Otras opciones para desarrolladores web

Estos son los marcos de mapeo más populares actualmente disponibles, pero existen otras opciones menos conocidas en la naturaleza. Si está vinculado al ecosistema de Microsoft, ofrecen una API similar a Google Maps llamada API de Bing Maps.

Y no podemos dejar de mencionar un dinosaurio en el mundo de los mapas en línea, MapQuest. Todavía existe y ofrece MapQuest Mapping Tools.

Si está buscando un enfoque ligeramente diferente para la creación de mapas, Kartograph es interesante porque se creó teniendo en cuenta las necesidades de los diseñadores y periodistas de datos.

Estilo de sus mapas

Todos estos marcos ofrecen una forma de personalizar el estilo y la apariencia de sus mapas. MapBox y CartoDB ofrecen estilos usando CSS o una variación de CSS.

En el frente de Google, la versión 3 de la API de Google Maps introdujo mapas con estilos personalizados. Esto finalmente permitió a los desarrolladores, especialmente a los diseñadores, más espacio para personalizar el diseño predeterminado de Google Maps que se ve en todas partes y alinearlo más con el tema visual general de un sitio web. Dentro de la rica comunidad de Google Maps, han nacido algunos recursos de estilo. El más notable es Snazzy Maps, una comunidad de personas que crean estilos personalizados para Google Maps y los comparten de forma gratuita.

Si decidió optar por OpenLayers o Leaflet, entonces está limitado a mosaicos de mapas renderizados previamente. Afortunadamente, hay una gama diferente de mosaicos de mapas para elegir, desde Google, Nokia, Bing o mosaicos predeterminados de OSM, hasta aquellos especialmente creados por diseñadores, como Stamen. Para tener una idea de cuántos mosaicos de mapas disponibles existen, o cómo se ven comparados entre sí, visite los sitios de Streetmap Smackdown o Map compare.

El futuro de los mapas web y las herramientas cartográficas

El futuro del mundo de la cartografía parece interesante. Aquí hay algunas tecnologías emergentes que habrían parecido ciencia ficción hace solo unos años:

• Vector-Only : el uso de mapas vectoriales en lugar de imágenes rasterizadas con D3.js brinda un nuevo mundo de funciones que no son posibles con los marcos estándar. MapBox también se está moviendo en esta dirección, con MapBox GL, basado en OpenGL.
• 3D : el terreno y los edificios tridimensionales ahora se muestran en los mapas, y OpenLayers v3 se envía con soporte integrado para Cesium.
• GIS y análisis espacial en el navegador web : ya es posible con Turf. Turf es una biblioteca de JavaScript que admite operaciones espaciales y estadísticas, clasificación de datos y creación de datos GeoJSON, todo dentro del navegador.

Envolver

Cada una de las mejores herramientas de mapeo en línea enumeradas aquí tiene sus fortalezas y debilidades. Por ejemplo, los ejemplos de código muestran la simplicidad de usar Leaflet, frente a la complejidad que aporta OpenLayers. Pero Leaflet no resolverá sus complejos problemas espaciales donde lo hará OpenLayers. La elección se reduce a cuáles son sus necesidades.

Para resumir:

• Google Maps : solución de mapas establecida y completa, especialmente para que los no desarrolladores obtengan un mapa básico en la web, junto con todos los poderes por los que Google es (in)famoso.
• OpenLayers : para situaciones en las que otros marcos de mapeo no pueden resolver sus problemas de análisis espacial.
• Folleto : actualmente, fácilmente el mejor marco de mapeo para propósitos generales de mapeo, especialmente si no necesita los servicios adicionales que brindan MapBox o CartoDB.
• MapBox : una solución de mapeo de rápido crecimiento y que cambia el mercado para cuando desea tener más control sobre el estilo del mapa o necesita servicios que otros no brindan, como imágenes satelitales detalladas, geocodificación o direcciones.
• CartoDB : si tiene conjuntos de datos pesados, almacenados en diferentes formatos de datos, no busque más.

Lecturas adicionales en el blog de ingeniería de Toptal:

• Servir clústeres de mapas 50 veces más rápido con un almacenamiento en caché más inteligente