Bienvenue
Bienvenue sur le blog de partage de sources de la société Mighty Productions
Vous trouverez sur le présent site des sources libres fournies gracieusement par la société Mighty Productions qu'elle a conçu pour répondre aux besoins de ses clients.
Ces sources sont principalement développées avec la complicité du framework mooTools, en langage JavaScript, combinées quelque fois à du PHP, une base de données MySql, du HTML et/ou du CSS.
Bonne programmation !
Actualités
Voici quelques scripts MooTools utilisées très fréquemment dans nos productions :
ReMooz
Auteur : Harald Kirschner - License : MIT License
ReMooz est un script intégrable très facilement, permettant au visiteur d'agrandir une image en cliquant dessus.
Le look standard est sobre et efficace, les cas particuliers (débordement de l'image agrandie dans la page, taille recalculée si l'image est trop grande, ...) sont très bien gérés, le code est très léger.
mooRainbow
Auteur : Djamil Legato (w00fz) - License : MIT License
![[screen shot]](http://moorainbow.woolly-sheep.net/imgs/shot.jpg)
mooRainbow est un script permettant à l'internaute de choisir une couleur via une interface visuelle et au JS de récupérer un code RGB, HSB ou HEX résultant de ce choix.
Script idéal pour câbler un backoffice permettant à un administrateur, par exemple, de choisir la couleur d'un texte.
Slideshow 2
Auteur : Aeron Glemann - License : MIT License
Excellent script permettant de réaliser en quelques minutes un slideshow efficace en terme de look et d'ergonomie.
Le but de cet article est d'expliquer comment intégrer un plan GoogleMap© dans une page web et manipuler le plan, changer dynamiquement le positionnement, le zoom, les marqueurs, ajouter des bulles d'informations, etc...
Intégrer un plan dans une page web est relativement aisé, le code fourni par le site maps.google.fr via le bouton « Lien » permet d'intégrer un iframe contenant le plan positionné comme souhaité.
Manipuler ce plan via JavaScript et l'API de GoogleMap n'est pas plus compliquée pour quelqu'un qui maîtrise un peu le langage de script. La méthode par contre diffère, dans ce cas, on ne passe pas par un iframe mais par un div qui va contenir à terme le plan.
Pour commencer, il faut intégrer l'API à la page web dans la section head de la page :
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
Ensuite, dans la section body de la page, il faut définir le div qui recevra le plan :
<div id="divMap" style="width: 800px; height: 400px;"></div>
Enfin, dans la section head de la page, il faut coder l'implémentation dans le div de l'objet GoogleMap, à déclencher une fois la page entièrement chargée, pour être sûr que le div cible soit bien présent au moment de l'exécution du script. Pour ceci, 2 possibilités, plus simplement pour les utilisateurs de la bibliothèque mooTools dans l'évênement domready de l'objet windows, ou en JS pur, en codant la fonction d'implémentation et en l'appelant dans l'évênement onload du body comme ceci :
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initMap() {
var mapLatlng =new google.maps.LatLng(-34.397,150.644);
var mapOptions = { zoom:8, center: latlng, mapTypeId:
google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("divMap"),
mapOptions);
}
</script>
</head>
<bodyonload="initMap()">
Voilà qui est fait, notre div contient le plan GoogleMap et l'utilisateur peut le manipuler.
Une possibilité simple et intéressante si l'on veut mémoriser le plan dans une base de données par exemple, c'est de récupérer les propriétés de l'objet map, tel que les coordonnées de la position, le niveau du zoom ou encore le type d'affichage :
alert("Zoom = " map.getZoom());
alert("Latitude = " map.getCenter().lat());
alert("Longitude = " map.getCenter().lng());
alert("Type d'affichage = " map.getMapTypeId());
Pour ajouter au plan des marqueurs, il faut utiliser l'objet Marker fournit par l'API GoogleMap :
var marker = new google.maps.Marker({
position: map.getCenter(), // Position du marqueur via l'objet LatLng
draggable: true, // Marqueur déplaçable par l'utilisateur
map: map, // Objet map recevant le marqueur
title: "Mon marqueur"
});
On peut ajouter autant de marqueurs que l'on souhaite sur le plan, on peut aussi utiliser sa propre ressource graphique pour le marqueur (propriétés "icon" et "shadow" de l'objet Marker.
On peut aussi tout simplement coder des évênements au sein du plan, en utilisant la méthode addListener de cette manière :
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
});
Dans l'exemple ci-dessus, on code l'évenement click rattaché à l'objet map (click sur la map) et on demande au marker de se positionner à la latitude / longitude correspondant à la position de la souris, via l'objet event.
Dernier point développé dans cet article, l'ajout d'une fenêtre d'information. L'API met à disposition un objet InfoWindow qui permet l'affichage de bulles d'information sur le plan. Nous allons instancier cet objet avec un texte de notre choix, et l'afficher lorsque l'utilisateur clique sur le marqueur créé précédemment :
var infowindow =new google.maps.InfoWindow({
content: "Texte de mon choix"
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
Voilà donc notre bulle d'information apparaîtra lorsque l'utilisateur cliquera sur le marqueur. Le contenu de la fenêtre d'information est dans notre exemple simplifiée à l'extrême, mais l'objet permet la spécification via des id d'éléments de présentation comme un titre, une icône...
Pour conclure, on peut dire que l'objet fourni par l'API GoogleMap est très simple d'utilisation tout en étant extrêmement permissif au niveau des fonctionnalités.
Pour aller plus loin : Tutoriaux & documentation GoogleMap
Voici une classe mooTools permettant de sélectionner une valeur numérique à partir d'une glissière.
Son utilisation est très simple, il suffit d'inclure le script JS, et instancier via javascript dans l'évênement window.domready la classe en lui passant en paramètre l'élément du formulaire (de type input) ainsi que les options de la glissière :
window.addEvent('domready', function() {
var maGlissiere = new MooSlider($('moninput'), { valMin: 0, valMax: 100 });
});
Coté HTML, très simplement :
L'input text sera automatiquement masqué, la glissière ajouté automatiquement, et l'input text aura sa valeur (value) synchronisée avec la glissière graphique.
Télécharger le script
