13 bibliotecas JavaScript para criar mapas interativos e personalizados

Anteriormente, apresentamos o Google Map Maker e 10 outras ferramentas para ajudar você a criar mapas. No entanto, se você preferir usar bibliotecas Javascript, recebemos o post para você. Aqui estão as bibliotecas JS que você pode usar para mostrar marcadores de mapa especiais, desenhar linhas de rota personalizadas ou até mesmo mostrar um diálogo quando você passar o mouse ou clicar em certos pontos do mapa.

Personalize seus mapas no estilo que você quiser - alguns deles podem ser estilizados com CSS - ou personalize o seu mapa para ser tão interativo quanto você gosta. A fonte dos dados do mapa, dependências e licenças de cada biblioteca foi incluída para sua conveniência.

Mais sobre Hongkiat:

Como estilizar o Google Maps
Obtendo a localização do usuário com a API de geolocalização do HTML5
Visualização de dados: mais de 20 ferramentas e recursos úteis

GMaps

GMaps torna a adição e personalização do Google Maps uma tarefa fácil. Além de adicionar um mapa, você também pode incluir algumas coisas no mapa, como polilinhas, que podem ser úteis para desenhar uma rota, um controle de menu especial e até elementos HTML.

O GMaps é compatível com dados no formato JSON que você pode utilizar para integrar seu mapa a um aplicativo específico, como o Foursquare.

Fonte de dados do mapa: Google Maps
Dependências: Nenhum
Licença: Licença MIT

jHere

Aos 5KB, jHERE mostra que o tamanho não importa; você ainda pode criar um poderoso mapa interativo com várias opções de personalização. jHERE deriva a visualização de mapas do mapa HERE, que é um dos provedores de mapa mais populares para o Windows Phone.

A biblioteca pode ser estendida com novas funcionalidades, e há algumas extensões desenvolvidas para essa biblioteca, incluindo uma para adicionar formas, rotas e marcadores personalizados..

Fonte de dados do mapa: HERE Maps
Dependências: jQuery ou ZeptoJS
Licença: Licença MIT

Kartógrafo

Kartógrafo é composto por dois arquivos, Kartograph.ph para gerar o mapa no formato SVG e Kartograph.js para adicionar elementos interativos no topo do mapa. Como o Kartograph.js é construído sobre o Raphael.js, o mapa funcionaria bem no IE7. Você pode dar uma olhada nas demonstrações interativas do mapa para descobrir o que o Kartograph pode fazer.

Fonte de dados do mapaKartógrafo
Dependências: Kartograph.py, Raphael e jQuery
Licença: AGPL e LGPL

Mapael

jQuery Mapael permite criar mapas com visualização de dados elegante e interatividade. Você pode, por exemplo, criar um mapa e designar cada região no mapa com cores diferentes com base na região. Você também pode adicionar dicas de ferramenta na região, bem como manipuladores de eventos como clique ou flutuar.

O mapa foi criado pensando no SEO, fornecendo conteúdo alternativo para robôs de mecanismos de pesquisa que não são capazes de rastrear conteúdo gerado por JavaScript..

Fonte de dados do mapa: Raphael.js
Dependências: jQuery
Licença: Licença MIT

D3js

D3.js é uma biblioteca JavaScript abrangente que trará seus dados para a vida através de HTML, SVG e CSS. O uso de D3 é bastante variado, incluindo a construção de um mapa altamente interativo. Veja este mapa do World Bank Global Development e você verá as possibilidades do que você pode construir com o D3.js.

Fonte de dados do mapa: D3.js
Dependências: Nenhum
Licença: Indefinido

DataMaps

Se construir um mapa com D3.js for esmagador, você pode usar DataMaps. O DataMaps é essencialmente um plugin D3.js desenvolvido especialmente para construir mapas. Ele herda muitos dos recursos do D3.js, portanto você pode criar mapas simples ou muito personalizados com ele. Eu mencionei que o mapa é responsivo?

Fonte de dados do mapa: D3.js
Dependências: D3.js e TopoJSON
Licença: Licença MIT

GeoChart

O GeoChart é um mapa do Google simplificado que renderiza regiões, marcadores e texto, em vez de um mapa completo com pequenos detalhes. O mapa é gerado em SVG e pode ser personalizado de várias maneiras, incluindo a alteração das cores da região, a adição de marcadores de mapa pop-up e personalizados.

Fonte de dados do mapa: Google Maps
Dependências: Nenhum
Licença: Leia o Google Maps TOS

Maplace

Maplace, um plugin jQuery para gerar mapas através da API do Google Maps v3. O Maplace funciona em todos os navegadores, incluindo o IE6. Então este é outro grande plugin que vale a pena se você quiser construir o mapa da maneira mais fácil possível.

Fonte de dados do mapa: Google Maps
Dependências: jQuery
Licença: Licença MIT

Imponente

Stately é uma biblioteca JavaScript desenvolvida para gerar mapas dos EUA. A biblioteca é comparativamente leve, considerando que você pode adicionar elementos interativos sobre seus mapas gerados.

Fonte de dados do mapa: Imponente / SVG
Dependências: Nenhum
Licença: Licença MIT

GeoComplete

GeoComplete é uma biblioteca JavaScript distinta por conta própria. A biblioteca adicionará um campo de entrada junto com o mapa, que mostrará sugestões de cidades, países ou estados conforme você digita.

Fonte de dados do mapa: Google Maps
Dependências: jQuery
Licença: Licença MIT

Ferramentas de mapa

O Map Tools fornece uma API intuitiva para adicionar o Google Maps. Ele suporta o carregamento de dados JSON geo-formatados como TopoJSON e GeoJSON para renderizar o mapa. Além disso, você pode adicionar marcadores animados que, eu acho, deixarão o mapa mais animado, insira conteúdo HTML com variáveis ou espaços reservados, ala Guiador.

Fonte de dados do mapa: Google Maps
Dependências: GeoJSON / TopoJSON
Licença: Licença MIT

OpenLayers

OpenLayers é uma estrutura JavaScript de software livre de alto desempenho para criar mapas interativos usando vários serviços de mapeamento. Você pode escolher a origem da camada do mapa usando camada de mosaico ou camada vetorial de vários serviços de mapa.

O OpenLayer vem pronto para uso móvel, adequado para criar mapas em dispositivos e navegadores. Você pode usar CSS para uma aparência diferente do seu mapa. Para implementar o mapa na sua web usando o OpenLayers, aqui está um tutorial que ajudará.

Fonte de dados do mapa: OpenStreetMap
Dependências: Nenhum
Licença: Indefinido

Folheto

Desenvolvedores deram Folheto funções básicas para funcionar perfeitamente, mantendo seu tamanho pequeno, perfeito para dispositivos móveis. Para funções específicas, basta estender o Leaflet usando plugins. O folheto tem a maioria dos recursos de mapa on-line de que você precisa: camadas de mosaico, pop-up, marcadores e camadas de vetor livre, como polilinhas, polígonos, círculos ou retângulos. Ele vem com bons designs padrão, embora você possa personalizar o estilo usando CSS3 com facilidade.

O folheto tem mais recursos de interação de uso para navegadores móveis e de desktop.

Fonte de dados do mapa: OpenStreetMap
Dependências: Nenhum
Licença: Indefinido