-
-
Save Marceloromeugoncalves/aaeb80835a41071960894a01b55cd4ef to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>My Folium Map</title> | |
| <!-- Importa o arquivo CSS do Leaflet --> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> | |
| <!-- Importa o arquivo JavaScript do Leaflet --> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> | |
| <style> | |
| /* Define estilos para o mapa */ | |
| #map { | |
| height: 500px; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>My Folium Map</h2> | |
| <!-- Elemento div onde o mapa será mostrado --> | |
| <div id="map"></div> | |
| <!-- Inclui a biblioteca jQuery --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> | |
| <script> | |
| function createMap(mapId, latitude, longitude, zoom) { | |
| let initialCoordinates = [latitude, longitude]; | |
| let map = L.map(mapId).setView(initialCoordinates, zoom); | |
| return map; | |
| } | |
| function addTileLayer(map) { | |
| const tileLayer = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; | |
| const attribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'; | |
| const options = { attribution: attribution }; | |
| L.tileLayer(tileLayer, options).addTo(map); | |
| } | |
| function addMarker(map, latitude, longitude, message) { | |
| let markerCoordinates = [latitude, longitude]; | |
| L.marker(markerCoordinates).addTo(map).bindPopup(message).openPopup(); | |
| } | |
| $(document).ready(function() { | |
| let map = createMap('map', 51.505, -0.09, 13); | |
| addTileLayer(map); | |
| addMarker(map, 51.5, -0.09, 'Teste'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Resultado
Leaflet
O Leaflet é uma biblioteca de mapeamento interativo em JavaScript amplamente utilizada para criar mapas interativos em aplicações web. Ele fornece uma maneira simples e flexível de exibir mapas interativos em páginas da web, oferecendo uma variedade de recursos poderosos para visualização de dados geoespaciais.
Aqui estão alguns pontos importantes sobre o Leaflet:
-
Leve e Flexível: O Leaflet é uma biblioteca leve, com cerca de 38 KB minificado e comprimido. Isso o torna rápido para carregar e adequado para uso em uma variedade de dispositivos, incluindo desktops, tablets e smartphones. Além disso, o Leaflet é altamente flexível e pode ser estendido com plugins para adicionar funcionalidades adicionais conforme necessário.
-
Facilidade de Uso: Uma das maiores vantagens do Leaflet é sua facilidade de uso. Ele possui uma API simples e intuitiva que permite criar e personalizar mapas com facilidade. Mesmo aqueles com pouca experiência em programação podem começar a criar mapas interativos em pouco tempo.
-
Suporte a Múltiplos Fornecedores de Mapas: O Leaflet suporta vários provedores de mapas, incluindo OpenStreetMap, Mapbox, Esri, Google Maps e muitos outros. Isso permite que os desenvolvedores escolham o provedor de mapa que melhor se adapta às suas necessidades, seja gratuito ou baseado em assinatura.
-
Funcionalidades Avançadas: Embora seja simples de usar, o Leaflet oferece uma variedade de funcionalidades avançadas, como camadas de blocos personalizadas, marcadores interativos, polígonos, linhas, popups, controle de zoom, eventos de interação do usuário e muito mais. Ele também suporta mapas de satélite, mapas topográficos e mapas de calor.
-
Comunidade Ativa: O Leaflet possui uma comunidade de desenvolvedores ativos que contribuem com plugins, tutoriais e suporte. Isso significa que há uma abundância de recursos disponíveis para ajudar os desenvolvedores a resolver problemas e estender a funcionalidade do Leaflet conforme necessário.
-
Licença de Código Aberto: O Leaflet é distribuído sob a licença BSD de código aberto, o que significa que é livre para uso e pode ser modificado e redistribuído de acordo com os termos da licença. Isso o torna uma escolha popular para uma ampla variedade de projetos, desde pequenos sites até aplicativos empresariais de grande escala.
Em resumo, o Leaflet é uma poderosa e acessível biblioteca de mapeamento que permite aos desenvolvedores criar mapas interativos e visualizações de dados geoespaciais em páginas da web com facilidade e flexibilidade. Sua simplicidade de uso, suporte a múltiplos fornecedores de mapas e comunidade ativa o tornam uma escolha popular entre os desenvolvedores que buscam incorporar mapas em seus projetos web.
Coordenadas Geográficas
As coordenadas geográficas são um sistema de referência utilizado para localizar pontos específicos na superfície da Terra. Elas são fundamentais para a cartografia, navegação, geografia e muitas outras áreas relacionadas à localização e mapeamento.
Existem dois tipos principais de coordenadas geográficas:
-
Latitude:
- A latitude é a medida angular que descreve a distância de um ponto em relação à linha do equador, medida em graus para o norte ou sul. O equador é considerado o ponto de referência, e a latitude varia de 0° no equador até 90° nos polos norte e sul.
- A latitude norte é representada como um valor positivo, enquanto a latitude sul é representada como um valor negativo. Por exemplo, a cidade de São Paulo, Brasil, está aproximadamente à latitude 23°S.
-
Longitude:
- A longitude é a medida angular que descreve a distância de um ponto em relação ao meridiano de Greenwich, medida em graus para o leste ou oeste. O meridiano de Greenwich, localizado em Londres, Inglaterra, é considerado o meridiano principal de referência e possui uma longitude de 0°.
- A longitude leste é representada como um valor positivo, enquanto a longitude oeste é representada como um valor negativo. Por exemplo, a cidade de Tóquio, Japão, está aproximadamente à longitude 139°E.
As coordenadas geográficas são frequentemente expressas em graus decimais, onde minutos e segundos são convertidos em frações de graus. Por exemplo, a localização da Estátua da Liberdade em Nova York é aproximadamente 40.6892° de latitude norte e -74.0445° de longitude oeste.
As coordenadas geográficas são essenciais para identificar a posição de lugares específicos no planeta Terra e são amplamente utilizadas em sistemas de posicionamento global (GPS), mapas, navegação marítima e aérea, geolocalização em dispositivos móveis, planejamento urbano, estudos ambientais e muito mais.
Em resumo, as coordenadas geográficas fornecem um sistema de referência universalmente reconhecido para localizar pontos na Terra, permitindo uma comunicação precisa e uma compreensão clara da localização de lugares e eventos em nosso planeta.
O código HTML e JavaScript acima cria uma página web que exibe um mapa interativo usando a biblioteca Leaflet. Vou explicar cada parte do código:
<!DOCTYPE html>,<html>,<head>,<title>: Essas são as tags HTML padrão que definem a estrutura básica de um documento HTML. O título da página é definido como "My Folium Map".Links para o CSS e JavaScript do Leaflet: Esses links importam os arquivos CSS e JavaScript necessários da biblioteca Leaflet para renderizar o mapa.
#map { height: 500px; width: 100%; }: Define estilos CSS para o elemento<div>com o ID "map", especificando sua altura como 500 pixels e largura como 100% da largura disponível.<h2>My Folium Map</h2>: Título secundário exibido na página.<div id="map"></div>: Define um contêiner onde o mapa será exibido. Este elemento tem o ID "map".<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>: Inclui a biblioteca jQuery, necessária para manipulação de eventos e DOM no JavaScript.Funções JavaScript:
createMap(mapId, latitude, longitude, zoom): Esta função cria um mapa Leaflet com base no ID do elemento, coordenadas iniciais de latitude e longitude, e nível de zoom.addTileLayer(map): Adiciona uma camada de blocos (tiles) ao mapa usando a fonte de mapa do OpenStreetMap.addMarker(map, latitude, longitude, message): Adiciona um marcador ao mapa nas coordenadas fornecidas, exibindo uma mensagem quando clicado.$(document).ready(function() { ... });: Esta é uma função jQuery que espera até que o documento HTML esteja totalmente carregado antes de executar o código interno. Dentro desta função, o mapa é criado usando as funções definidas anteriormente, e um marcador é adicionado ao mapa para demonstração.No geral, o código organiza a criação e personalização de um mapa Leaflet de forma modular e legível, tornando-o fácil de entender e manter.