AjaxAPI, Superposition d'objets personnalisés à partir de YGeoPoint

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" et "dessiner" vos cartes Y!Maps.

Nous avons pu voir au cours des pages précédentes de Webjax traitant de Yahoo!Maps, les fonctionnalités "basiques" de la librairie Y!Maps.
Nous allons dans le cadre de cette page pousser plus loin l'utilisation de la librairie Y!Maps pour ajouter des objets personnalisés sur les cartes.




#00 :: Ajout d'un "cadreur de surface" sur une YMap

Ajout d'un "cadreur de surface" sur une YMap

Ce 1er exemple vous permet de prendre connaissance du code nécessaire pour la mise en place d'un "cadreur de surface" sur une carte YMap.
La mise en place de ce "cadreur de surface" permet d'utiliser un objet encore non utilisé à ce stade de la présentation de la librairie Y!Maps sur Webjax : YUtility .
Cet objet comprend quelques méthodes qui permettent de rationaliser la modification du modèle DOM d'un document courant (appendNode(), createNode(), etc..)
Cet objet comprend des méthodes comme 'setStyle()' qui peuvent être mis en relation avec Element.setStyle() (prototype.js) par exemple.
Le code de ce 1er exemple consistera donc en de la création de nodes avec "embellissemnt" CSS et utilisation d'une méthode YUtility.containerResize() permettant de construire le "cadreur de surface" à proprement dit.
La carte est chargeable via le bouton "charger la carte".

!!! :: attention, ce jour (04/03/2007), ce 1er exemple ne semble pas fonctionner sous Firefox 1.5.0.10. L'exemple fonctionne par contre sous Internet Explorer 5.5.
!!! :: les données de ce type de carte ne sont pas exportables en tant que telles au format GeoRSS ce qui explique l'absence de boutons d'exports.
Le code source de cet exemple est recopié ci après :
<!-- élément container de la carte --> <div id="carteYahoo"></div> <!-- boutons d'actions HTML --> <input type="button" name="ok_0" id="ok_0" value="charger la carte" onClick="chargerCarteYahoo('carteYahoo');" /> <!-- code Javascript d'action --> <script type="text/javascript" language="JavaScript"> var map = null; function chargerCarteYahoo (idEl) { map = new YMap(document.getElementById(idEl),YAHOO_MAP_SAT); var paris = new YGeoPoint(48.860001,2.34); map.drawZoomAndCenter(paris,5); //map.addZoomLong(); map.addTypeControl(); // custom object handling var hd = YUtility.createNode('div','sub'); var hs = { backgroundColor: 'yellow', position:'absolute', overflow:'visible', bottom:-2.5, right:-2.5, width:5, height:2.5 }; YUtility.setStyle(hd,hs); var ob = YUtility.createNode('div','main'); var os = { zIndex:10, width:100, height:100, borderColor:'green', borderStyle:'solid', borderWidth:2 }; YUtility.setStyle(ob,os); YUtility.appendNode(ob,hd); var _ex = new YUtility.containerResize("main", "sub"); var ret = map.getBoundsLatLon(); //alert(ret.LatMax+' et '+ret.LonMin+' et 48.860001,2.34'); var accroche = new YGeoPoint(ret.LatMax,ret.LonMin); var mo = new YCustomOverlay(accroche); //default container returned div; append your own to this default YUtility.appendNode(mo,ob); map.addOverlay(mo); $('ok_0').disabled = 'true'; } </script>

: 04/03/2007 21:26:54 | : Yahoo.Maps, Yahoo, Ajax, API, ajax, api, YGeoPoint, YMap.addOverlay, YUtility.containerResize, yUtility.appendNode, YCustomOverlay,

Aucun commentaire enregistré