Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

251
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda