Combien de points de vente une coopérative agricole peut-elle afficher sur une carte avant de dépasser le quota gratuit d’une API cartographique payante à l’appel ? La question s’est posée concrètement sur ce projet : quarante-sept points de vente répartis sur trois départements, avec un trafic suffisant pour faire craindre un dépassement de quota en pleine saison de récolte, au moment précis où la carte est le plus consultée.
Ce billet détaille la construction d’un bloc de carte s’appuyant sur Leaflet, bibliothèque cartographique libre, plutôt que sur une API cartographique commerciale facturée à l’appel. La logistique de livraison entre points de vente, sujet distinct, n’est pas traitée ici.
Pourquoi écarter une API cartographique commerciale
Les API cartographiques commerciales facturent généralement au nombre de chargements de carte, avec un quota gratuit mensuel limité. Sur un site à fort trafic saisonnier, ce quota peut être atteint en quelques jours, avec un coût qui grimpe ensuite proportionnellement au nombre de visiteurs, un modèle économique difficile à anticiper pour une coopérative au budget serré.
Leaflet, bibliothèque JavaScript libre et légère, permet d’afficher une carte interactive sans dépendre d’un service facturé au chargement, à condition de choisir un fournisseur de tuiles cartographiques lui aussi libre d’accès.
Le type de contenu « point de vente »
register_post_type( 'point_de_vente', array(
'label' => 'Points de vente',
'public' => true,
'show_in_rest' => true,
'supports' => array( 'title' ),
) );Chaque point de vente reçoit deux champs personnalisés simples, latitude et longitude, saisis une fois pour toutes lors de la création de la fiche, sans recalcul dynamique nécessaire ensuite.
Le bloc dynamique côté rendu
Le rendu du bloc génère une zone de carte, puis transmet la liste des points de vente au script front sous forme de données JSON incluses directement dans la page :
function afficher_carte_points_vente( $attributs ) {
$points = get_posts( array( 'post_type' => 'point_de_vente', 'numberposts' => -1 ) );
$donnees = array_map( function( $point ) {
return array(
'titre' => get_the_title( $point ),
'latitude' => (float) get_post_meta( $point->ID, 'latitude', true ),
'longitude' => (float) get_post_meta( $point->ID, 'longitude', true ),
);
}, $points );
return sprintf(
'<div id="carte-points-vente" data-points=\'%s\'></div>',
esc_attr( wp_json_encode( $donnees ) )
);
}
L’initialisation Leaflet côté front
const conteneur = document.getElementById( 'carte-points-vente' );
const points = JSON.parse( conteneur.dataset.points );
const carte = L.map( 'carte-points-vente' ).setView( [ 46.6, 2.5 ], 6 );
L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© contributeurs OpenStreetMap',
} ).addTo( carte );
points.forEach( ( point ) => {
L.marker( [ point.latitude, point.longitude ] )
.addTo( carte )
.bindPopup( point.titre );
} );L’arborescence des points de vente, pensée par zone
Points de vente
├── Département A (18 points)
├── Département B (21 points)
└── Département C (8 points)Ce que cette approche a permis d’éviter
- Aucun quota mensuel de chargement de carte à surveiller pendant la haute saison
- Aucune clé d’API à gérer, ni à renouveler, ni à sécuriser
- Un poids de page raisonnable, Leaflet restant nettement plus léger que la plupart des bibliothèques cartographiques commerciales
Sur un projet à trafic saisonnier marqué, on écarte systématiquement toute solution facturée à l’usage tant qu’une alternative libre couvre correctement le besoin : un pic de trafic ne doit jamais se traduire par une facture surprise.
En résumé
Une bibliothèque cartographique libre comme Leaflet, combinée à un fournisseur de tuiles ouvert, répond très bien au besoin d’affichage de points de vente d’une coopérative agricole, sans risque de dépassement de quota ni de facturation imprévisible. Le bloc reste simple à maintenir, entièrement piloté par un type de contenu classique dans WordPress.
