Documentation widget geovelo

Geovelo propose aux cyclistes de trouver les trajets adaptés à leurs envies ainsi que des balades à vélo accessibles pour tous, en coeur ou en périphérie de la ville. Ces balades sont agrémentées d’étapes et recensent les endroits historiques et culturels. Nous vous permettons d’intégrer à votre site web un calcul d'itinéraire adapté au cycliste ainsi que des balades au travers de deux propositions.

Exemple

Installation

Solution 1: Inclure manuellement les fichiers de librairie

Geovelo s’occupe de vous générer un accès pour l’installation de ce widget. Vous pourrez alors le configurer comme vous le souhaitez, sans intervention de la part de Geovelo.

Insérez le code suivant juste avant de fermer votre balise head :
<link rel="stylesheet" href="https://widgets.geovelo.fr/geovelo-widget.v2.min.css">
Insérez le code suivant juste avant de fermer votre balise body :
<script defer src="https://widgets.geovelo.fr/geovelo-widget.v2.min.js">
Insérez le code suivant dans la div où vous souhaitez ajouter le widget :
<div id="geovelo-widget-container" key="YOUR_API_KEY"> </div>
Attributs
AttributValeursDescription
idgeovelo-ride-widget
key
northLatitude du point le plus au nord lors de l'initialisation de la carte
Ex: "47.733746"
eastLongitude du point le plus à l'est lors de l'initialisation de la carte
Ex: "1.460185"
southLatitude du point le plus au sud lors de l'initialisation de la carte
Ex: "46.709305"
westLongitude du point le plus à l'ouest lors de l'initialisation de la carte
Ex: "-0.138642"
rides-northDéfaut: northLatitude de la balade la plus au nord
rides-eastDéfaut: eastLongitude de la balade la plus à l'est
rides-southDéfaut: southLatitude de la balade la plus au sud
rides-westDéfaut: westLongitude de la balade la plus à l'ouest
widthDéfaut: "100%"
heightDéfaut: "100%"
primaryDéfaut: "#649e49"Personnalisation de quelques background-color du widget
Ex: "red", "rgb(42, 42, 42)"
secondaryDéfaut: "#FF9800"Personnalisation de quelques color du widget
Ex: "red", "rgb(42, 42, 42)"
lightDéfaut: "false"Personnalisation du thème. Mettre la valeur à "true" si la couleur primaire définie par l'attribut primary est relativement claire.
searchDéfaut: "true"Activation de la recherche d'adresse
itinerariesDéfaut: "true"Activation de la recherche d'itinéraires
traditional-bike-typeDéfaut: "true"Activation de la recherche d'itinéraires avec vélo personnel
bss-bike-typeDéfaut: "false"Activation de la recherche d'itinéraires avec vélo en libre service
departurePoint de départ par défaut de la recherche d'itinéraires (lng,lat,address)
Ex: "0.68833;47.39278;Tours, France"
arrivalPoint d'arrivée par défaut de la recherche d'itinéraires
Ex: "0.68833;47.39278;MAME, Tours, France"
ridesDéfaut: "true"Activation des balades
POIsDéfaut: "true"Activation des pois
ride-idIdentifiant de la balade affichée par défaut
left-panelDéfaut: "true"Affichage du panel de gauche ou non
zoom-with-wheelDéfaut: "true"Activation du zoom avec la molette de la souris sur la carte
facilitiesDéfaut: "true"Activation de la couche des aménagements cyclables

Solution 2: Utiliser une iframe

Intégrer une iframe sur votre site est la solution la plus simple. Pas besoin d’un webmaster, il vous suffit de définir ce que vous souhaitez et Geovelo s’occupe de la configuration en fonction de vos besoins (voir les fonctionnalités disponible via la documentation ci-dessus).

Voici un exemple de code d'intégration d'iframe :
<iframe src="https://widgets.geovelo.fr/iframes/[CODE_IFRAME]/index.html" width="100%" height="100%" allowfullscreen="true">