<!DOCTYPE html> <html> <head> <title>Oracle de Delfos</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/styles.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <!-- Make sure you put this AFTER Leaflet's CSS --> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> </head> <body> <h1><a href="https://ca.wikipedia.org/wiki/Oracle_de_Delfos">Oracle de Delfos</a></h1> <br> <h2>Cartes de navegaci&oacute;</h2> <div id="mapid"></div> <script type="text/javascript"> var mymap = L.map('mapid').setView([41.27551, 1.98721], 17); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoicHJldmVvIiwiYSI6ImNrYzllNmszeTEzc2cycHBobDNzNGV4N3gifQ.uRNLcGUqU8fjF4XZXt06Ew' }).addTo(mymap); var markerEETAC = L.marker([41.27551, 1.98721]).addTo(mymap); markerEETAC.bindPopup("<b>Hola pitonisos... estem a l'EETAC!").openPopup(); var markerEstany = L.marker([41.273343, 1.983998]).addTo(mymap); markerEstany.bindPopup("<b>Vigila amb les sirenes i les tortugues americanes!!!!"); // function onMapClick(e) { // alert("You clicked the map at " + e.latlng); // } // mymap.on('click', onMapClick); </script> </body> </html>