Marceloromeugoncalves/exemplo_leaflet.html

## exemplo_leaflet.html
<!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>
	<!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>