{"id":2721282,"date":"2025-03-18T10:00:46","date_gmt":"2025-03-18T17:00:46","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2721282"},"modified":"2025-03-18T11:27:49","modified_gmt":"2025-03-18T18:27:49","slug":"tinting-basemaps-to-match-your-dashboard-theme","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/analytics\/tinting-basemaps-to-match-your-dashboard-theme","title":{"rendered":"Tinting basemaps to match your dashboard theme"},"author":353902,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23341],"tags":[113632,763002,532642,775362,31451],"industry":[],"product":[36671],"class_list":["post-2721282","blog","type-blog","status-publish","format-standard","hentry","category-analytics","tag-basemap","tag-dashboard-authoring","tag-dashboard-design","tag-dashboard-themes","tag-map-design","product-ops-dashboard"],"acf":{"authors":[{"ID":8482,"user_firstname":"David","user_lastname":"Nyenhuis","nickname":"Dave Nyenhuis","user_nicename":"dnyenhuis","display_name":"David Nyenhuis","user_email":"DNyenhuis@esri.com","user_url":"","user_registered":"2018-10-26 13:47:59","user_description":"David Nyenhuis is a senior product engineer on the ArcGIS Dashboards team, driven by a simple idea: the best data experiences speak instantly. He specializes in distilling complexity into clear visual signals\u2014whether through maps, bold metrics, charts, or gauges\u2014so insights surface without effort. His work is guided by a passion for helping users build dashboards that stay current, invite exploration, and feel as refined as they are effective.","user_avatar":""},{"ID":353902,"user_firstname":"FNU","user_lastname":"Leann Mary Kurias","nickname":"Leann Kurias","user_nicename":"lkurias","display_name":"Leann Kurias","user_email":"lkurias@esri.com","user_url":"","user_registered":"2024-02-28 19:54:35","user_description":"Leann develops technical content for the ArcGIS Dashboards team, bringing together strong analytical expertise and creative problem-solving to support data-driven decision-making. With a Master's in Business Analytics and Economics, she is passionate about using data to drive business solutions.","user_avatar":""}],"short_description":"Learn how to tint basemaps to align with your dashboard theme","flexible_content":[{"acf_fc_layout":"content","content":"

Basemaps play an important role in making your data stand out. When it comes to aligning a map with the overall theme<\/a> of a dashboard, achieving balance is key. The right basemap can help tie your dashboard<\/a> together, ensuring the map\u2019s geographic context enhances your data without overpowering the overall design.<\/span>\u00a0<\/span><\/p>\n

A map<\/a> typically consists of two essential components: operational layers (your data) and a basemap<\/a> (geographic context). Many basemaps come with color-rich schemes and intricate details, which can be distracting and diminish your data\u2019s ability to stand out. They can also compete with the theme colors in the dashboard. In such cases, ensuring the basemap complements your dashboard theme is essential for maximizing both aesthetics and clarity.<\/span>\u00a0<\/span><\/p>\n

Choosing a Basemap<\/span><\/b>\u00a0<\/span><\/h3>\n

To choose a basemap, open <\/span>Map Viewer<\/span><\/b> and access the Basemap pane by clicking the <\/span>Basemap<\/span><\/b> option in the <\/span>Contents<\/span><\/b> toolbar. You can then select from various basemap types, such as topography, imagery, or streets.\u00a0<\/span>\u00a0<\/span><\/p>\n

Whether your dashboard is using a standard light theme or a custom one, the basemap’s color is important in complementing your dashboard’s overall color scheme. Let\u2019s look at options for aligning each of their colors.<\/span>\u00a0<\/span><\/p>\n

Tinting Your Basemap<\/span><\/b>\u00a0<\/span><\/h3>\n

If your map requires important geographic contexts, such as road networks or city boundaries, but the color scheme of the basemap clashes with your dashboard theme, you can easily adjust the basemap colors. Let\u2019s take a <\/span>permits dashboard<\/span><\/a> as an example to demonstrate how to modify the basemap to better align with its dashboard theme.<\/span>\u00a0<\/span><\/p>\n

1. Choose Your Basemap<\/span><\/b>: Open\u00a0the <\/span>web map<\/span><\/a> in Map Viewer and start by selecting a basemap that provides the necessary geographic context for your data. In this case, World Imagery provides context to proposed building locations.<\/span>\u00a0<\/span><\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2721672,"id":2721672,"title":"Picture1","filename":"Picture1-2.png","filesize":1957987,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/analytics\/tinting-basemaps-to-match-your-dashboard-theme\/picture1-109","alt":"choose basemap","author":"353902","description":"","caption":"","name":"picture1-109","status":"inherit","uploaded_to":2721282,"date":"2025-03-06 23:47:31","modified":"2025-03-17 22:42:18","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":954,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2.png","medium-width":464,"medium-height":231,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2.png","medium_large-width":768,"medium_large-height":382,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2.png","large-width":1920,"large-height":954,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2-1536x763.png","1536x1536-width":1536,"1536x1536-height":763,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2.png","2048x2048-width":1920,"2048x2048-height":954,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2-826x410.png","card_image-width":826,"card_image-height":410,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture1-2.png","wide_image-width":1920,"wide_image-height":954}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

2. Apply a Background Color<\/span><\/span><\/strong>: To match the overall look and feel of your dashboard, apply a background color<\/span>.<\/span> F<\/span>rom the <\/span><\/span>map properties<\/span><\/span> option in the Contents<\/span> toolbar<\/span>, click on <\/span><\/span>Enable background color<\/span><\/span> to select a color <\/span>that complements the theme. For this map, set the background color to #9e9d9d<\/code>.<\/span><\/span><\/p>\n

Note: You will not notice any changes until the next step.\u00a0<\/span><\/p>\n

 <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2721692,"id":2721692,"title":"Picture2","filename":"Picture2-2.png","filesize":1794399,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/ops-dashboard\/analytics\/tinting-basemaps-to-match-your-dashboard-theme\/picture2-72","alt":"add background color to basemaps","author":"353902","description":"","caption":"","name":"picture2-72","status":"inherit","uploaded_to":2721282,"date":"2025-03-06 23:49:52","modified":"2025-03-17 22:42:44","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1924,"height":950,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2.png","medium-width":464,"medium-height":229,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2.png","medium_large-width":768,"medium_large-height":379,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2.png","large-width":1920,"large-height":948,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2-1536x758.png","1536x1536-width":1536,"1536x1536-height":758,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2.png","2048x2048-width":1924,"2048x2048-height":950,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2-826x408.png","card_image-width":826,"card_image-height":408,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/03\/Picture2-2-1920x948.png","wide_image-width":1920,"wide_image-height":948}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

3. Use blending and effects<\/strong>: Combine blend modes with effects to fine-tune the appearance of your map. Adjusting the transparency can help you control the visibility of underlying layers, while blend modes give you additional control over how the layers’ colors and textures are displayed. For example, in this permits web map, applying luminosity blending<\/strong> helps the data to stand out by “muting” the colors in the basemap.<\/p>\n