Nearby Map : une carte des alentours

Nearby Map est un plugin WordPress conçu pour ceux qui souhaitent faire la promotion d’un lieu, en fonction des services et des attractions aux alentours.

Je pense évidemment aux secteurs du tourisme, de l’hôtellerie, de l’évènementiel…

… mais plus génèralement cet outil est pour tout ceux qui cherchent un plugin de carte simple et puissant sur WordPress

Voir la démonstration

À quoi sert ce plugin ?

Ce plugin permet de réaliser une carte géographique pour présenter des lieux d’intérêt autour d’un point de référence.

Carte des alentours

La fonctionnalité principale de cette extension est de créer une carte géographique qu’il est possible d’insérer où l’on veut grâce à un shortcode.

Sur celle-ci on retrouve tous les lieux renseignés dans l’administration, avec des marqueurs de tailles, couleur et pictogrammes personnalisés.

Pour ne pas trop alourdir le chargement du plugin, j’ai préféré utiliser une police d’icônes composée sur Fontello, plutôt que des images. C’est du vectoriel, très simple à utiliser et le choix est assez large 🙂

Bien évidemment à chaque marqueur correspond une infobulle (pas trop laide) qui affiche les raccourcis de contact s’ils sont définis.

Mais aussi, sous la carte et en lien avec chaque puce, des blocs reprennent les informations de chaque entrée d’une manière un peu plus accessible. Si vous survolez un bloc, le marqueur correspondant sautille, c’est t’y pas mignon ça ?

Présentation des points d’intérêt à proximité

En plus d’une carte globale, chaque lieu a une page qui lui est dédiée, et où sont reprises les informations géographiques et pratiques qui lui sont propre.

On y trouvera donc les informations de contact, les horaires d’ouvertures, les coordonnées géographiques (avec un lien vers OpenStreetMap) ainsi que la distance entre ce lieu et celui que vous aurez choisi pour référence.

Bien entendu, vous pouvez enrichir cette page avec les mêmes possibilités que le reste de vos contenus.

Un système d’itinéraire

Accompagnant la carte, un système d’itinéraire permet de trouver la route :

• entre deux endroits présentés sur votre site
• d’une provenance inconnue, et à destination d’un lieu enregistré dans le plugin
• d’une origine renseignée dans le système vers des coordonnées choisies par l’internaute

On peut préciser sa recherche en choisissant un moyen de locomotion. Le mode de transport sélectionné s’affichera sur la carte et parcourera le chemin apparu en surbrillance.

À noter que la voiture va plus vite que le vélo ou le piéton 😉

Qu’a-t’il de différent des autres plugins de carte WordPress ?

Avant de concevoir ce plugin, j’ai fouillé l’extend de WordPress pour avoir s’il n’existait pas des extensions avec les fonctionnalités dont j’ai besoin. Je n’en n’ai pas trouvé faisant exactement ce que je souhaitais, à savoir…

Pas de google maps

J’en ai un peu ma claque de Google Map. On le voit partout et on le reconnait à des kilomètres. Certes ce service est puissant, précis, complet… mais moi ce que j’ai envie c’est d’une map avec un peu de cachet. Et puis il existe d’autre APIs, d’autres services, alors j’avais envie de voir un peu ce qui se faisait ailleurs.

Le plugin fonctionne donc avec la base de donnée géographique OpenStreetMap (vive le libre !!) ainsi qu’avec la librairie javascript Leaflet et l’API de CloudMade (utilisé aussi pour fournir les carreaux).

Ce trio est parfait !  En plus C’est beaucoup plus clair et simple à utiliser que le service de Google. Par exemple pour animer les marqueurs, il m’a suffit d’utiliser une simple animation CSS…

Des lieux « reliés » entre eux

L’autre intérêt du plugin, c’est de s’intéresser surtout aux liens qu’ont les lieux entre eux. Il ne s’agit pas seulement de jeter des coordonnées géographiques en vrac sur une carte…

Non il s’agit surtout de dire qu’autour de ce lieu central, il existe un tas d’endroits intéressants, de services de proximité, de transports, bref…

Il s’agit de mettre en valeur un point géographique par ce qui l’entoure.

Une interface simple, claire, intuitive

Ce que ce plugin a de plus que les autres, c’est aussi de ne pas être une usine à gaz. En regardant un peu ce qui se fait on se rend rapidement compte que la plupart sont des moulinettes qui génèrent des shortcodes de 3 kilomètres à insérer dans ses articles.

Sans moi donc…

Nearby Map, c’est un plugin qui se veut simple. Il utilise un Custom Post Type « lieux », avec des informations simples à comprendre, un choix de marqueurs et d’icônes limité mais qualitatif et ça suffit largement !

SEO friendly grâce aux microformats

J’avais quasiment fini le plugin lorsque Daniel Roch, référenceur, m’a suggéré :

Tu devrais utiliser les microformats, schema.org, tout ça… Ce serait un vrai plus pour le référencement.

Quelle excellente idée ! C’est vrai que cela s’y prête parfaitement. Une carte est quelque chose de très abstrait pour un moteur de recherche. Du coup utiliser les microformats, c’est l’aider à comprendre qu’il s’agit de lieux géographiques, et lui donner des précisions sur chacun d’entre eux.

