Pesquisa das melhores ferramentas de mapeamento online para desenvolvedores da Web: o roteiro para roteiros

Não há nada como um mapa bom e útil.

Hoje, usar mapas online é um processo fácil e envolvente. Fazer seus próprios mapas online não é mais uma grande tarefa; temos à nossa disposição uma ampla gama de ferramentas de mapeamento online disponíveis, desde gratuitas e simples, até ricas e complexas de usar. Para desenvolvedores web não familiarizados com mapeamento web, a agonia da escolha pode ser intimidante. Você quer fazer mapas, mas não sabe por onde começar nem quais ferramentas usar. Estou aqui para ajudar com esta lista das melhores ferramentas de mapeamento.

Um pouco de história

Desde o início, a tecnologia teve influência na criação de mapas e como os mapas são usados. À medida que a tecnologia avançava, os processos de cartografia e cartografia evoluíram com ela, desde mapas desenhados manualmente em papiro até mapas interativos na web.

A segunda metade do século 20 foi um ponto de virada para a cartografia. Os computadores tornaram-se uma ferramenta de escolha. A fotografia aérea, as imagens de satélite e o sensoriamento remoto mudaram a forma como os dados espaciais são coletados. Nasceram os Sistemas de Informação Geográfica (SIG). Eventualmente, os mapas GIS começaram a migrar do desktop para a web, e grandes fornecedores de GIS começaram a criar as primeiras estruturas para mapas online.

Mas o mapeamento GIS não é fácil. Requer muitas tecnologias do lado do servidor, padrões geoespaciais e protocolos, juntamente com suas implementações. Requer compreensão de dados geoespaciais e projeções de mapas, conhecimento de como coletar os dados, como exibir os dados, quais cores usar, como generalizar os dados para escalas específicas, como colocar rótulos no mapa, como configurar um servidor que servirá os mapas, como usar um banco de dados espacial, etc. O GIS está repleto de abreviações, como WMS, WFS, EPSG, CRS, SLD, GML, TMS, só para citar algumas, e para conhecê-las e compreendê-las é preciso ler livros, trabalhos acadêmicos e artigos.

A evolução do mapeamento online

Os primeiros mapas da web normalmente mostravam apenas uma única imagem de mapa muito pequena. Naquela época, o panning era implementado movendo um passo, geralmente pela metade do tamanho do mapa, em uma das oito direções possíveis da bússola - N, NW, W, SW, S, SE, E, NE. Depois que o usuário clicasse no botão de panorâmica ou zoom, uma imagem totalmente nova precisaria ser renderizada no servidor de mapas, carregada na rede e processada pelo navegador. Devido às limitações da tecnologia, os mapas ocupavam apenas uma parte muito pequena de toda a página da web. Para obter uma melhor interação, os primeiros mapas exigiam plugins como Flash ou plugins proprietários baseados em Java, ou mesmo ActiveX, que funcionavam apenas no Internet Explorer.

O Google virou o mundo do mapeamento de cabeça para baixo quando lançou o Google Maps em 2005. Entre suas inovações, o Google introduziu o movimento panorâmico contínuo arrastando. A solução deles foi exibir um mapa dividido em muitas imagens quadradas menores chamadas “ladrilhos”. Esses blocos foram renderizados e veiculados a partir de um "servidor de blocos de mapa" e geralmente têm 256 x 256 pixels. O zoom e a panorâmica agora exigiam apenas o carregamento de novos blocos de mapa em vez de recarregar toda a página da web. O resultado foi um mapa visível maior que cobriu mais da metade da janela do navegador e ofereceu uma experiência suave para explorar o mapa. Devido à capacidade de “deslizar” o mapa com as funções suaves de zoom e panorâmica, esses novos mapas foram chamados de “mapas deslizantes”. O Google também permitia scripts, para que os usuários pudessem colocar os mapas do Google em seus próprios sites e adicionar seus próprios dados ao mapa. Isso resultou em outro novo termo sendo cunhado: “Map mash-ups”.

De repente, os mapas online se tornaram populares; para adicionar um mapa bonito ao seu site, você não precisa mais ser um cartógrafo ou um especialista em GIS. Nas asas do movimento “Web 2.0” e construindo tecnologias modernas como HTML5, CSS3 e SVG, que permitem a criação fácil de conteúdo interativo, os mapas interativos estão vivendo um novo renascimento.

