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

carte-alentours-wordpress
Définissez les lieux autours d’un point géographique, grâce à cette extension 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…

associer-marqueur-carte
On ne va pas simplement jeter des marqueurs sur une carte…

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 :

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 !

30 commentaires
Daniel, il y a 4 années
Comme je te l’ai déjà dit, ton plugin est excellent : il est beau, pratique, optimisé SEO et il est modifiable facilement.

Bravo encore 😉

Michael, il y a 4 années
Un plugin vraiment excellent : beau graphique, facile à installer et à paramétrer et surtout optimisé pour le référencement, que demander de mieux !!

Bravo et merci ça va m’être utile pour un de mes projets.

Nokow, il y a 4 années
Alors là, je dis bravo, double bravo, triple bravo, je m’agenouille à tes pieds, etc. tellement ce plugin est vraiment bien foutu.

Je bosse dans un office de tourisme, nous avons un grand écran tactile et je sens qu’avec une petite install wordpress et ce plugin, ça va rendre super bien. C’est sobre, propre est simple à utiliser.

Plusieurs options me viennent à l’esprit pour d’éventuels futures améliorations :

– la possibilité de tracer des itinéraires qui me serait bien utile pour proposer des circuits de visite ou de randonnée.

– la possibilité d’avoir des menus déroulants par catégorie (genre les hôtels ensemble, les restaurants ensemble, les sites touristiques ensemble). Sur la carte, ça ne me gêne pas qu’il y ai plein de marqueurs, mais si on doit scroller sur des pages et des pages, ce n’est pas forcément super confortable

– La possibilité de créer plusieurs cartes différentes, sur lesquels on assigne des lieux différents, vu que sur mon secteur touristique, j’ai près de 200 éléments à marquer.

– éventuellement la possibilité de trier par catégorie, pour afficher où non sur la carte.

Voilà, je ne sais pas si tout ça est réalisable et si tu as envie de modifier le plugin, qui est déjà très bien comme ça. En tout cas, je vais l’installer sur plusieurs de mes sites, c’est clair.

Greg, il y a 4 années
« <3 Favorited"
Voilà, un com' simple mais efficace ^^

Bravo Willy 🙂

bweblog, il y a 4 années
Excellent … ( Mr Burns )
stef, il y a 4 années
Excellent et si on peut faire une animation d’un point A a un point B ( course cycliste par exemple) en mod itineraires …)
dmsr, il y a 4 années
Ce qui serait vraiment chouette c’est une custom Taxonomie interfacée avec Geonames, pour classer automatiquement hiérachiquement les lieux façon « breadcrumbs », exemple (valable ici en france mais adaptable à tous pays): pays>region>departement>arrondissement de>ville
et ceci juste en entrant un code postal, l’API geonames le permet!
dmsr, il y a 4 années
Remarque: si tu veux vraiment séparer sémantiquement les données il faut distinguer les lieux (une adresse) des coordonnées de contact (personne/organisation) car à une même adresse on peut trouver plusieurs entités (mais ce n’est pas la seule raison). Il faudrait donc avoir un CPT contact « liable » aux lieux. Connais-tu le plugin CPT-onomies? ou bien Post-2-Post de Scribu?
Arnaud, il y a 4 années
Hello,

Et merci pour ce plugin 🙂 facile à mettre en place et à paramétrer et optimiser seo, bon boulot !

tontonphil, il y a 4 années
Merci pour cet article, excellente cette extension, je l’adopte !
Hello,

une question (urgente et j’en suis désolé ) je cherche à connecter un plugin map à une base de données de lieux répertoriés par noms de communes ou code INSEE, à défaut CODE POSTAL. Est-ce facilement faisable ? (je suis intégrateur WP, à l’aise avec PHP mais pas développeur pour autant hein !).
Merci de ta réponse 🙂

Guillaume, il y a 4 années
Bonjour, est-il possible d’ajouter du texte dans la bulle qui s’ouvre quand on clique sur un icône. J’aimerais faire apparaître les coordonnées postale du lieu par exemple.
De plus les horaires ne s’affichent pas, est-ce normal ?
Nicolas Allanot, il y a 4 années
Ce plugin est tout simplement grandiose, cependant il ne semble pas compatible avec free.fr et je ne vois pas quel est le problème. Si vous avez des piste ?!
vivien, il y a 4 années
Bonjour, est-il possible, sur des custom content type hiérarchisé de ne localiser que les parents ?
Willy Bahuaud, il y a 4 années
Bonjour,
Je travaille actuellement sur la version 1.0 qui, autre autre, ajoutera cette fonctionnalité.

