vendredi 25 octobre 2013

Changer la position du contrôle de zoom sur une map avec LEAFLET

LeafLet est une librairie Javascript vous permettant de manipuler les APIs de cartographie telles que google map, bing map, open street map, etc. Elle offre beaucoup d'avantages sur celles-ci tels que :
  • L'abstraction sur les API de carto elles mêmes (vous pouvez intervertir les cartes, sans changer votre couche d’événements/métiers) 
  • Elle est axé responsive UI et présente donc une bonne compatibilité sur les tablettes par exemple (attention aux modules annexes tout de même (tel que LeafLet-Draw) qui ne le sont pas tous). 
  • Sa richesse de fonctionnalités repondant à la majorité des besoins de carto.
Je ferai bientôt un post plus global su cette librairie que j'ai récemment exploitée en profondeur.

Ce post juste pour noter une petite astuce qui peut servir, notamment si le controle de zoom se retrouve empiéter sur d'autre éléments du DOM de votre application par exemple. 

A l'instanciation de votre map, désactivez en premier le controle de zoom en le passant à 'false' :

// Init map
var map = new L.Map('map', { center: new L.LatLng(48.836094, 2.232412), zoom: 15, zoomControl : false }); 

Puis rajouter le controle de zoom, cette fois-ci en spécifiant sa position :

map.addControl(L.control.zoom({ position: 'bottomleft' }));

Les diffentes valeurs possibles de la propriété 'position' sont :
bottomright, bottomleft, topleft, topright.

On se retrouve avec un affichage comme celui-ci :




Aucun commentaire:

Enregistrer un commentaire