Dados do mapa

Como mencionado anteriormente, os primeiros mapas online eram baseados em conjuntos de dados GIS e seus geodatabases espaciais. Poucas pessoas tiveram acesso a esses dados, sem mencionar seu preço. O Google e os conjuntos de dados do projeto OpenStreetMap (OSM) mudaram isso. O banco de dados do Google é privado e vem com restrições, enquanto o OSM foi inspirado no conceito da Wikipedia, como um projeto colaborativo para criar um mapa-múndi gratuito. O OpenStreetMap é construído por uma comunidade de mapeadores voluntários, que contribuem e mantêm os dados espaciais.

Em suma, a maior revolução que contribuiu para a criação de mapas fácil hoje é que o problema relacionado à manutenção de um servidor de mapas e do banco de dados espacial foi removido.

Escolhendo uma estrutura de mapeamento da Web

Então, com todas as opções, como escolhemos a ferramenta de mapeamento online certa? Por um lado, existem provedores comerciais de mapas online como Google, MapQuest, Microsoft e Nokia. Esses serviços fornecem blocos de mapa e APIs JavaScript de propriedade para visualizá-los e interagir com um mapa. Por outro lado, existem projetos de mapeamento de código aberto que oferecem fácil carregamento de blocos de mapas baseados em OpenStreetMap. Estes incluem OpenLayers e Leaflet. E depois há projetos como MapBox e CartoDB, que baseiam seus modelos de negócios em bibliotecas de código aberto e dados OSM e fornecem valor agregado, mas não são gratuitos.

Vejamos alguns exemplos de cada uma dessas categorias. Aqui, discutirei várias dessas ferramentas de mapeamento online, fornecendo uma breve visão geral de cada uma, juntamente com exemplos de código e avaliando os prós e os contras. Também escrevemos um tutorial de mapeamento D3.js que você pode achar interessante como uma leitura separada.

Google Maps

Vamos começar com a escolha mais óbvia, o Google Maps. A primeira versão da API do Google Maps foi lançada em fevereiro de 2005 e a atual API do Google Maps v3 em junho de 2009. A API do Google Maps não é apenas o ponto de extremidade da API JavaScript; ele inclui mais projetos e oferece várias maneiras diferentes de incorporar o Google Maps em páginas da web com ampla personalização.

As APIs do Google Maps disponíveis atualmente incluem:

• API JavaScript do Google Maps
• API do Google Static Maps
• API de incorporação do Google Maps
• SDK do Google Maps para iOS
• API Android do Google Maps v2

Para ajudar você a escolher a API certa, o Google desenvolveu um seletor de API.

Vale a pena notar que, embora as APIs básicas sejam gratuitas, existem algumas limitações impostas. A primeira é que os mapas devem ser de acesso livre e público aos usuários finais. Em segundo lugar estão as limitações de uso: o serviço é gratuito desde que seu site não gere mais de 25.000 carregamentos de mapas por dia, em qualquer período de 90 dias. Se você precisar de escalas maiores ou quiser um mapa privado, ou se estiver executando um site empresarial ou comercial, considere pagar pela API do Google Maps for Work.

Implementação

Aqui está um exemplo de como implementar um mapa do Google simples no código. Ele mostra como criar um mapa simples usando a API, colocar um marcador no mapa e abrir um pop-up com um clique do 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>

O mapa resultante fica assim:

Prós

• Desenvolvido e mantido pelo Google.
• Muitas APIs diferentes para incluir um mapa em seu site ou aplicativo.
• Grande comunidade de usuários.
• Documentação de API muito boa, com muitos exemplos.

Contras

• Temos certeza de que não veremos adições em algum momento?
• Todo mundo está usando; todos os mapas (principalmente) parecem iguais.
• API fechada e proprietária.
• Nenhum plugin além dos desenvolvidos oficialmente pelo Google.
• Preços pouco claros para o Google Maps for Work.

OpenLayers

