news
tour

Archives 23 avril 2012about

e-mail

ça déménage.

L'atelier déménage vous pouvez maintenant retrouver le site à l'adresse : http://blog.passeurs-de-savoirs.fr/

Si vous suivez le site via son flux rss, sa page Facebook ou à travers mon compte Twitter le déménagement devait être transparent pour vous et vous devriez continuer a recevoir de nos nouvelles.

 

Si par contre vous avez fait un bookmark pour retrouvez la page d’accueil, je vous invite à le mettre à jour.

 

Oui, mais pourquoi déménager ?

 

En voilà une question qu'elle est bonne l'atelier est né il y a deux ans après une conversation avec Nathalie, qui m'avait fait remarquer que quand je publiait un article sur mon quotidien de chef de projets web, sur mon site perso, ça faisait très un peu peur a mes amis lecteurs non techniciens.

Cette judicieuse remarque m'avait incité à créer un blog «Geek» et comme à l'époque j'étais très curieux de mieux comprendre blogspot, j'avais décidé d'utiliser cette plateforme pour publier.

Quelques mois plus tard, je lançait l'agence  web passeurs de savoirs, et peu a peu, les expériences que j'ai eu dans la création d'outils et de sites pour mes  clients ont été  l'une des sources d'inspiration pour les articles de ce blog.

C'est pourquoi il y a quelques jours, je me suis dit qu'il était pas incohérent de rapatrier le blog sur le même nom de domaine que l'agence, et que ce serait l’occasion de faire un petit billet ici sur la migration de blogspot à WordPress.

 

Soyez donc les Bienvenus sur ce «nouveau blog», vous, mettez vous donc à l'aise

 

 

report
news

Intégrer une carte avec Google, Mappy ou OpenStreetMap

La semaine dernière, je lisais sur le site geek de l’ami Nicolas que comme Wikipedia, Apple et Foursquare allaient d'ici peu utiliser OpenStreetMap à la place de google map.

Cela m'a incité, à vous proposer un petit article sur l’intégration de cartes avec des marqueurs personnalisés sur vos sites avec 3 outils.

  • Google map, qui est très rependu, mais dont l'utilisation sur des sites a fort trafic nécessite l’achat d'une licence d'utilisation,
  • Mappy qui fait partie du groupe pages jaunes (on retrouve d'ailleurs leur carte sur l'ensemble des sites du groupe)
  • et différentes intégrations d'OpenStreetMap , un projet de cartographie libre (à la manière par exemple de wikipédia) animé par des internautes et que je vous propose de mettre en œuvre grâce à la librairie Leaflet 

Je ne vais pas vous faire un énorme tutoriel (d'autres le font bien mieux que moi, et les docs des trois outils sont assez bien faites) mais vous proposer un exemple très d’intégration simple.

Une carte du centre-ville de Guingamp avec une icône personnalisée  indiquant la position du château.

Intégration avec l'Api Google

L'avantage de l'Api google est qu'elle propose une énorme base documentaire, ainsi que de nombreux tutoriaux, son inconvénient est que depuis quelques mois, son utilisation est payante pour les sites proposant plus de 5000 cartes par jour, pas de quoi s’inquiéter pour un petit site, mais si la mise a disposition de carte à vos utilisateurs est au cœur de votre site, cela peut rapidement poser problème.

Notre carte ressemblera à ceci.

Intégrer une carte avec Mappy

Mappy est un service de cartographie qui lui aussi propose une API, l'avantage est que son utilisation est gratuite (pour un site web public) et sans (presque) aucune limitation d'affichage.

Par contre, vous avez besoin d'une clé d'application (token) pour l’implémenter sur un site.

Le résultat ressemblera à ceci

Intégrer une carte avec OpenStreetMap

Openstreetmap est un projet libre, et international, (un peu à la manière de wikipedia) animé par de nombreux internautes de part le monde. Son objectif est de proposer des données cartographique librement utilisables par tous.

Ce qui signifie, que rien (a part peut être les connaissances technique et les ressources système nécessaires) ne vous interdit de créer votre propre serveur de cartographie à partir des données du projet.

Dans la pratique certaines entreprises (comme cloudmade, ou mapquest par exemple) vous proposent d'accéder à ces données hébergées sur leur serveurs. Ce qui permet d'accéder à de nombreux modèles de cartes différentes.

Comme Openstreetmap est un projet libre, de nombreux développeurs on créé des librairies dans différent langages qui permettent de manipuler les données Openstreetmap .

Sur son site, OpenStreetMap utilise la librairie Openlayer , cependant, pour afficher une carte, l'utilisation de la librairie leaflet est parfois plus facile, (et un peu moins lourd en ressourc.

Leaflet et téléchargeable ici http://leaflet.cloudmade.com/

Le résultat ressemblera à ceci

note cependant au passage que l'aspect des cartes peut évoluer en fonction de ton fournisseur de fonds de cartes :

voici la même carte réalisée à partir des données sur serveur open mapquest

pour ce faire on remplace le code :

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/[votretoken]/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Données de la carte © OpenStreetMap et ses contributeurs, CC-BY-SA, Images © CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.addLayer(cloudmade);

par

var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
e='font-family: "Courier New",Courier,monospace;'>
subDomains = ['otile1','otile2','otile3','otile4'],
cloudmadeAttrib = 'données, imagespar MapQuest, OpenStreetMap et ses contributeurs, CC-BY-SA';
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
map.addLayer(cloudmade);

pour aller plus loin

S'il te venait l'envie de créer ton propre serveur de cartes, je t'invite à te plonger dans cette page qui liste de nombreuses ressources

Pour découvrir tous les outils, librairie et frameworks qui permettent de travailler avec l'Api c'est ici http://wiki.openstreetmap.org/wiki/Develop/Frameworks

pour en savoir plus sur OpenStreetMap : http://wiki.openstreetmap.org/wiki/FR:Main_Page
le site des développeurs http://dev.www.openstreetmap.fr/

bref tout ça vous laisse de la matière pour faire de bien belles parties de cartes ;)

Personnalisez les marqueurs de vos Google Maps

Si vous diffusez des cartes sur vos sites web, vous souhaitez peut-être pouvoir utiliser des marqueurs personnalisés à la place des icônes par défaut proposées par Google maps, Mappy ou les autres services de création de cartes en ligne.

Si c’est le cas, vous allez adorer le site Map icons collection.

Ce site créé par le webdesigner Nicolas Mollet  propose plus d'un millier de marqueurs pour vos cartes regroupant des thèmes aussi divers que les transports, les commerces, les sites touristique, etc.

Vous pouvez télécharger l’ensemble des icônes qui sont diffusées sous licence CC-BY-SA (vous devez créditer map Icons et faire un lien sur le site depuis votre projet)

Mais vous pouvez aussi facilement « customiser » vos créations, en effet pour chaque icône, le site vous propose 7 déclinaisons et un générateur qui vous permet de choisir la couleur précise que vous souhaitez pour votre marqueur.

Un projet à découvrir ici : http://mapicons.nicolasmollet.com/

about
e-mail
participate
about
Bear

Switch to our mobile site