Bonjour la communauté et aux bonnes volontés.
Je suis sur un projet (formation)de création de site de location de vélo.
Il faut une carte 'dune région de notre choix, ensuite, il faut via l'api jc décaux de faire ressortir tous les points de station.
J'ai utilisé openstreetmap pour la carte, avec leaflet comme bibliothèque.
Mon souci, c'est comment arrivé à faire apparaître ces zones sur ma carte.
Pour info, j'ai déjà la clé de jcdécaux et il faut le faire avec javascript.
Des tutos, tutos, rien.
Réveillez moi avec vos savoirs.

Bonjour,
à mon avis on s'est pas bien compris. Je suis en formation et je dois créer un site de location de vélos de ma ville, en l’occurrence Marseille pour moi. J'ai utilisé openstreetmap et non pas googlemap, qui était possible. Je dois faire apparaître sur ma carte les points vélib gérés par jc decaux. Voilà

var mymap = L.map('mapid').setView([ 43.296482, 5.36978], 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/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 25,

id: 'mapbox/streets-v11',
accessToken: 'pk.eyJ1Ijoic3RhZiIsImEiOiJjazNzdmN5dWkwYWF3M2JvOWVkMXByeGFnIn0.BMzVb4c7Hi05z4SdJw2TOA'
}).addTo(mymap);

Pour tes points il faudra utiliser les coordonnées GPS qu'ils te donnent, oui.

Leur api te permet de récupérer les différentes données soit au format json ou csv :
https://developer.jcdecaux.com/#/opendata/vls?page=static

Pour récupérer les données dans ton js tu peux utiliser XMLHttpRequest. Je te met un exemple au hasard trouvé en cherchant XMLHttpRequest + json : https://www.w3schools.com/js/js_json_http.asp

Et sur cette page tu as toutes les urls que tu peux utiliser pour récupérer les données :
https://developer.jcdecaux.com/#/opendata/vls?page=dynamic

Par exemple pour une station :

https://api.jcdecaux.com/vls/v3/stations/{station_number}?contract={contract_name}

Merci bacasable, je le teste pour voir. Intéressant

bonjour, j'ai réussi via fetch à récupérer finalement mes positions en utilisant une boucle for.
Mon but maintenant c'est au 'click' de chaque position de faire ressortir les infos sur la station en question( à savoir nom, addresse, statut, vélos dispo...).
Pour ce faire j'ai créer une zone dans mon html qui va pouvoir récupérer tout ça:
<h3>INOFRMATIONS SUR LA STATION</h3>
<ul id="info">
<li>
Nom et addresse station : <span id="nomstation"></span>
</li>

<li>
Etat : <span id="etat"></span>
</li>

<li>
Place(s) totale(s) : <span id="placetotale"></span>
</li>

<li>
Place(s) disponible(s) : <span id="placedispo"></span>
</li>

<li>
Vélo(s) disponible(s) : <span id="velodispo"></span>
</li>
</ul>
// permet affichage des positions sur la carte
const url = 'https://api.jcdecaux.com/vls/v1/stations?contract=marseille&apiKey=7cac7a43f504aceb28611cd25c6626c4075645eb';

fetch('https://api.jcdecaux.com/vls/v1/stations?contract=marseille&apiKey=7cac7a43f504aceb28611cd25c6626c4075645eb')
.then((resp) => resp.json()) // Transform the data into json
.then(function(data) {

for(let elem of data){

var marqueur = L.marker([elem.position.lat, elem.position.lng]).addTo(mymap);


}

// Create and append the li's to the ul
});

bonjour, j'ai réussi via fetch à récupérer finalement mes positions en utilisant une boucle for.
Mon but maintenant c'est au 'click' de chaque position de faire ressortir les infos sur la station en question( à savoir nom, addresse, statut, vélos dispo...).
Pour ce faire j'ai créer une zone dans mon html qui va pouvoir récupérer tout ça:

<h3>INOFRMATIONS SUR LA STATION</h3>
<ul id="info">
<li>
Nom et addresse station : <span id="nomstation"></span>
</li>

<li>
Etat : <span id="etat"></span>
</li>

<li>
Place(s) totale(s) : <span id="placetotale"></span>
</li>

<li>
Place(s) disponible(s) : <span id="placedispo"></span>
</li>

<li>
Vélo(s) disponible(s) : <span id="velodispo"></span>
</li>
</ul>

// permet affichage des positions sur la carte
const url = 'https://api.jcdecaux.com/vls/v1/stations?contract=marseille&apiKey=7cac7a43f504aceb28611cd25c6626c4075645eb';

fetch('https://api.jcdecaux.com/vls/v1/stations?contract=marseille&apiKey=7cac7a43f504aceb28611cd25c6626c4075645eb')
.then((resp) => resp.json()) // Transform the data into json
.then(function(data) {

for(let elem of data){

var marqueur = L.marker([elem.position.lat, elem.position.lng]).addTo(mymap);


}

// Create and append the li's to the ul
});