Stay tuned 🙂

Jean Michel, il y a 4 années
,

y-avait-il un souci avec ma question du mois dernier ?
(si la réponse est quelque part sur le site dis le moi, je chercherai)

@+ et merci,

vivien, il y a 4 années
J’attends cette version avec impatience 🙂
je retourne mettre les mains sous le capot.

Willy Bahuaud, il y a 4 années
Non non, pas spécialement de soucis ^_^ En fait c’est possible de câbler le plugin à une base de donnée de la sorte, je l’ai déjà fait. Par contre il faut disposer d’une telle base. En as-tu une ?

soon… 🙂

Jean Michel, il y a 4 années

j’en ai une, en sql que jai encodée en json pour cause de contrainte d’affichage des markers google.

Thigat, il y a 4 années
Bonjour,
Je suis désolé de vous importuner, mais j’ai rien compris. Etant novice, j’utilise wordpress depuis peu. Mon voeux serai d’installer une carte des fromages de France sur mon site. Donc en mettant le nom du fromage, le lieu de sa fabrication et quelques infos sur le producteurs si c’était possible.
En fait ce que je comprend pas, c’est comment mettre en place ce plugin. Oui il est installer, et j’ai mis [maps] dans un nouvel article pour mettre cette carte, mais il n’y à rien…)…
Pouvez-vous m’aider. Merci
JMT
Togk, il y a 4 années
C’est juste du Grand Art ! Merci !!!!
Éric, il y a 4 années
Bonjour,
plugin sympa et facile à mettre en œuvre !
J’aimerais lui ajouter une fonction qui serait le filtre par département. J’ai donc ajouté un custom field « Departement » aux lieux et je voudrai maintenant avoir un filtre (champs texte ou champs select) sur la page [map] qui permettrait de n’afficher que les lieux correspondants au département choisi.

Une aide ou une petite piste serait la bienvenue :).
Merci d’avance

Baptiste, il y a 4 années
Tout ca c’est super! Mais tu oublis la chose principale : L’adresse postale du lieu ne figure nulle part!!!
Willy Bahuaud, il y a 4 années
L’adresse postale du lieu figure par défaut sur la fiche de détail du lieu.

Par contre ça ne se voit pas sur la démonstration actuellement ^^ j’avoue (je bidouille une petite peu le code du site de démo pour faire des tests.

iouston, il y a 3 années
Wouahou, super plugin et super boulot ! Bravo !
J’aimerais savoir si il est possible d’afficher une map en ciblant un lieu particulier (par l’id du lieu par exemple) et dans le shortcode ?
Arno, il y a 3 années
Bonjour,

Très bon outil !!! Bravo!

Je souhaite afficher un fichier KML ou geojson au-dessus du fond de carte qui représenterait ma commune.
Où puis-je ajouter le code nécessaire?

Merci d’avance du retour
Arno

lolotrail, il y a 3 années
Salut, ça semble du super bon boulot. Cependant, existe-t-il un support quelque part car j’ai un souci : j’ai installé, activé, ajouté des lieux, ajouté une page avec le code [maps], jusque là, c’est OK. Par contre, en cliquant sur les liens « en savoir plus », je suis dirigé vers http://site/places/lieu mais il me ressort « page not found » ??? D’où une autre question : ce lien « en savoir plus » pourrait-il être paramétrable pour mettre une autre page ou article du blog? Merci pou la réponse…
Laurent, il y a 2 années
Bonjour Willy,

Super plug-in, qui correspond à ce que je cherchais.
Malheureusement, j’ai un bug, la carte qui s’affiche est vide.
Je vois les marqueurs des lieux, mais aucune carte géographique…
Aurais tu une piste pour que je trouve ou est le bug ?

Willy Bahuaud, il y a 2 années
Oui, je sais d’où ça vient : cloudemade, qui fournissait les tuiles de carte, à cessé cette activité, il faut donc définir un autre provider.
Je vais très prochainement lancer une mise à jour pour résoudre ce soucis, et apporter de nouvelles features.
En attendant, pour faire fonctionner le plugin, il faut procéder comme dans cet article, section « changer de fournisseur de carreaux » 🙂
Laurent, il y a 2 années
Cool, cela fonctionne en effet !
Par contre le système d’itinéraire ne fonctionne pas… Il y a une modif à faire pour lui aussi ?

Sachant que je suis en WP4.1…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Publié le 20 février 2013
par Willy Bahuaud
Catégorie Développement WordPress