OpenLayers foi desenvolvido pela MetaCarta como um código aberto equivalente ao Google Maps, e a primeira versão foi publicada em junho de 2006. OpenLayers é uma ferramenta de mapeamento onling que implementa uma API JavaScript para construir aplicações geográficas ricas baseadas na web, com uma API semelhante à API do Google Maps. O OpenLayers ganhou muita tração muito rápido, e o desenvolvimento no início foi rápido. O OpenLayers 2 foi lançado apenas dois meses após a versão 1, em agosto de 2006. A biblioteca estava em constante desenvolvimento e novas versões com novos recursos eram constantemente adicionadas. A desvantagem desse rápido progresso foi que a biblioteca da versão 2 se tornou muito grande e desajeitada, chegando a 1 MB de tamanho e contendo mais de 100.000 linhas de código! Embora tenha muitos recursos, nem todos eram necessários para usuários regulares.

Esta foi a principal razão para uma reescrita abrangente de sua biblioteca. O objetivo era direcionar os recursos mais recentes de HTML5 e CSS3, com a mesma funcionalidade do OpenLayers 2, como suporte para projeções, protocolos padrão e funcionalidade de edição. O foco principal estava em melhorias de desempenho, construções mais leves, componentes visuais mais bonitos e uma API melhor. Este OpenLayers 3 muito melhorado foi publicado em agosto de 2014.

Implementação

Vamos ver como é o mesmo mapa do exemplo anterior, desta 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>

E o resultado:

Prós

• Gratuito e de código aberto.
• Biblioteca repleta de recursos para suas necessidades de mapeamento.
• Muitos exemplos.
• Suporte para uma variedade de tipos de dados e padrões GIS.
• Suporte integrado para projeções de mapas e recursos de edição.

Contras

• A versão 3 ainda está em desenvolvimento pesado e a API ainda está mudando a cada lançamento pontual.
• Sintaxe de API complicada.
• A documentação da versão 3 atualmente não é tão completa quanto poderia ser.

Folheto

É seguro dizer que o Leaflet nasceu como uma reação ao inchaço, desordem e complexidade do OpenLayers. Vladimir Agafonkin foi convidado a construir um wrapper em torno do OpenLayers, mas em vez disso ele criou uma alternativa simples e leve do OpenLayers e, em maio de 2011, o Leaflet nasceu. Vladimir focou na simplicidade, desempenho e usabilidade para esta ferramenta de mapas online. A biblioteca principal tem apenas a funcionalidade básica, o que é suficiente para a maioria dos casos de uso da vida real. Ainda assim, o Leaflet pode ser estendido com uma enorme quantidade de plugins que são fáceis de desenvolver e adicionar em cima da biblioteca principal. Além disso, o Leaflet foi desenvolvido do zero com o suporte móvel em mente.

O Leaflet é fácil de usar e possui uma API bem documentada, juntamente com um código-fonte simples que está disponível no GitHub. Como resultado de seu foco em desempenho, usabilidade, simplicidade, tamanho pequeno e suporte móvel, é significativamente menos complicado que o OpenLayers.

O futuro do Leaflet também parece interessante. De acordo com Vladimir, ele planeja que o próximo grande lançamento seja ainda mais simples, melhorando ainda mais o desempenho e atualizando a infraestrutura de plugins.

Implementação

Aqui está o mesmo mapa de antes mais uma vez, desta vez implementado usando o 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> 

Prós

• Gratuito e de código aberto.
• Pequeno e rápido.
• Sintaxe de API simples e fácil.
• Compatível com dispositivos móveis.
• Bom para obter um mapa online de forma rápida e fácil.
• Muitos exemplos com documentação muito boa.

Contras

• Falta de funcionalidade avançada.

MapBox

Uma startup chamada MapBox está tentando revolucionar o mercado cartográfico online, com o objetivo de construir mapas online mais bonitos e versáteis. A API JavaScript MapBox emprega Leaflet e é escrita como um plug-in Leaflet. Ele estende a funcionalidade do Leaflet e se integra a outros serviços da Web do MapBox, incluindo a hospedagem do MapBox para mapas e conjuntos de dados personalizados criados pelo usuário. Além da API JavaScript, MapBox inclui os seguintes serviços conectados:

• SDKs móveis para iOS e Android.
• Um conjunto de mapas pré-concebidos.
• Mapas estáticos que podem ser exibidos sem a necessidade de uma biblioteca de mapeamento.
• Um serviço de geocodificação.
• Um serviço de Direções.

