AjaxAPI, Utilisation des YPolyline (tracés, overlays)

Ce widget est propulsé par

Si vous suivez la présentation de l'API Yahoo!Maps dans l'ordre de ce site, vous avez pu prendre connaissance de l'exemple basique d'utilisation , du placement de marqueur sur des cartes Y!Maps , de l'ajout d'outils de contrôles des cartes Y!Maps, de la géolocalisation d'adresse avec Y!Maps , ainsi que de l'utilisation de fichiers XML GeoRss pour "peupler" vos cartes de points.

Cette page a pour objectif de vous présenter les outils mis à votre disposition, dans la librairie Javascript/Ajax, pour "dessiner" des tracés , des calques personnalisés sur les cartes Y!Maps.
Ce concept est aussi présent dans la librairie GMaps, globalisé sous la même entité "Polyline" soit des tracés venant se superposer de façon contrôlée sur la ou les cartes.





#00 :: Exemple simple d'utilisation des YPolyline #01 :: Génération personnalisée de YPolyline

Exemple simple d'utilisation des YPolyline

Ce premier exemple vous présente une intégration simple des YPolyline afin de permettre le dessin de tracés sur une carte Y!Maps.
La carte est centrée sur le quartier de la gare Saint-Lazare à Paris, France.
La carte est visionnable ci après (chargement via le bouton prévu à cet effet) :

On peut aussi remarquer sur la carte précédente, que les contrôles présents sur la carte ont été positionnés différement de leur position par défaut.
Ce placement personnalisé des contrôles (existant aussi dans GMaps) est intéressant lorsque l'on veut proposer des cartes hautement personnalisées par exemple.
Le placement d'un contrôle sur une carte se fait en deux temps à savoir que l'on définit d'abord un YCoordPoint (x,y) que l'on 'map.translate' c'est à dire que l'on définit point d'accroche "côté" (droite , gauche)et point d'accroche "direction" ( haut , bas ).
Le code source de ce premier exemple est recopié ci après :
<!-- zone container de la carte --> <div id="carteYahoo"></div> <!-- fonction de chargement de la carte et création des tracés, polylines --> function chargerCarteYahoo() { // création et centrage de la carte var map = new YMap(document.getElementById('carteYahoo'),YAHOO_MAP_REG); map.disableDragMap(); map.disableKeyControls(); map.disablePanOnDoubleClick(); var cPT = new YGeoPoint(48.87530041538759,2.3276424407958984); map.drawZoomAndCenter(cPT,3); map.addTypeControl(); // placement personnalisé des outils // de contrôle de carte var zp = new YCoordPoint(5,30); zp.translate('right','bottom'); map.addZoomLong(zp); var pp = new YCoordPoint(2,5); pp.translate('right','top'); map.addPanControl(pp); // définition des points à relier sur la carte var cPT2 = new YGeoPoint(48.874792355184326,2.320089340209961); var cPT3 = new YGeoPoint(48.87117933382086,2.328157424926758); var cPT4 = new YGeoPoint(48.875582668826546,2.3299598693847656); var cPT5 = new YGeoPoint(48.87261892829,2.333521842956543); // création du tracé YPolyline avec tableau de points, couleur et // transparence var poly1 = new YPolyline([cPT,cPT2,cPT3,cPT4,cPT5],'green',7,0.7); map.addOverlay(poly1); }

Génération personnalisée de YPolyline

Ce second exemple vous présente un générateur de YPolyline personnalisé.
Les points sont les mêmes que pour la carte précédente et la carte est chargeable à l'aide du bouton prévu à cet effet.
L'exemple est testable ci après :

Paramétrage des YPolyline

Couleur du tracé : green yellow blue red purple pink lightblue
Degré Transparence : 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1
Epaisseur du tracé (pixels): 1 2 5 10 20

Le code source de cet exemple est recopié ci après :
<!-- element container carte --> <div id="carteYahoo0" ></div> <!-- bouton d'action --> <input type="button" name="ok_0" value="charger la carte avec les YPolyline" onClick="chargerCarteYahoo0($F('couleur'),$F('transp'),$F('epaisseur'));" /> <!-- code Javascript d'action --> <script type="text/javascript" language="JavaScript"> function chargerCarteYahoo0(c,t,e) { var map = new YMap(document.getElementById('carteYahoo0'),YAHOO_MAP_REG); map.disableDragMap(); map.disableKeyControls(); map.disablePanOnDoubleClick(); var cPT = new YGeoPoint(48.87530041538759,2.3276424407958984); map.drawZoomAndCenter(cPT,3); map.addTypeControl(); // définition des points à relier sur la carte var cPT2 = new YGeoPoint(48.874792355184326,2.320089340209961); var cPT3 = new YGeoPoint(48.87117933382086,2.328157424926758); var cPT4 = new YGeoPoint(48.875582668826546,2.3299598693847656); var cPT5 = new YGeoPoint(48.87261892829,2.333521842956543); // création du tracé YPolyline avec tableau de points, couleur et // transparence var poly1 = new YPolyline([cPT,cPT2,cPT3,cPT4,cPT5],String(c),Number(e),Number(t)); map.addOverlay(poly1); } </script>

: 02/03/2007 03:20:24 | : Yahoo.Maps, Yahoo, Ajax, API, ajax, api, YPolyline, Polyline, polyline, dessin, tracés, overlays, addOverlay,

Aucun commentaire enregistré