Dans la page d’édition de tous les lieux il y a donc possibilité de choisir la nature de cet endroit.

Ensuite lors du rendu de la carte ou des pages de détail des lieux, le markup de schema.org sera utilisé pour le balisage des informations géographiques et pratiques. Et cela a toute les chances de venir enrichir l’affichage de ces contenus dans les pages de résultats de recherche des moteurs.

Comment l’installer ?

Déjà pour l’installer il faut se le procurer. Soit en cherchant Nearby Map dans la rubrique « extensions » de votre WordPress, soit directement en le téléchargeant sur l’Extend.

Ensuite il suffit de l’activer.

Dès lors, un nouveau type de contenu « Lieux » sera disponible dans votre administration. Renseignez-en quelques un !

Vous pouvez choisir, ou pas, de désigner un lieu comme point de référence). Dans l’éditeur d’un lieu, vous pouvez ajouter le shortcode [place] pour faire apparaître le bloc reprenant les informations géographiques et pratiques du lieu courant.

Puis sur la page de votre choix (cela peut être la page d’archive des lieux), il suffit d’utiliser le shortcode [maps] pour afficher la carte, les blocs de détails et l’itinéraire. Vous pouvez, si vous le souhaitez, désactiver certaines de ces fonctionnalités (voir la catégorie FAQ sur la page du plugin).

Le greffer sur un type de contenu déjà existant

Si vous avez déjà créé un custom post type pour présenter des points d’intérêt, le plugin peut s’y appliquer, au lieu de créer son propre type de contenu. Il faut simplement, dans votre fichier functions.php, insérer le code suivant :

add_filter( 'nbm_post_type', 'function_for_alter' );
function function_for_alter() {
    return 'posts'; //mon CPT
}

Ainsi, toutes les fonctionnalités de Nearby Map seront directement appliquées au Custom Post Type de votre choix.

Comment le personnaliser ?

Le plugin ne se voulant pas « usine à gaz », il n’embarque pas de menu d’options ou autres fenêtres de ce genre.

Il est néanmoins facilement personnalisable grâce à une tonne de filtres ^^

Des styles de carte personnalisés

Une des force de CloudMade, c’est de proposer une quantité impressionnante de styles de carte. On peut même créer ses propre styles grâce à l’éditeur fourni par le service.

Cependant, j’ai remarqué que les tuiles (carreaux qui composent le rendu de la map) étaient plus rapidement chargé lorsque l’on utilise une coloration conçue par CloudMade (mise en cache ?).

Pour appliquer une apparence différente, rendez vous sur l’éditeur puis repérer l’ID du style qui vous intéresse.

Dans le fichier functions.php de votre thème ajouter le code suivant (en remplaçant l’ID du style) :

add_filter( 'cloudmade_style', 'my_custom_style' );
function my_custom_style() {
    //If I want to use "midnight Comander coloration" style
    return 999;
}

Aaaaaaand it’s done !

Activer/désactiver des fonctionnalités

Pour désactiver des fonctionnalités telles que l’itinéraire ou les blocs de détails, il suffit encore d’insérer un de ces codes dans le fichier functions.php :

//utiliser google map pour trouver des coordonnées GPS (plus précis :-/)
add_filter( 'nbm_try_to_find_with_openstreetmap', '__return_false' );

//enlever les blos de détail
add_filter( 'nbm_need_more', '__return_false' );

//supprimer l'itinéraire
add_filter( 'nbm_need_route', '__return_false' );

//supprimer le lien vers les page des détail des lieux
add_filter( 'nbm_places_link', '__return_false' );

Vous trouverez plus d’informations sur les différentes possibilités d’override du plugin sur la FAQ.

Changer de fournisseur de carreaux

J’ai choisi CloudMade comme fournisseur de tuiles car c’est vrai qu’elles sont quand même magnifiques. Sachez cependant que vous être libre d’utiliser le provider que vous souhaitez avec l’extension.

Il en existe plus d’une dizaine, et certains ont des particularités étonnantes (carte des nuages en temps réel, par exemple ^^).

En voici une liste non exhaustive :

• MapQuest : tuiles normale ou vue satellite (haut niveau de zoom indisponible en Europe)
• OpenStreetMap : les carreaux par défaut
• MapBox : jolies mais avec limitations
• OpenCycleMap : carreaux avec les circuits de vélo
• Stamen : Tuiles très originales et rendu magnifique
• ESRI : tuiles géographiques et diverses (GeoCommons)
• Open Weather Map : vues météorologiques (nuages, températures…)

Donc si vous avez besoin d’en changer, utilisez le code suivant :

add_filter( 'maps_datas', 'function_for_alter' );
function function_for_alter( $maps_datas ){
    //tiles = URL du provider (liste dans la FAQ)
    $maps_datas['tiles'] = "http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg";

    //le copyright
    $maps_datas['attribution'] = "attribution I want/use to show";

    //les sous domaines de tuiles (si besoin)
    $maps_datas['subdomains'] = array('otile1','otile2','otile3','otile4');

    return $maps_datas;
}

Vous trouverez de nombreux autres fournisseurs de carreaux en cherchant sur internet…

Pour se rendre compte du plugin, je vous propose de jeter un oeil à la démonstration de Nearby Map.

N’hésitez pas à me faire part de votre avis en notant l’extension sur wordpress.org !