MapBox oferece não apenas seu serviço de mapeamento, mas também acesso aos dados, incluindo imagens de satélite adquiridas de forma privada, dados abertos da NASA e dados mundiais orientados pela comunidade do OpenStreetMap. O estilo de dados é feito usando CartoCSS, um formato de estilo criado pelo MapBox, baseado em CSS e no framework de estilo LESS. Embora o serviço MapBox ofereça um nível gratuito, ele é limitado em largura de banda e armazenamento e, para qualquer uso sério, o serviço deve ser pago.

Muitas grandes empresas reconheceram os benefícios que o MapBox oferece e estão usando-o em seus próprios sites. Eles incluem Foursquare, Evernote, Pinterest, The Financial Times, GitHub e Etsy, para citar alguns.

CartoCSS

Aqui está um exemplo de um mapa MapBox liso usando um estilo chamado Pirates , criado pelos designers do MapBox. Como o MapBox é executado em cima do Leaflet, o código para incorporar isso em sua página da web seria semelhante ao exemplo do Leaflet acima:

Como mencionado acima, CartoCSS é usado para estilizar blocos vetoriais no MapBox. Isso é feito usando o MapBox Studio, que também é de código aberto. Com o MapBox Studio, é possível criar seus próprios estilos de mapa do zero, ou alterar e estender estilos existentes criados por outros designers. Depois que seu mapa personalizado for carregado em sua conta MapBox, você poderá incorporá-lo em seu site usando a API MapBox.

A seguir está uma amostra do CartoCSS usado para obter a camada 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; } } }

Argh, amigo!

Dê uma olhada em alguns dos outros estilos MapBox pré-projetados aqui.

Prós

• Estende o folheto.
• Grande repositório de imagens de satélite detalhadas e sem nuvens.
• Dados detalhados do terreno.
• Muitos serviços conectados.
• Mapas lindamente projetados fora da caixa.
• Interface gráfica para estilizar e personalizar mapas existentes.

Contras

• As guloseimas não são gratuitas.
• O preço é baseado mais no tráfego do que nos recursos.

CartoDB

Para visualização e análise de dados geoespaciais mais complexos, o CartoDB é uma das melhores ferramentas disponíveis. É um serviço em nuvem que armazena dados geográficos em um banco de dados espacialmente habilitado na nuvem chamado PostGIS, fornecendo ferramentas para acessar os dados, analisá-los usando os poderes espaciais e de geolocalização do PostGIS e exibi-los usando o Leaflet.

O CartoDB foi criado como resultado da falta de alternativas para fácil visualização e armazenamento de dados geoespaciais. Consequentemente, o CartoDB pode ser considerado uma alternativa às Fusion Tables do Google. Os usuários podem importar conjuntos de dados em vários formatos, incluindo tabelas CSV, KML ou Excel, e colocá-los em camadas sobre mapas de fontes comuns, como Google, Here (Nokia) ou OpenStreetMap. Como todos os geodados são armazenados em um banco de dados real, os dados podem ser acessados ​​e consultados com SQL e, em seguida, estilizados com CSS.

O serviço CartoDB é oferecido como “freemium”; os usuários que deixarem seus dados abertos ao público podem hospedar seus projetos no site do CartoDB gratuitamente. Para armazenar dados privados, importar mais de 5 MB de dados ou usar mais de cinco tabelas, os usuários devem assinar um plano premium.

GeoJSON

O CartoDB é uma ferramenta para visualização de dados, por isso é usado de forma um pouco diferente dos outros exemplos de ferramentas de mapeamento online. Seu mapa CartoDB irá visualizar automaticamente quaisquer dados que possuam coordenadas georreferenciadas no mapa. Assim, podemos mostrar um rótulo para Zagreb simplesmente adicionando-o ao nosso banco de dados PostGIS. Aqui está um exemplo formatado em 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" } } ] } 

No entanto, para realmente ter uma noção do que o CartoDB é capaz, dê uma olhada na galeria deles.

Prós

• Ótimo para gerenciar e armazenar dados geoespaciais.
• Suporta muitos formatos de dados e grandes conjuntos de dados.
• Baseado em produtos de código aberto comprovados, como Leaflet e PostGIS.
• Modelo freemium.

Contras

