0
247
ViewsAzure Map Controls anula el estilo CSS
¿Es posible anular de alguna manera el esquema de color predeterminado que se usa para Azure Map Controls? No puedo encontrar nada en MS Docs que no sea la configuración entre 'claro' y 'oscuro', sin embargo, ninguna de sus opciones de color se ve muy bien y quiero cierta uniformidad con el esquema de color de mi propio modo oscuro en mi interfaz de usuario.
Además, configurar claro/oscuro para el estilo solo funciona para la barra de herramientas de dibujo, pero no para otros controles del mapa, de ahí la siguiente captura de pantalla:
Código de muestra:
//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' }); });1 answers
Answer question0
¡Debería aprender a usar el elemento de inspección con más frecuencia en la depuración del navegador y habría encontrado el css requerido mucho más rápido!
Actualice al ejemplo de código que corrige el problema con la barra de herramientas de dibujo que no muestra el modo oscuro.
//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", }); });Luego, para las anulaciones de CSS para cambiar los colores:
.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; } 