Le plugin ClicOnMap2Address

Le Plugin ClicOnMap2Address

Mon plugin ClicOnMap2Address permet, en cliquant sur une carte inter-active, d’obtenir l’adresse du lieu et ses coordonnées GPS. De plus, il les recopie dans le presse-papier. Il synchronise également ses données avec un formulaire qui vous permet de réutiliser ces données partout dans votre site !

Interface

Fonctionnement

Le plugin [cliconmap2address] affiche une carte interactive permettant de sélectionner une adresse.
L’utilisateur peut déplacer le marqueur ou modifier sa position sur la carte.
La position sélectionnée est convertie automatiquement en adresse grâce au géocodage inverse.
Les informations de l’adresse sont récupérées : numéro, rue, ville, code postal, région et pays.
La latitude et la longitude du point sélectionné sont également disponibles.
Les différents éléments peuvent être synchronisés automatiquement avec les champs d’un formulaire.
Après chaque changement d’adresse, les informations actualisées peuvent être copiées dans le presse-papier.
Le bouton « Réinitialiser la position » ramène la carte au point par défaut avec le zoom 14.
La page « Réglages » permet de configurer l’affichage et le comportement de la carte.
Le « Mode d’emploi » explique le fonctionnement du plugin, ses réglages et son utilisation.

Mode d’emploi

1. Installer et afficher la carte

Activez le plugin dans Extensions.
Dans la ligne ClicOnMap2Address, cliquez sur Réglages.
Placez [cliconmap2address] dans une page, un article ou un bloc Shortcode.
Cliquez sur la carte pour obtenir l’adresse du point choisi.

2. Carte et zoom

La carte s’ouvre par défaut sur Avrillé avec un zoom de 14. Modifiez la latitude, longitude ou le niveau de zoom si nécessaire. Zoom à la molette est activé par défaut et peut être désactivé.

3. Carte ou satellite

Choisissez le fond affiché à l’ouverture. Le sélecteur Carte / Satellite permet ensuite au visiteur de changer de fond si l’option est activée.

4. Adresse affichée

L’onglet Adresse permet de contrôler séparément l’adresse complète, numéro, rue, code postal, ville, région/département, pays et coordonnées GPS.

5. Presse-papier

Après chaque changement de position, lorsque le géocodage inverse est terminé, le plugin tente de copier automatiquement les informations actualisées dans le presse-papier : Adresse complète, Numéro, Code postal, Ville, Région / département, Pays, Latitude et Longitude.

Le navigateur peut toutefois refuser une écriture automatique dans le presse-papier lorsque la page n’est pas autorisée à utiliser cette fonction. Le plugin tente alors une méthode de secours compatible avec les navigateurs qui l’acceptent.

6. Formulaires

Activez la synchronisation et indiquez les attributs name de vos champs. Les valeurs obtenues par géocodage inverse peuvent alors être reportées automatiquement.

7. Shortcode et personnalisation

Les attributs historiques restent compatibles, par exemple :
[cliconmap2address lat="47.48545" lon="-0.58832" zoom="10" height="450px" selection="both" hidden_fields="1" form_sync="1"]
Les réglages généraux servent de valeurs par défaut.

8. Fonctionnement

Le plugin utilise Leaflet pour la carte, OpenStreetMap pour le fond cartographique, Esri World Imagery pour le satellite et les mécanismes de reverse geocoding déjà intégrés au plugin. Une requête externe est effectuée lorsqu’une position est sélectionnée.

9. Bonnes pratiques

Conservez une largeur de 100% pour une intégration responsive.
Évitez un zoom trop élevé si vous souhaitez laisser l’utilisateur explorer une zone.
N’activez les champs cachés et la synchronisation que si votre formulaire en a besoin.

Configuration

Onglet « Carte »

Cet onglet permet de configurer l’apparence et le comportement de la carte affichée sur votre site.

1. Définir la position initiale de la carte
Renseignez la latitude et la longitude correspondant au point où la carte doit s’ouvrir. Vous pouvez également définir le niveau de zoom initial. Plus la valeur du zoom est élevée, plus la carte sera rapprochée.

2. Définir les dimensions de la carte
Indiquez la largeur et la hauteur souhaitées. Vous pouvez utiliser des valeurs en pixels (800px), en pourcentage (100%) ou avec les unités CSS usuelles (90vw, 450px, etc.).

3. Configurer les commandes de navigation
Activez ou désactivez les options selon vos besoins : zoom avec la molette de la souris, boutons de zoom + / −, choix entre la vue Carte et Satellite, ou bouton permettant à l’utilisateur d’afficher sa position.

4. Choisir le fond et le mode de sélection
Sélectionnez le fond affiché au démarrage : OpenStreetMap ou Satellite. Le « Mode de sélection » détermine comment l’utilisateur choisit une adresse : en cliquant directement sur la carte, en déplaçant le marqueur, ou en utilisant les deux possibilités.

Après avoir effectué vos modifications, cliquez sur Enregistrer les modifications pour appliquer la configuration.

Onglet « Adresse »

