Faire un circuit de bus en javascript

Bonjour,

Je voudrais mettre en place une carte indiquant la position des bus, c’est-à-dire un icône qui se déplace en fonction de sa progression (en %) entre deux arrêts.

Grâce à une API, je peux récupérer le nombre de minute avant que le bus arrive à un arrêt et donc avec un petit algorithme déterminer sa position (en % de progression entre deux arrêts).

Mon problème se situe, pour déplacer l’icône du bus selon sa position. J’ai pensé à deux solutions.

La première solution est d’utiliser une image schématique, mais je ne sais pas comment faire pour traiter les courbes et d’afficher l’icône selon la progression (sur un segment/une droite c’est très simple, mais avec une courbe, je ne sais pas).

EDIT : Utilisation d’une image pris au hasard sur google.

Ma deuxième solution est d’utiliser l'API GoogleMap, mais je ne sais pas comment définir un circuit précis sur Google Map…

Je souhaiterai donc avoir vos conseils ou vos avis.

Je vous remercie,

A-312.

1. Pour les courbes, regarde du côté des courbes de Beziers. Formule mathématique. Après je laisse les mathématiciens t'expliquer comment faire
2. Je sais qu'OpenMapStreet utilise une api, avec umap (http://framablog.org/tag/umap/), je sais pas si ça peut t'aider.

Merci, mais pour OpenMap cette aspect de "circuit" semble aussi mal documenté.

Je cherchais quelques choses comme ça : http://realtime.catabus.com/InfoPoint/

Je n'ai pas trouvé la fonction en question, il ne s'agit pas des Polylines.

Quelqu'un a un petit conseil ?

Svg+js ?

Pour dessiner la carte ça ne me pose pas de problème. C'est pour définir le déplacement des points entres deux arrêts.

Bah tu fais en SVG pour avoir tes courbes, et après avec une formule mathématique tu as la position entre les deux arrêts.

J'espérais avoir une alternative avec google map, ou une librairy pour minimiser le travail.

http://imgh.us/ligne.svg A partir de ça je dois pouvoir faire des courbes. Et faire un svg simplifié.