--- title: "Des cartes Google Maps et Mapbox à vos couleurs" description: "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 ve" canonical_url: "https://fr.goodbarber.com/blog/des-cartes-a-vos-couleurs-a1487/" lang: fr date: 2026-10-28 last_updated: 2026-10-29 --- # 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. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) [Florian Luccioni](https://fr.goodbarber.com/blog/author/flo-luccioni/)PWA Developer 28 oct. 2026 · Mis à jour le 29 oct. 2026 · 5 min de lecture ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98526278-68743039.jpg?v=1793261317.2761781) 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. ![](https://cmsphoto.ww-cdn.com/superstatic/40142/art/grande/98526278-68743040.jpg?v=1793196452.6047292) 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é.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743288.jpg) ![La même carte avec le style Google Maps par défaut : supermarchés, magasins et autres points d'intérêt affichés.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743287.jpg) Par défaut Personnalisé *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](https://fr.goodbarber.com/extensions/kml/). La carte devient alors un contenu éditorial en soi, avec le même outil. [Vidéo : la Haute Route Corse sur une carte stylisée avec Mapbox](https://player.vimeo.com/video/1240269543?background=1&autoplay=1&loop=1&muted=1&autopause=0&dnt=1) ![Image fixe de la vidéo : le tracé de la Haute Route Corse sur une carte en relief stylisée avec Mapbox.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743579.jpg) Acceptez les cookies statistiques pour lire cette vidéo Vimeo. Gérer les cookies 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](https://fr.goodbarber.com/help/afficher-des-cartes-dans-la-pwa-r118/configurer-google-maps-pour-la-pwa-a289/) et [pour Mapbox](https://fr.goodbarber.com/help/afficher-des-cartes-dans-la-pwa-r118/configurer-mapbox-pour-votre-pwa-a343/). 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](https://fr.goodbarber.com/create/) avec GoodBarber, le Mobile App Builder no-code. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) À propos de l'auteur Flo Luccioni PWA Developer Je suis développeur frontend dans l’équipe Progressive Web Apps de GoodBarber, où nous construisons le moteur de rendu de notre plateforme no-code pour les navigateurs. Je travaille sur les fondations UI et les performances qui transforment l’expérience no-code de nos utilisateurs en produits web rapides, soignés et accessibles, se rapprochant du natif sur tous les appareils. [Voir tous ses articles](https://fr.goodbarber.com/blog/author/flo-luccioni/)[LinkedIn](https://www.linkedin.com/in/floluccioni/)