Aller au contenu | Aller au menu | Aller à la recherche

eMerzh

Mot-clé - javascript

Fil des billets - Fil des commentaires

lundi 1 juillet 2013

[Review] Instant Interactive Map designs with Leaflet

Hello à tous,

Ayant eu accès à une copie électronique du livre "Instant Interactive Map designs with Leaflet JavaScript Library How-to" aux éditions "Packt" par Jonathan Derrough, j'ai profité du temps pourri pour le lire et en faire une petite review.

Comme son titre l'indique, le livre propose de créer des cartes interactives en javascript grâce à la librairie Leaflet. Leaflet , c'est LA bibliothèque javascript pour faire des cartes, en vogue sur le net pour l'instant. Il a carrément volé la vedette à OpenLayers et est adopté par de plus en plus de firmes et d'acteurs du marché (mapbox, openstreetmap, github, ...). Légère, rapide, facile à comprendre et plein de plugins elle a tout pour plaire. Ce livre propose d'en apprendre un peu plus sur l'utilisation de cette bibliothèque.

Il s'adresse plutôt à des gens ayant des vagues notions de html et de programmation javascript et pourquoi pas un peu de carto. Aucune connaissance ou matériel exotique n'est requis. Le livre s'articule autour de 7 exemples progressifs, bien détaillés et illustrés allant de la simple carte avec un marqueur à la carte choroplèthe ( carte thématique où les régions sont colorées en fonction d'une mesure statistique).

Le livre étant encore très récent la version de Leaflet décrite et utilisée est elle aussi récente (v5.1), ce qui est toujours appréciable pour une lecture informatique où le sujet change souvent.

La lecture commence de manière plutôt douce, on nous apprend comment écrire une page web simple et ce qu'est le "doctype" ... on se demande ce que ces explications font là.

Puis, rapidement, on entre dans le vif du sujet... Les différents éléments sont, parfois assez brièvement, mis en place et nos premières cartes apparaissent enfin. Il faut dire que Leaflet est vraiment intuitif et aide beaucoup à la compréhension.

Les exemples sont progressivement de plus en plus étoffés, et les pages se lisent rapidement . Chaque exemple est noté avec sa difficulté, il inclut une petite introduction, le code source annoté ainsi que des captures d'écran des résultats attendus. 52 pages avec du code source et des screenshot ça se lit trop très vite. Le format choisi offre peu de places pour d'éventuelles explications sur les différents formats possibles (GeoJSON , wms,..) ou sur les techniques (tiles, layers, projections, ...). Le livre reste globalement intéressant même si on reste un peu sur sa faim. Enfin, pour ~3€ en version électronique on n'est pas volé.

Enfin, comme souvent, mais néanmoins bien pratique, les codes sources des exemples sont disponibles sur le site de l'éditeur ainsi que les éventuels errata.

Je recommande le bouquin à ceux qui cherchent des exemples plus concrets de l'utilisation et une première prise en main de Leaflet. Mais, ne vous attendez pas à trouver les dessous de la bibliothèque ou des montagnes de théorie sur la cartographie en ligne et les projections :).

Partager

vendredi 17 juin 2011

Leaflet 0.2, la jeune bibliothèque javascript pour construire vos cartes

Environ 1 mois après l'annonce officielle , mais un peu moins d'un ans avant le 1er commit, voici la version 0.2 de Leaflet. Leaflet est, pour ceux qui n'ont pas suivi, une bibliothèque javascript permettant d'afficher des cartes glissantes comme OSM, votre WMS ou simplement des images.

Depuis l'annonce de Cloudmade (la société derrière le développement de ce joujou), Leaflet a bénéficié de nombreux retours extrêmement positifs des utilisateurs. Elle est alors décrite comme plus légère, plus simple, plus mobile-friendly mais aussi et surtout plus économe dans le chargement des imagettes (jusqu'à près de 8 fois moins dans la configuration par défaut) que les "concurrents" libre comme OpenLayers.

Bien-sûr Leaflet est Open Source (Sous licence BSD) et les sources sont disponibles sur le repository GitHub.

Les nouveautés de cette version sont, outre les nombreuses corrections de bug, le support tant attendu de WMS et de GeoJson. Un paquet de nouvelles projections sont également ajoutées out-of-the-box. Les performances ne sont pas en reste puisque l'équipe a corrigé quelques problèmes et amélioré sensiblement la vitesse des déplacements dans la carte (Panning).

Certains vont même jusqu'à dire que leaflet est plus rapide que GMap :)

Bref de quoi mettre l'eau à la bouche ...

Liste complète des changements

Site de Leaflet

Partager

dimanche 12 août 2007

Detecter le scroll dans une boite....

Voici le 1er billet d'une toute nouvelle série ici, celle du développement ... web ou non.....

J'inaugure cette rubrique avec une astuce permettant de détecter si le texte dans une boite dépasse la taille de la boîte.

En faite, je cherchais à savoir si mon texte était assez petit pour rentrer dans un "div" et sinon mettre en place une solution de pagination en Javascript.

Le principe est le suivant :

  1. s'assurer que les scrollbar son désactivées
  2. mesurer la taille de l'élement avec "element.offsetHeight"
  3. activer les scrollbar
  4. re-mesurer la taille
  5. comparer les deux mesures et remettre les scrollbar comme précédemment

Voici un petit exemple ....

 [javascript]

function isOverflown(elem)
{
	oldFlow = elem.style.overflow;
	elem.style.overflow = "hidden";
	
	//Premiere mesure
	sizeNoScroll = elem.scrollHeight;

	elem.style.overflow = "scroll";
	//Deuxième mesure
	sizeWithScroll = elem.scrollHeight;
	
	//réinitialisation
	elem.style.overflow =  oldFlow;
	return (sizeNoScroll==sizeWithScroll);
}

Partager