Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

250
Views
Azure Map Controls override the CSS style

Is it possible to somehow override the default color scheme that is used for the Azure Map Controls? I cant find anything in MS Docs other than setting between 'light' & 'dark', however neither of their colour choices look very nice and I want some uniformity with the color scheme of my own dark mode on my UI.

In addition, setting light/dark for the style only works for the drawing toolbar, but not for other the map controls, hence the screenshot below:

enter image description here

Sample code:

//Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create an instance of the drawing manager and display the drawing toolbar.
    drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: theme,
            buttons: [
                "draw-line",
                "draw-polygon",
                "draw-circle",
                "draw-rectangle",
                "edit-geometry",
                "erase-geometry"]
        })
    });
    map.controls.add([
        new atlas.control.StyleControl({
            layout: 'list',
            mapStyles: [
                'blank', // Blank
                'grayscale_dark', // Greyscale (Night)
                'grayscale_light', // Greyscale (Light)
                'high_contrast_dark', // High Contrast (Dark)
                'high_contrast_light', // High Contrast (Light)
                'night', // Night
                'road_shaded_relief', // terra
                'satellite', // Satellite
                'satellite_road_labels'] // Hybrid
        }),
        new atlas.control.ZoomControl(),
        new atlas.control.CompassControl(),
        new atlas.control.PitchControl(),
    ], {
        position: "top-right",
        style: theme, // theme == 'light' or 'dark'
    });
});
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I should learn to use the inspect element more often in the browser debug and I would have found the required css much quicker!

Update to the code sample that corrects the issue with the drawing toolbar not showing the dark mode.

//Wait until the map resources are ready.
map.events.add('ready', function () {
    //Create an instance of the drawing manager and display the drawing toolbar.
    drawingManager = new atlas.drawing.DrawingManager(map, {
        toolbar: new atlas.control.DrawingToolbar({
            position: 'top-right',
            style: theme,
            buttons: [
                "draw-line",
                "draw-polygon",
                "draw-circle",
                "draw-rectangle",
                "edit-geometry",
                "erase-geometry"]
        })
    });
    map.controls.add([
        new atlas.control.StyleControl({
            style: theme, // theme == 'light' or 'dark'
            layout: 'list',
            mapStyles: [
                'blank', // Blank
                'grayscale_dark', // Greyscale (Night)
                'grayscale_light', // Greyscale (Light)
                'high_contrast_dark', // High Contrast (Dark)
                'high_contrast_light', // High Contrast (Light)
                'night', // Night
                'road_shaded_relief', // Terra
                'satellite', // Satellite
                'satellite_road_labels'] // Hybrid
        }),
        new atlas.control.ZoomControl({
            style: theme, // theme == 'light' or 'dark'
        }),
        new atlas.control.CompassControl({
            style: theme, // theme == 'light' or 'dark'
        }),
        new atlas.control.PitchControl({
            style: theme, // theme == 'light' or 'dark'
        }),
    ], {
        position: "top-right",
    });
});

Then for the CSS overrides to change the colors:

.azure-maps-control-button {
    background-color: #22262A !important;
    color: white !important;
}

.azure-maps-control-container.dark > .style-options.list button {
    background-color: #22262A !important;
}
    .azure-maps-control-container.dark > .style-options.list button:hover {
        background-color: #343A40 !important;
        color: white !important;
    }

    .dark .azure-maps-drawtoolbar-button {
        background-color: #22262A !important;
        color: white !important;
    }
    .dark .azure-maps-drawtoolbar-button:hover {
        background-color: #343A40 !important;
        color: white !important;
    }

enter image description here

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!