18008 sujets

Questions générales et questions de débutants

API jc decaux

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);
Tu as fais le quickstart de leaflet (https://leafletjs.com/examples/quick-start/) ?
Je pense que c'est relativement simple d'ajouter des points sur ta carte.

Ensuite il faudra déterminer comment tu vas récupérer tes points depuis leur api pour l'afficher avec le js de leaflet. Et pour cela tu n'auras pas beaucoup d'autre choix que de mettre les mains dans le cambouis.
Bonjour,
non je ne l'ai pas encore fait car je croyais qu'il fallait d'abord récupérer les points de station avec jc decaux ensuite avec les repères sur la carte faire des marqueurs.
Je pense que je ne peux pas ajouter des points sans pour autant savoir exactement si ça correspondrait à ceux fournis par jc decaux. Ou bien je dois pas raisonner comme ça?
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}
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
});
Sujet clos
Aller à