1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
| <div id="map">
<!-- Ici s'affichera la carte -->
</div>
<!-- Fichiers Javascript -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script>
// On initialise la latitude et la longitude de Paris (centre de la carte)
var lat = 48.837579;
var lon = -1.597302;
var macarte = null;
// Fonction d'initialisation de la carte
function initMap()
{
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, lon], 11);
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
{
// Il est toujours bien de laisser le lien vers la source des données
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
}
window.onload = function()
{
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
initMap();
};
// Fonction d'initialisation de la carte
function initMap()
{
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, lon], 11);
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
{
// Il est toujours bien de laisser le lien vers la source des données
attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
function requeteAjax()
{
console.log("requeteAjax");
let id =document.getElementById("valeur").value;
if (id == "")
{
console.log("Champs pas rempli !");
}
else
{
let xmlhttp = new XMLHttpRequest();
ajax.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
console.log(this.responseText);
//On traite les données reçues
var data=JSON.parse(this.responseText)
// On boucle sur les données (ES8)
Object.entries(donnees.agence).forEach(agence =>
{
// Ici on a un j'ai une seule agence
console.log(donnees.agences)
// On crée un marqueur pour un boitier
let marker = L.marker([agence [1].lat, agence [1].lon]).addTo(macarte)
})
}
else
{
console.log(this.statusText);
}
//document.getElementById("lat").innerHTML=data["Latitude"];
//document.getElementById("lon").innerHTML=data["Longitude"];
}
}
};
/*// Nous ajoutons un marqueur
var marqueur = L.marker([lat, lon]).addTo(macarte);
//marqueur.bindPopup("<p>Paris</p>");*/
}
</script> |
Partager