--- title: "Google Maps and Mapbox maps in your brand colors" description: "You might wonder what a map in your colors really changes. Here are three examples, from design consistency to the story you want your app to tell." canonical_url: "https://www.goodbarber.com/blog/maps-in-your-colors-a1655/" lang: en date: 2026-10-28 last_updated: 2026-10-29 --- # Maps in your colors You picked your theme and set your colors, fonts and icons so your app looks like you. Then your users open the map and find the one they see everywhere else. Depending on what you do, it is a screen where they spend time, and until now it did not belong to your brand. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) [Florian Luccioni](https://www.goodbarber.com/blog/author/flo-luccioni/)PWA Developer Oct 28, 2026 · Updated Oct 29, 2026 · 5 min read ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98526279-68743046.jpg?v=1793261319.9161909) You might wonder what a map in your colors really changes. Here are three examples, from design consistency to the story you want your app to tell. ## So they look like you GoodBarber PWAs display their interactive maps with one of the two main providers: Google or Mapbox. Both offer advanced styling tools to design base maps that follow your brand. You can now link these styles to your maps, and your app's design stays consistent. ![](https://cmsphoto.ww-cdn.com/superstatic/41269/art/grande/98526279-68743047.jpg?v=1793196455.2207437) These tools go beyond the color palette. They let you choose what stays visible on the base map, and so what your users will see. In the university campus app above, buildings and libraries stand out and shops are hidden: that is not what students come for. Now picture the app of your store, or of your chain of stores. Hiding the default points of interest means you stop advertising your competitors. ## To set the mood The bolder your app's design, the more a standard map stands out against it. Take a festival app with a very strong identity. With a custom base map, the map becomes part of the experience. It keeps only what matters for the event: the stages and public transport. Here roads and railways turn purple and neon green, in the festival's colors. ![The Nuit Sonique app map with a custom style: night background, purple and neon green roads, no shops shown.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743288.jpg) ![The same map with the default Google Maps style: supermarkets, stores and other points of interest shown.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743287.jpg) Default Custom *The default Google Maps style compared with a custom style* ## To tell another story Styling tools go further than colors: they add their own data layers, terrain, routes. These layers then serve as a base for your GoodBarber CMS Map content and your [imported KML files](https://www.goodbarber.com/extensions/kml/). The map becomes editorial content in its own right, with the same tool. [Video: the Haute Route Corse on a map styled with Mapbox](https://player.vimeo.com/video/1240269543?background=1&autoplay=1&loop=1&muted=1&autopause=0&dnt=1) ![Still from the video: the Haute Route Corse trail on a terrain map styled with Mapbox.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743579.jpg) Accept statistics cookies to play this Vimeo video. Manage cookies For this video, the GPX route was imported into Mapbox Studio, styled, then published in a brand new style. All it took was pasting this style into the map settings of a section. The same style can dress every map of the app, or only a Map widget on the home page. ## Is it easy to do? Yes. You create your style with the provider of your choice: a map ID in the Google Cloud console, or a style URL in Mapbox Studio. Then you paste it in the back office, for the whole app or for a specific Map section, Events section or Map widget. The step-by-step guide is in our help articles: [for Google Maps](https://www.goodbarber.com/help/display-maps-in-your-pwa-r118/configure-google-maps-for-your-pwa-a289/) and [for Mapbox](https://www.goodbarber.com/help/display-maps-in-your-pwa-r118/configure-mapbox-for-your-pwa-a343/). We can't wait to see your maps. And if you don't have a PWA yet to express your creativity, [create yours](https://www.goodbarber.com/create/) with GoodBarber, the no-code Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) About the author Flo Luccioni PWA Developer I’m a frontend developer on GoodBarber’s Progressive Web Apps team, where we build the rendering engine of our no-code platform for browsers. I work on the shared UI and performance foundations that make our users’ no-code experience into fast, polished and accessible web products that feel native on every device. [More from Flo](https://www.goodbarber.com/blog/author/flo-luccioni/)[LinkedIn](https://www.linkedin.com/in/floluccioni/)