Creer une carte personnalisé

Ly Lí Utahime
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

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
Auteur

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
Auteur

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();
    }

});