Articles

Home made R-Strap

Get the Flash Player to see this player.

Pour ceux qui ne connaissent pas la RStrap, il s’agit d’une super sangle pour appareil photo qui permet d’avoir rapidement l’appareil en main et de pouvoir le lâcher à tout moment. Hélas, elle coute plutôt cher (40 €) donc j’me suis dis que ça ne devait pas être sorcier d’en fabriquer une soit même.

Voici un petit guide pour vous expliquer comment fabriquer une sangle rapide à la maison!

Pour plus de détails, cliquer ICI

Lire la suite...

[GoogleMAP API] Personnaliser un marqueur

Ce petit bout de code permet de créer des marqueurs sur les Google MAP personnalisés (avec des icônes personnalisés) et draggable, c'est à dire qui peuvent être déplacés.

// On fabrique un objet icône
var icon = new GIcon();
// On indique l'emplacement de l'icône
icon.image = 'mon-icone.png';
// On indique la taille de l'icône
icon.iconSize = new GSize(21, 21);
// On indique le point d'encrage de l'icône, c'est à dire le point
// dans l'image qui indiquera la position du marqueur sur la carte.
// Ici on choisi un point en bas au milieu de l'icône.
icon.iconAnchor = new GPoint(11, 21);
// On indique le point d'encrage de la fenêtre d'information
icon.infoWindowAnchor = new GPoint(18, 1);

// Dans la variable d'option, on précise l'icône de marqueur
// et que le marqueur est déplaçable (draggable)
var options = {
icon: icon,
draggable: true
};

// On fabrique un nouveau marqueur, ici la variable point est
// un GLatLng qui doit être précédemment initialisé
var marker = new GMarker(point, options);

// On active une seconde fois le comportement
// déplaçable (draggable)
marker.enableDragging();

// La callback sera appelée au début du déplacement (drag)
GEvent.addListener(marker, "dragstart", function() {
});

// La callback sera appelée à la fin du déplacement (drag)
GEvent.addListener(marker, "dragend", function() {
});

Google MAP, marker drag events, customize marker icon, personnaliser un marqueur, change l'icône d'un marqueur, événements du déplacement d'un marqueur, drag/drop, GIcon, GEvent, GMarker

[GoogleMAP API] Afficher les éléments d'une recherche geocode

Sur GoogleMAP il est possible d'utiliser le GeoCoder pour rechercher une adresse sur la carte. Un Geocoder fournit non seulement la longitude et la latitude mais également l’adresse telle qu’elle est orthographiée dans la base de donnée.
Dans un premier temps, il faut initialiser le geocoder :

var geocoder = new GClientGeocoder();


Ensuite, on fait l'appel au geocoder pour trouver les points qui correspondent à une adresse donnée :

geocoder.getLocations('Paris nation', resultCallback);


On fait l'appel ici à la méthode resultCallback qui va être appelée lorsque le serveur aura répondu :

function resultCallback(response) {

// Supprimer les marqueurs sur la carte
map.clearOverlays();

if (!response || response.Status.code != 200) {
// En cas d'erreur ou si il n'y a aucun résultat
alert('Aucun résultat');
}
else {

// Si il n'y a qu'un point, on centre la carte directement
if (response.Placemark.length == 1) {
map.setCenter(new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]
));
return;
}

// On prépare un objet Bounds qui corresponds à la zone occupée
// par tous les points retournés par le geocoder.
var bounds = new GLatLngBounds();

// On boucle sur tous les points retournés
for (var i = 0; i < response.Placemark.length; i++) {

// Cet objet correspond au point actuel
var p = response.Placemark[i];

// Cet objet correspond à l'emplacement géographique du point
var point = new GLatLng(
p.Point.coordinates[1],
p.Point.coordinates[0]
);

// On ajoute le point aux Bounds
bounds.extend(point);

// On fabrique un marqueur pour ce point
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(p.address);
});

// On affiche le point sur la carte
map.addOverlay(marker);
}

// On centre la carte sur zone occupée par tous les points, et on adapte
// le niveau de zoom
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

}
}

Google MAP API, GLatLngBounds, GLatLng, GMarker, fit-to-bounds zoom, GClientGeocoder, geocoder search, adapter le zoom de la carte aux résultats de la recherche, centrer la carte pour adapter la vue aux résultats de la recherche, fit map bounds to search result

[jQuery UI] Draggable/Droppable : comment obtenir les éléments drag et drop

J'ai fouillé longtemps dans la documentation de jQuery UI pour savoir comment faire en sorte - avec le module draggable/droppable - de récupérer l'élément qui est déplacé (drag) et celui où on relâche la souris (drop). La doc est vachement incomplète de ce coté je vais donc vous l'expliquer :

Si je reprends le "super" exemple de cette page, il est expliqué comment obtenir l'élément qui réception l'autre (le drop) mais pas le drag. Je n'explique pas ici comment mettre en place le drag/drop, sachez néanmoins que l'élément qui est déplacé c'est le drag, et celui qui reçoit c'est le drop.

$('.drag').draggable({ helper: 'clone' });
$(".drop").droppable({
accept: ".drag",
hoverClass: 'droppable-hover',
drop: function(event, ui) {
var drop = $(this);
var drag = $(ui.draggable[0]);

// votre code ici
}
});

jquery, jquery ui, drag drop, draggable, droppable, get id, ui.draggable, obtenir élément déplacé en mouvement, getDropElement, getDragElement