Skip to content

Instantly share code, notes, and snippets.

@Marceloromeugoncalves
Created February 20, 2024 11:27
Show Gist options
  • Save Marceloromeugoncalves/aaeb80835a41071960894a01b55cd4ef to your computer and use it in GitHub Desktop.
Save Marceloromeugoncalves/aaeb80835a41071960894a01b55cd4ef to your computer and use it in GitHub Desktop.
Exemplo Leaflet.
<!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 = '&copy; <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>
@Marceloromeugoncalves
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment