Creer une carte personnalisé

Par Ly Lí Utahime, il y a 6 ans

Javascript

Bonjour,

Je débute en javaScript et je dois créer une carte intérative. Je dispose donc d'une clé API et j'utlise openstreetmap avec les tuiles leaflet. J'ai bien compris coment l'intégrer créer des marqueurs mais quand je veux entrer ma clé API, la console me note une erreur de la fonction callback qui ne serait pas définie.
J'ai un fichier html, le fichier ajax et le fichier carte.

Merci d'avance pour votre aide et explication. ;)

le fichier html

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"/> <link rel="icon" href="img/bike.jpg"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" /> <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" /> <script src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script> <title>Vélo'V</title> </head> <body> <div id="map" style="height:500px;"> </div> <script src="js/ajax.js"></script> <script src="js/map.js"></script> </body> </html>

le fichier ajax.js

function ajaxGet(url, callback) { var req = new XMLHttpRequest(); req.open("GET", url); req.addEventListener("load", function () { if (req.status >= 200 && req.status < 400) {// Le serveur a réussi à traiter la requête // Appelle la fonction callback en lui passant la réponse de la requête callback(req.responseText); } else { // Affichage des informations sur l'échec du traitement de la requête console.error(req.status + " " + req.statusText + " " + url); } }); req.addEventListener("error", function () { // La requête n'a pas réussi à atteindre le serveur console.error("Erreur réseau avec l'URL " + url); }); req.send(null); }

et le fichier map.js

//intitalisation de la carte var map = { lat :'45.7604276', lng : '4.8335709', map : 'null', showMap : function() { markerClusters = L.markerClusterGroup(); map = L.map('map').setView([this.lat, this.lng], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); }, createMarker : function(item){ this.lat = item.position.lat; this.lng = item.position.lng; }, createPopup : function(item) { this.name = item.name; return this.name; }, } map.showMap(); ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=MACLE", function (reponse) { // Transforme la réponse en tableau d'objets JavaScript var stations = JSON.parse(reponse); // Affiche au clic sur le marqueur la fonction reservation var marker = L.marker([item.position.lat, item.position.lng]).on('click', reservation).addTo(map); markerClusters.addLayer(marker); map.addLayer(markerClusters); function reservation() { map.createMarker(item); showHidde.hiddenSignature(); detailsStation.Init(item); setValue(); classPhone(); marker.bindPopup(map.createPopup(item)).openPopup(); }) });

3 réponses

Maenhyr, il y a 6 ans

Quand j'ai mis ton code dans un IDE, il s'est tout de suite plaint de la parenthese fermante à la fin de ton code.

ajaxGet("<url>", function (reponse) { // Transforme la réponse en tableau d'objets JavaScript var stations = JSON.parse(reponse); // Affiche au clic sur le marqueur la fonction reservation var marker = L.marker([item.position.lat, item.position.lng]).on('click', reservation).addTo(map); markerClusters.addLayer(marker); map.addLayer(markerClusters); function reservation() { mapLeaf.createMarker(item); showHidde.hiddenSignature(); detailsStation.Init(item); setValue(); classPhone(); marker.bindPopup(mapLeaf.createPopup(item)).openPopup(); } // <- tu n'as pas besoin de la parenthese fermante });

petit conseil, ne met JAMAIS de clé API sur un forum. Je te conseille de la supprimer de ton poste.

Ly Lí Utahime, il y a 6 ans

Merci pour la clé d'api. J'avoue que j'y ai pensé sur le coup Je l'ai retirer.

Quand je retire la parnenthèse j'ai encore plus d'erreur.

map.js:29 Uncaught ReferenceError: item is not defined at map.js:29 at XMLHttpRequest.<anonymous> (ajax.js:7) 
en dépliant
```
map.js:29 Uncaught ReferenceError: item is not defined
at map.js:29
at XMLHttpRequest.<anonymous> (ajax.js:7)

(anonymous) @ map.js:29
(anonymous) @ ajax.js:7
load (async)
ajaxGet @ ajax.js:4
(anonymous) @ map.js:25

Ly Lí Utahime, il y a 6 ans

J'ai déjà quand même remarqué que je me suis embrouillé dan l'appelation de la fontion des marqueurs. J'ai du coup mis le mot marker en anglais et partout.

ca donne ça masi j'ai toujours l'erreur (ajax.js:7)

ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=MACLE", function (reponse) { // Transforme la réponse en tableau d'objets JavaScript var stations = JSON.parse(reponse); // Affiche au clic sur le marqueur la fonction reservation var marker = L.marker([item.position.lat, item.position.lng]).on('click', reservation).addTo(map); markerClusters.addLayer(marker); map.addLayer(markerClusters); function reservation() { map.marker(item); showHidde.hiddenSignature(); detailsStation.Init(item); setValue(); classPhone(); marker.bindPopup(map.createPopup(item)).openPopup(); } });