Discussion :

[ludo40190]

Salut à tous,

Pour un petite page web que je souhaite faire, j'ai ce code là pour récupérer les coordonnées de certaines villes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function chercher(ville){
    if(ville != ""){
        $.ajax({
            url: "https://nominatim.openstreetmap.org/search", // URL de Nominatim
            type: 'get', // Requête de type GET
            data: "q="+ville+"&format=json&addressdetails=1&limit=1&polygon_svg=1" // Données envoyées (q -> adresse complète, format -> format attendu pour la réponse, limit -> nombre de réponses attendu, polygo
n_svg -> fournit les données de polygone de la réponse en svg)
        }).done(function (response) {
            if(response != ""){
                userlat = response[0]['lat'];
                userlon = response[0]['lon'];
                document.write(userlat + "<br>");
                document.write(userlon + "<br>");
                document.write("<br>");
            }
        }).fail(function (error) {
            alert(error);
        });
    }
}
 
chercher("paris")
chercher("brest")
chercher("bayonne")

Comment puis-je récupérer les variables correspondants à la ville, latitude et longitude de chaque ville pour ensuite les intégrer automatiquement dans une liste qui aurait cette forme (pour ensuite afficher cela sur une carte openstreetmap) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// Nous initialisons une liste de marqueurs
var villes = {
	"Paris": { "lat": 48.852969, "lon": 2.349903 },
	"Brest": { "lat": 48.383, "lon": -4.500 },
	"Bayonne": { "lat": 43.500, "lon": -1.467 }
};

Merci par avance de votre aide.

[SpaceFrog]

il est ou ton json des coordonnées ? déja sur la page ? un fichier json sur le serveur ?

[ludo40190]

Il n'y en a pas, je récupère les coordonnées GPS via la première partie du code.

[mathieu]

vous ne récupérez pas les coordonnées dans userlat et et userlon ?

[ludo40190]

Justement, comment puis-je enregistrer les coordonnées userlat et userlon ainsi que le nom de la ville et créer un array villes comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var villes = {
	"Paris": { "lat": 48.852969, "lon": 2.349903 },
	"Brest": { "lat": 48.383, "lon": -4.500 },
	"Quimper": { "lat": 48.000, "lon": -4.100 },
	"Bayonne": { "lat": 43.500, "lon": -1.467 }
};

pour ensuite exécuter ce code qui m'affichera les marqueurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
	// Nous parcourons la liste des villes
	for (ville in villes) {
		var marker = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);
	}               	
}

Je suis un peu perdu..

[mathieu]

vous n'avez pas besoin de créer un tableau, vous pouvez faire L.marker([userlat, userlon])... directement quand vous recevez la réponse ajax.

au sujet de l'appel ajax, vous n'avez pas besoin de jquery, vous pouvez le faire simplement avec fetch qui est du javascript de base :
https://developer.mozilla.org/fr/doc...PI/Using_Fetch