Azure-docs: Azure Maps - How do you change the color palette used in a map style

[BenFranzi]

I am trying to change the color of the water in Azure Maps to a custom color and from the documentation it suggests that this is possible.

In this article, in the follow note it mentions:

In the Web SDK, you can change the background color of the map by setting the CSS background-color style of map DIV element.

When you change the background-color of the div it sets the div color that the map is rendered on not the background color of the map.

Is it possible to set a custom background color (the sea/ocean) of the map that isn't one of the built-in style options.

Thanks in advance,
Ben

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 447dd280-8d3b-1620-a741-3d952c6a93ee
• Version Independent ID: da12666b-fefa-eff0-57a7-c7cc6903e206
• Content: Supported built-in Azure Maps map styles
• Content Source: articles/azure-maps/supported-map-styles.md
• Service: azure-maps
• GitHub Login: @anastasia-ms
• Microsoft Alias: v-stharr

[AshokPeddakotla-MSFT]

@BenFranzi Thanks for the feedback! We are currently investigating and will update you shortly.

[AshokPeddakotla-MSFT]

Adding @rbrundritt for further assistance in this query. Ricky please check this and provide your guidance.

[rbrundritt]

Background color is different from water. When world wrapping is disabled, the map will only show one copy of the world. If the map div is rectangular, there will be a bunch of empty area. This is when the background color is visible.

There is no supported way to customize the map styles at this time (planned as a future feature). However there is an undocumented/unsupported way to achieve this. The following code block shows how to make all water purple in the Web Map SDK:

//Wait until the map resources have fully loaded.
map.events.add('ready', function (e) {

    //A list of all water based source layers in the road map style.
    var waterLayers = [
        'Other water',
        'Intermittent water',
        'Lake',
        'Sea 1',
        'Ocean 1',
        'Ocean or sea',
        'River',
        'Breakwater',
        'Town shore',
        'Town water body'
    ];

    //Get the underlying layers of the map.
    var layers = map.map.getStyle().layers;

    //Loop through the layers and find those that have water and represent a fill area (polygons).
    for (var i = 0; i < layers.length; i++) {
        if (waterLayers.indexOf(layers[i].id) > -1 && layers[i].type === 'fill') {
            map.map.setPaintProperty(layers[i].id, 'fill-color', 'purple');
            map.map.setPaintProperty(layers[i].id, 'fill-outline-color', 'purple');
        }
    }
});

[BenFranzi]

Thanks Ricky, that's perfect for what we need. I'll give this a go. I really appreciate the quick response :)

[AshokPeddakotla-MSFT]

@rbrundritt Thanks for the suggestions.
@BenFranzi As mentioned, this is planned as a future feature. I would recommend you, kindly provide your feedback on the UserVoice.

We will now proceed to close this thread. If there are further questions regarding this matter, please tag me in your reply. We will gladly continue the discussion and we will reopen the issue.