Cet onglet permet de choisir les informations relatives à l’adresse qui seront affichées après la sélection d’un emplacement sur la carte.

1. Choisir les informations à afficher
Cochez les informations que vous souhaitez afficher : adresse complète, numéro, rue, code postal, ville, région/département, pays et coordonnées GPS. Vous pouvez sélectionner uniquement les informations nécessaires à votre utilisation.

2. Utiliser les champs HTML cachés
Les champs cachés permettent de conserver les informations de localisation sans les afficher directement à l’utilisateur. Vous pouvez créer un champ pour chaque donnée : latitude, longitude, numéro, rue, code postal, ville, région, pays ou adresse complète.

3. Personnaliser les noms des champs
Pour chaque information, indiquez le nom HTML (name) que vous souhaitez utiliser. Ces noms peuvent ensuite être exploités par un formulaire ou par votre propre code.

4. Activer le remplissage automatique
Lorsque cette fonction est activée, les champs cachés sont automatiquement renseignés lorsque l’utilisateur sélectionne une position sur la carte. Le plugin effectue alors un géocodage inverse afin de transformer les coordonnées GPS en informations d’adresse.

Après configuration, cliquez sur Enregistrer les modifications.

Onglet « Formulaires »

Cet onglet permet de transmettre automatiquement les informations récupérées sur la carte vers les champs d’un formulaire.

1. Activer la synchronisation
Activez l’option « Reporter les valeurs dans les champs du formulaire » pour permettre au plugin de remplir automatiquement les champs du formulaire lorsqu’une adresse est sélectionnée sur la carte.

2. Indiquer les noms des champs
Pour chaque information, renseignez le nom HTML (name) du champ correspondant dans votre formulaire : latitude, longitude, adresse, numéro, rue, code postal, ville, région et pays.

3. Vérifier la correspondance
Le nom indiqué dans la configuration doit correspondre exactement à l’attribut name du champ du formulaire. Par exemple, si votre champ possède name="ville", indiquez ville dans le champ correspondant de la configuration.

4. Tester le fonctionnement
Affichez la carte sur une page contenant votre formulaire, sélectionnez un emplacement ou déplacez le marqueur, puis vérifiez que les champs du formulaire sont automatiquement remplis avec les informations récupérées.

Le plugin peut également prendre en charge les champs utilisant une structure telle que form_fields[...], utilisée notamment par certains constructeurs de formulaires.

Après vérification, cliquez sur Enregistrer les modifications.

Onglet « Mode d’emploi »

Cet onglet fournit les instructions nécessaires pour utiliser correctement le plugin et intégrer la carte dans une page de votre site.

1. Insérer la carte dans une page
Utilisez le shortcode [cliconmap2address] dans la page ou l’article où vous souhaitez afficher la carte. Le plugin utilisera automatiquement les paramètres enregistrés dans les différents onglets de configuration.

2. Configurer la carte
Avant d’utiliser le shortcode, configurez la position initiale, le zoom, les dimensions, le fond cartographique et les options de navigation dans l’onglet Carte.

3. Configurer les données d’adresse
Dans l’onglet Adresse, choisissez les informations qui doivent être affichées et, si nécessaire, activez les champs HTML cachés afin de récupérer les coordonnées et les différentes parties de l’adresse.

4. Connecter un formulaire
Si la carte doit être utilisée avec un formulaire, configurez l’onglet Formulaires en indiquant les noms des champs qui doivent recevoir les données. Une fois la configuration terminée, insérez [cliconmap2address] sur la page concernée et effectuez un test en sélectionnant différents emplacements sur la carte.

L’onglet Mode d’emploi sert donc de guide de référence pour comprendre et utiliser les principales fonctionnalités du plugin.

Téléchargez le Plugin

Commencez par télécharger le Plugin en cliquant sur le bouton « Télécharger ». Vous récupérez ainsi le Plugin au format Zip que vous enregistrez sur votre bureau.

Installez le Plugin

Dans le Tableau de Bord de WordPress, cliquez sur Extensions puis successivement sur les bouton « Ajouter une extension » puis « Téléverser une extension » puis « Parcourir ». L’explorateur de fichiers s’ouvre. Sélectionnez votre « Bureau » puis le fichier « ClicOnMap2Address_v2.1.4.zip » que vous avez précédemment téléchargé. Vous pouvez vérifier que le Plugin est bien installé en cliquant sur le Tableau de Bord de WordPress, puis Extensions. ClicOnMp2Address apparait alors dans la liste des extensions. Il ne vous reste plus qu’a l’activer en cliquant sur « Activer ».

Désinstaller le Plugin

J’ai intégré un désinstalleur pour supprimer le Plugin en toute sécurité si besoin.
Dans le Tableau de Bord de WordPress, cliquez sur Extensions, puis Réglages pour accéder à la configuration du Plugin. Après avoir cliqué sur Désactiver, l’onglet Supprimer apparait.
Il suffit de cliquer dessus pour désinstaller le plugin.
Les pages utilisant le Plugin ne sont pas effacées lors de la désinstallation du Plugin.

MaForge49