Carte IGN pour WS Form

Une carte et une autocomplétion d'adresse pour WS Form, sans Google et sans clé.

Pourquoi ce plugin

Les champs Google de WS Form marchent bien. Par contre, il leur faut un projet Google Cloud, de la facturation et une clé d'API. Pour placer un point sur une carte de France, ça fait beaucoup.

Du coup, ce plugin fait le même travail avec les services publics français : les fonds de carte de l'IGN et la Base Adresse Nationale. Il est gratuit, il ne demande aucun compte, et il marche avec WS Form LITE et PRO.

Installation

1. Télécharge wsform-ign-X.Y.Z.zip depuis la dernière release. Pas l'archive du code source : elle contient tout le dépôt.
2. Installe-le comme n'importe quelle extension, à côté de WS Form.
3. Les deux champs apparaissent dans le groupe « French public services » du constructeur.

Les mises à jour arrivent ensuite dans l'admin, depuis les releases GitHub.

Ce que ça ajoute

Carte IGN

• Plan IGN, ou photos aériennes
• Point placé au clic ou au toucher, déplaçable, effaçable, obligatoire si besoin
• Au clavier, un bouton « Placer le point au centre » apparaît quand on l'atteint avec Tab : à la souris, il ne servirait à rien
• Icône et titre du marqueur au choix
• Bouton optionnel sous la carte pour placer le point sur le visiteur, ou seulement centrer la carte sur lui : le navigateur ne demande sa position qu'après ce clic
• Sur mobile, un doigt fait défiler la page et deux doigts déplacent la carte

Adresse BAN

• Autocomplétion utilisable entièrement au clavier
• Remplissage d'autres champs : numéro et rue, code postal, ville, code INSEE, département, latitude, longitude
• Lien optionnel avec une carte, dans les deux sens
• Saisie libre toujours possible, pour une adresse à l'étranger par exemple

Pour les deux

• Les boutons, les messages et les suggestions suivent tes réglages de style WS Form
• Les messages se changent champ par champ, dans Avancé > Libellés
• Si les services IGN tombent, un message s'affiche et le formulaire reste envoyable
• Rien ne se charge sur une page sans ces champs

Afficher le point sur le site

Le plugin ne rend pas de carte en front. Avec Post Management, le point part en méta, et c'est ton thème ou ton bloc qui l'affiche.

Si tu veux éviter Google partout, prends la méta simple.

Voici un rendu Leaflet avec les tuiles IGN, à partir d'un champ ACF coordonnees_gps. Avec une méta simple, seule la lecture de $point change. Charge Leaflet de ton côté : celui du plugin n'est présent que sur les pages de formulaire.

$point = get_field( 'coordonnees_gps' );

if ( ! empty( $point['lat'] ) && ! empty( $point['lng'] ) ) {
    printf(
        '<div class="carte-ign" style="height: 400px" data-lat="%s" data-lng="%s" data-zoom="%s"></div>',
        esc_attr( $point['lat'] ),
        esc_attr( $point['lng'] ),
        esc_attr( $point['zoom'] ?? 16 )
    );
}

/**
 * Affiche une carte IGN avec un marqueur.
 *
 * @param {HTMLElement} element Conteneur avec data-lat, data-lng et data-zoom.
 */
function initIgnMap( element ) {
    const position = [ parseFloat( element.dataset.lat ), parseFloat( element.dataset.lng ) ];
    const map = L.map( element ).setView( position, parseInt( element.dataset.zoom, 10 ) || 16 );

    L.tileLayer(
        'https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&STYLE=normal&FORMAT=image/png&TILEMATRIXSET=PM&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
        {
            maxZoom: 19,
            attribution: '<a href="https://cartes.gouv.fr/rechercher-une-donnee/dataset/IGNF_PLAN-IGN">IGN, Plan IGN</a>',
        }
    ).addTo( map );

    L.marker( position ).addTo( map );
}

document.querySelectorAll( '.carte-ign' ).forEach( initIgnMap );

La licence des tuiles demande de citer la source : garde l'attribution.

Piloter la carte depuis un autre script

La carte écoute deux événements jQuery sur son input masqué, et en déclenche un. Le champ Adresse BAN s'en sert, Recherche SIRET pour WS Form aussi : c'est un contrat, il ne changera pas sans être annoncé dans le changelog.

L'input se trouve par l'identifiant que WS Form lui donne. Dans une section répétable, ajoute le suffixe de la ligne, que donne get_section_repeatable_suffix().

/**
 * Centre une carte IGN sur un point et y écrit une adresse.
 *
 * @param {Object} formInstance Instance WS Form du formulaire.
 * @param {number} mapFieldId   Identifiant du champ Carte IGN.
 */
function showOnIgnMap( formInstance, mapFieldId ) {
    const mapInput = document.getElementById( formInstance.form_id_prefix + 'field-' + mapFieldId );

    jQuery( mapInput ).triggerHandler( 'wsfign-map-show', [
        { lat: 48.8686, lng: 2.3334, zoom: 17, address: '34 avenue de l’Opéra 75002 Paris' },
    ] );
}

Passe par triggerHandler() plutôt que trigger() : l'événement reste sur l'input et ne remonte pas dans le formulaire.

Les limites

• Adresses : seules les adresses françaises sont suggérées.
• Sections répétables : LITE n'en a pas, il te faut donc PRO pour y placer ces champs.
• Format de la valeur : la carte enregistre un JSON. Il s'affiche en latitude,longitude dans la liste des soumissions, l'export CSV et les e-mails. Il reste en JSON dans #field(ID) hors e-mail et dans le détail d'une soumission, car WS Form n'y offre aucun filtre.
• Autres extensions de champs : le mapping n'a été testé qu'avec ACF et Meta Box. WS Form sait aussi écrire vers JetEngine, Toolset et ACPT, mais rien n'a été essayé avec ces trois-là.

Confidentialité

Le plugin n'ajoute ni traceur ni télémétrie. Par contre, le navigateur du visiteur contacte directement les serveurs de l'IGN (data.geopf.fr). Ils reçoivent donc son adresse IP et le texte saisi dans le champ adresse.

Mentionne ce service dans ta politique de confidentialité, y compris si tu affiches les tuiles sur d'autres pages.

Développer

composer install
composer lint
bin/build-release.sh

L'environnement de test est décrit dans docs/dev-ddev.md. Pour publier, passe la version dans wsform-ign.php (en-tête et constante) et dans readme.txt, puis pousse un tag vX.Y.Z. Le workflow refuse un tag qui ne correspond pas.

Le plugin se met à jour depuis GitHub, et les règles de WordPress.org l'interdisent. C'est pour ça qu'il n'est pas sur le répertoire.

Licence

GPL-2.0-or-later. Leaflet 1.9.4 est embarqué sous licence BSD-2-Clause. Ce plugin n'est affilié ni à l'IGN ni à WS Form.

Fait par Willy Bahuaud.