• Não grátis.
• O preço é baseado no tamanho dos dados armazenados, o que pode ficar caro se conjuntos de dados muito grandes forem usados.

Outras opções para desenvolvedores web

Essas são as estruturas de mapeamento mais populares atualmente disponíveis, mas existem outras opções menos conhecidas. Se você estiver vinculado ao ecossistema da Microsoft, eles oferecem uma API semelhante ao Google Maps chamada API do Bing Maps.

E não podemos deixar de mencionar um dinossauro no mundo do mapeamento online, o MapQuest. Ele ainda está por aí e oferece as Ferramentas de Mapeamento MapQuest.

Se você está procurando uma abordagem um pouco diferente para a criação de mapas, o Kartograph é interessante porque foi criado com as necessidades de designers e jornalistas de dados em mente.

Estilizando seus mapas

Todas essas estruturas oferecem uma maneira de personalizar o estilo e a aparência de seus mapas. MapBox e CartoDB oferecem estilo usando CSS ou uma variação de CSS.

Na frente do Google, a versão 3 da API do Google Maps introduziu mapas com estilo personalizado. Isso finalmente permitiu aos desenvolvedores, especialmente designers, mais espaço para personalizar o design padrão do Google Maps visto em todos os lugares e alinhá-lo mais ao tema visual geral de um site. Dentro da rica comunidade do Google Maps, nasceram alguns recursos de estilo. O mais notável é o Snazzy Maps, uma comunidade de pessoas que criam estilos personalizados para o Google Maps e os compartilham gratuitamente.

Se você decidiu ir com OpenLayers ou Leaflet, então você está limitado a blocos de mapas pré-renderizados. Felizmente, há uma variedade diferente de blocos de mapa para escolher, desde Google, Nokia, Bing ou blocos OSM padrão, até aqueles especialmente criados por designers, como Stamen. Para ter uma ideia de quantos blocos de mapas disponíveis existem, ou como eles se parecem, visite os sites Streetmap Smackdown ou Map compare.

O futuro dos mapas da Web e das ferramentas de mapeamento

O futuro do mundo do mapeamento parece interessante. Aqui estão algumas tecnologias emergentes que teriam parecido ficção científica apenas alguns anos atrás:

• Vector-Only - Usar mapas vetoriais em vez de imagens raster com D3.js traz um novo mundo de recursos que não são possíveis usando estruturas padrão. O MapBox também caminha nessa direção, com o MapBox GL, baseado em OpenGL.
• 3D - Terrenos e construções tridimensionais agora estão aparecendo em mapas, e o OpenLayers v3 vem com suporte integrado para césio.
• GIS e análise espacial no navegador da web - Já é possível usando o Turf. Turf é uma biblioteca JavaScript que suporta operações espaciais e estatísticas, classificação de dados e criação de dados GeoJSON, tudo dentro do navegador.

Embrulhar

Cada uma das melhores ferramentas de mapeamento online listadas aqui tem seus pontos fortes e fracos. Por exemplo, os exemplos de código mostram a simplicidade de usar o Leaflet, versus a complexidade que o OpenLayers traz. Mas o Leaflet não resolverá seus problemas espaciais complexos como o OpenLayers. A escolha se resume a quais são suas necessidades.

Para resumir:

• Google Maps - Solução de mapeamento bem estruturada e estabelecida, especialmente para não desenvolvedores obterem um mapa básico na web, juntamente com todos os poderes pelos quais o Google é (in)famoso.
• OpenLayers - Para situações em que outras estruturas de mapeamento não podem resolver seus problemas de análise espacial.
• Leaflet - Atualmente, facilmente o melhor framework de mapeamento para propósitos gerais de mapeamento, especialmente se você não precisar dos serviços adicionais que MapBox ou CartoDB fornecem.
• MapBox - Solução de mapeamento de rápido crescimento e mudança de mercado para quando você deseja mais controle sobre o estilo do mapa ou precisa de serviços que outros não estão fornecendo, como imagens detalhadas de satélite, geocodificação ou direções.
• CartoDB - Se você possui conjuntos de dados pesados, armazenados em diferentes formatos de dados, não procure mais.

Leitura adicional no Blog da Toptal Engineering:

• Sirva clusters de mapas 50x mais rápido usando um cache mais inteligente