Leaflet.js é a biblioteca de mapas mais simples que você já encontrou
O Google Maps é certamente o mais popular Widget de mapa incorporável para web designers. Mas e sobre adicionando recursos personalizados como dicas de ferramentas e marcadores de pinos?
Isto é onde uma biblioteca incrível como Leaflet.js ajuda uma tonelada.
Isto é um projeto de código aberto completamente livre inicialmente criado por um dos caras da Mapbox chamado Vladimir Agafonkin. Desde então, o Leaflet cresceu para incluir dezenas de colaboradores ao redor do mundo.
É freqüentemente atualizado com correções de bugs e novos recursos que melhoram a implementação geral em qualquer site. Esta é de longe a minha biblioteca de mapeamento favorita por causa de sua pura força e estética de design.
Tem tantos recursos que eu não poderia listar todos eles, mas aqui estão os mais interessantes:
- Aceleração de hardware móvel
- Marcadores de alfinete, sobreposições de formas e dicas de ferramentas
- Zoom personalizado e animação panorâmica
- Nenhuma dependência de JS
- Suporte para todos os principais navegadores, incluindo o IE7+
A implementação é um pouco complicada porque você precisa insira coordenadas e definir quão grande o mapa deve ser.
Os usuários podem sempre Reduzir o zoom e panela ao redor, então a visão sempre pode mudar. Mas também é baseado em como você define o mapa na página.
Existe um enorme página de documentação cheio de informações para todos os aspectos do folheto. Infelizmente, é tão denso que não posso recomendar apenas mergulhar nele porque você provavelmente se perderá. Em vez disso, confira o Página de tutoriais de folheto que também inclui um Guia rápido para iniciantes.
Você vai aprender como incorporar mapas, alterar o tamanho / posição, e como adicione gráficos personalizados no topo, como círculos ou marcadores de pin.
Este guia de introdução pode te ensinar tudo que você precisa usar o folheto em um blog, site da empresa ou qualquer outro projeto.
Existem muitos motivos para usar o Google Maps: é poderoso, confiável e gratuito. Mas o folheto vem com muitos mais recursos fora da caixa e você só precisa adicione os arquivos CSS / JS à sua página da web para começar. Você pode até encontrar cópias hospedadas on-line se você preferir ir pela rota CDN.
Não deixe a documentação assustá-lo. Há muito que você pode aprender, mas nem todos os recursos são necessários para uma configuração básica do Leaflet.
E não é preciso muito para crie um mapa incrível do zero. Dê uma olhada neste demo Codepen criado usando o Leaflet.js e a API do Google Maps.
