Blog

Des cartes à vos couleurs

Vous avez choisi votre thème, réglé vos couleurs, vos polices et vos icônes pour que votre app vous ressemble. Puis vos utilisateurs ouvrent la carte et retrouvent celle qu'ils connaissent par cœur, la même que partout ailleurs. Selon votre activité, c'est un écran où ils passent du temps, et jusqu'ici il n'appartenait pas à votre marque.

PWA Developer

  Mis à jour le   5 min de lecture

Vous vous demandez peut-être ce qu'une carte à vos couleurs change vraiment. Voici trois exemples, de la cohérence de votre design à l'histoire que votre app veut raconter.

Pour qu'elles vous ressemblent

Les PWA GoodBarber affichent leurs cartes interactives avec l'un des deux fournisseurs du marché : Google ou Mapbox. Tous deux proposent des outils de personnalisation très poussés pour dessiner des fonds de carte à vos codes. Vous pouvez désormais lier ces styles à vos cartes, et le design de votre app reste cohérent.

Ces outils vont au-delà de la palette de couleurs. Ils vous laissent choisir ce qui reste visible sur le fond de carte, donc ce que vos utilisateurs verront. Dans l'app de campus universitaire ci-dessus, les bâtiments et les bibliothèques sont mis en avant, les commerces sont masqués : ce n'est pas ce que les étudiants viennent chercher. Imaginez maintenant l'app de votre boutique, ou de votre réseau de boutiques. Masquer les points d'intérêt par défaut, c'est ne plus faire de publicité à la concurrence.

Pour créer une ambiance

Plus le design de votre app est affirmé, plus le contraste avec une carte standard saute aux yeux. Prenez une app de festival à l'identité très forte. Avec un fond de carte personnalisé, la carte devient un élément de l'expérience à part entière. On n'y garde que ce qui compte le soir de l'événement : les scènes et les transports. Les réseaux routiers et ferroviaires passent en violet et en vert néon, aux couleurs du festival.

Carte de l'app Nuit Sonique avec un style personnalisé : fond nuit, routes en violet et vert néon, aucun commerce affiché.La même carte avec le style Google Maps par défaut : supermarchés, magasins et autres points d'intérêt affichés.

Comparaison entre le style Google Maps par défaut et un style personnalisé

Pour raconter autre chose

Les outils de personnalisation vont plus loin que les couleurs : ils ajoutent leurs propres calques de données, du relief, des tracés. Ces calques servent de base à vos contenus Carte du CMS GoodBarber et à vos fichiers KML importés. La carte devient alors un contenu éditorial en soi, avec le même outil.

Image fixe de la vidéo : le tracé de la Haute Route Corse sur une carte en relief stylisée avec Mapbox.

Acceptez les cookies statistiques pour lire cette vidéo Vimeo.

Pour cette vidéo, le tracé GPX a été importé dans Mapbox Studio, stylisé puis publié dans un style entièrement nouveau. Il a suffi de coller ce style dans les réglages de carte d'une section. Le même style peut habiller toutes les cartes de l'app, ou seulement un widget Carte de la page d'accueil.

Est-ce facile à faire ?

Oui, vous créez votre style chez le fournisseur de votre choix : un Map ID dans la console Google Cloud, ou une URL de style dans Mapbox Studio. Vous le collez ensuite dans le back-office, pour toute l'app ou pour une section Carte, une section Agenda ou un widget Carte en particulier. La procédure pas à pas est dans nos articles d'aide : pour Google Maps et pour Mapbox.

Nous avons hâte de voir vos cartes. Et si vous n'avez pas encore de PWA pour exprimer votre créativité, créez la vôtre avec GoodBarber, le Mobile App Builder no-code.

À lire aussi

  4 min de lecture

Votre catalogue immobilier Meta s'affiche dans l'app de votre agence

En bref. Catalogue Meta, carte et Catalogue Meta, annonces sont deux extensions de GoodBarber, l'app builder sans code, qui lisent le catalogue « Home listings » d'une agence, le flux XML qu'elle donne à Meta pour ses publicités immobilières. Catalogue Meta, carte remplit une section Carte : chaque bien dont la position est connue devient un repère avec sa fiche, classé par distance quand l'app connaît la position de l'utilisateur. Catalogue Meta, annonces remplit une section Article avec les mêmes biens, les plus récents en premier. Vous les connectez avec le lien du flux de votre catalogue. Elles sont gratuites pour les apps Content.Les agences construisent ce catalogue pour toucher les acheteurs et les locataires là où ils passent leur temps. Les apps de Meta ont été utilisées par 3,60 milliards de personnes par jour en moyenne en juin 2026, 3 % de plus en un an, selon les résultats du deuxième trimestre 2026 de Meta publiés le 29 juillet 2026. Voici comment les deux extensions fonctionnent pour une agence de Hambourg.

  3 min de lecture

Vos événements et campagnes Givebutter s'affichent dans votre app

En bref. Givebutter Événements et Givebutter Campagnes sont deux extensions de GoodBarber, l'app builder sans code, qui lisent les campagnes d'une organisation sur Givebutter. Givebutter Événements remplit une section Agenda avec les événements à venir, à l'heure du fuseau de l'événement, avec leur lieu, sauf si vous le réservez aux participants. Givebutter Campagnes remplit une section Article avec les formulaires et les pages de collecte actifs, avec leur visuel de couverture et leur description. Vous les connectez avec une clé d'API Givebutter. Elles sont gratuites pour les apps Content : chaque section compte pour une des extensions incluses dans votre plan.Une grande partie des dons passe déjà par Givebutter. Lors du Giving Tuesday 2025, les donateurs y ont versé 20 millions de dollars, contre 16,4 millions en 2024, soit plus de 93 000 donateurs sur 16 000 campagnes actives, selon le bilan de Givebutter publié le 8 décembre 2025. Voici comment les deux extensions fonctionnent pour un refuge pour animaux.

Conseils pour créer une app