--- title: "Mappe Google Maps e Mapbox con i tuoi colori" description: "Forse ti chiedi cosa cambia davvero una mappa con i tuoi colori. Ecco tre esempi, dalla coerenza del tuo design alla storia che vuoi far raccontare alla tua app" canonical_url: "https://it.goodbarber.com/blog/mappe-con-i-tuoi-colori-a1150/" lang: it date: 2026-10-28 last_updated: 2026-10-29 --- # Mappe con i tuoi colori Hai scelto il tuo tema e regolato colori, font e icone perché la tua app ti somigli. Poi i tuoi utenti aprono la mappa e ritrovano quella che conoscono a memoria, la stessa di ovunque. A seconda della tua attività, è una schermata in cui passano del tempo, e finora non apparteneva al tuo brand. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) [Florian Luccioni](https://it.goodbarber.com/blog/author/flo-luccioni/)PWA Developer 28 ott 2026 · Aggiornato il 29 ott 2026 · 5 min di lettura ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98526281-68743060.jpg?v=1793261324.864215) Forse ti chiedi cosa cambia davvero una mappa con i tuoi colori. Ecco tre esempi, dalla coerenza del tuo design alla storia che vuoi far raccontare alla tua app. ## Perché ti somiglino Le PWA GoodBarber mostrano le loro mappe interattive con uno dei due principali fornitori: Google o Mapbox. Entrambi offrono strumenti di personalizzazione molto avanzati per disegnare sfondi di mappa con la tua identità. Ora puoi collegare questi stili alle tue mappe, e il design della tua app resta coerente. ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98526281-68743061.jpg?v=1793196460.5207732) Questi strumenti vanno oltre la palette di colori. Ti lasciano scegliere cosa resta visibile sullo sfondo della mappa, quindi cosa vedranno i tuoi utenti. Nell'app del campus universitario qui sopra, edifici e biblioteche sono in primo piano e i negozi sono nascosti: non è quello che cercano gli studenti. Immagina ora l'app del tuo negozio, o della tua rete di negozi. Nascondere i punti di interesse predefiniti significa smettere di fare pubblicità alla concorrenza. ## Per creare un'atmosfera Più il design della tua app è deciso, più salta all'occhio il contrasto con una mappa standard. Prendi l'app di un festival con un'identità molto forte. Con uno sfondo di mappa personalizzato, la mappa diventa parte dell'esperienza. Tiene solo ciò che conta la sera dell'evento: i palchi e i trasporti. Strade e ferrovie si colorano di viola e verde neon, con i colori del festival. ![Mappa dell'app Nuit Sonique con uno stile personalizzato: sfondo notturno, strade viola e verde neon, nessun negozio visibile.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743288.jpg) ![La stessa mappa con lo stile predefinito di Google Maps: supermercati, negozi e altri punti di interesse visibili.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743287.jpg) Predefinita Personalizzata *Confronto tra lo stile predefinito di Google Maps e uno stile personalizzato* ## Per raccontare altro Gli strumenti di personalizzazione vanno oltre i colori: aggiungono i loro livelli di dati, rilievo, percorsi. Questi livelli fanno da base ai tuoi contenuti Mappa del CMS GoodBarber e ai tuoi [file KML importati](https://it.goodbarber.com/extensions/kml/). La mappa diventa così un contenuto editoriale a sé, con lo stesso strumento. [Video: la Haute Route Corse su una mappa personalizzata con Mapbox](https://player.vimeo.com/video/1240269543?background=1&autoplay=1&loop=1&muted=1&autopause=0&dnt=1) ![Fotogramma del video: il percorso dell'Haute Route Corse su una mappa in rilievo personalizzata con Mapbox.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743579.jpg) Accetta i cookie statistici per guardare questo video Vimeo. Gestisci i cookie Per questo video, il percorso GPX è stato importato in Mapbox Studio, stilizzato e poi pubblicato in uno stile completamente nuovo. È bastato incollare questo stile nelle impostazioni della mappa di una sezione. Lo stesso stile può vestire tutte le mappe dell'app, o solo un widget Mappa della home page. ## È facile da fare? Sì. Crei il tuo stile presso il fornitore che preferisci: un Map ID nella console Google Cloud, o un URL di stile in Mapbox Studio. Poi lo incolli nel back office, per tutta l'app o per una sezione Mappa, una sezione Agenda o un widget Mappa in particolare. La procedura passo dopo passo è nei nostri articoli di aiuto: [per Google Maps](https://it.goodbarber.com/help/visualizzare-mappe-nella-pwa-r118/configurare-google-maps-per-la-tua-pwa-a289/) e [per Mapbox](https://it.goodbarber.com/help/visualizzare-mappe-nella-pwa-r118/configurare-mapbox-per-la-tua-pwa-a343/). Non vediamo l'ora di vedere le tue mappe. E se non hai ancora una PWA per esprimere la tua creatività, [crea la tua](https://it.goodbarber.com/create/) con GoodBarber, il Mobile App Builder no-code. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) Informazioni sull'autore 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. [Altri articoli di Flo](https://it.goodbarber.com/blog/author/flo-luccioni/)[LinkedIn](https://www.linkedin.com/in/floluccioni/)