[Fixed] Azure Maps HTML Marker ignoring CSS in Angular

Issue

I’m currently working on an Angular 11+ project with Azure Maps. I want to create a custom CSS styled HTML Marker like shown in the docs (https://docs.microsoft.com/en-us/azure/azure-maps/map-add-custom-html), but Angular seems to ignore the CSS completely. With F12 I can find the marker, but I can’t visually see it. If I create the HTML Marker with inline CSS there’s no problem, but I’d really like to separate the two like they do in the docs.
I installed Azure Maps using npm install azure-maps-control.

index.html:

<link
  rel="stylesheet"
  href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css"
  type="text/css"
/>

map.component.html:

<div id="myMap"></div>

map.component.ts:

import { Component, OnInit } from '@angular/core';
import * as atlas from 'azure-maps-control';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit {
      
  constructor() {}

  ngOnInit(): void {

// build the map
var map = new atlas.Map('myMap', {
  center: [10.39, 55.393],
  zoom: 12,
  showLogo: false,
  showBuildingModels: true,
  style: 'grayscale_light',
  language: 'da-DK',
  authOptions: {
    authType: atlas.AuthenticationType.subscriptionKey,
    subscriptionKey: 'key',
  },
});

// add controls like zooming, compass and pitch to the map
map.controls.add(
  [
    new atlas.control.ZoomControl(),
    new atlas.control.CompassControl(),
    new atlas.control.PitchControl(),
  ],
  { position: atlas.ControlPosition.TopRight }
);

map.events.add('ready', () => {

  var marker = new atlas.HtmlMarker({
    htmlContent: '<div class="test"></div>', // <-- this does not work
    position: [10.39, 55.393],
    pixelOffset: [5, -18],
  });

  map.markers.add(marker);

  var marker2 = new atlas.HtmlMarker({
    htmlContent:
      '<div style="background-color: blue; width: 20px; height: 50px;"></div>', // <-- this works fine
    position: [10.55, 55.393],
    pixelOffset: [5, -18],
  });

  map.markers.add(marker2);
});

}

map.component.css:

html,
body {
  margin: 0;
}

#myMap {
  height: calc(100vh - 58px);
  width: 100vw;
}

.test {
  background-color: red;
  width: 20px;
  height: 20px;
}

How do I connect the CSS-file to the HTML here? Any suggestions would be appreciated.

Solution

I am far from being a CSS expert, but I think it has to do with the view encapsulation of angular. You are trying to apply a style to DOM elements which are not part of your component.

There are two possibilities to do that :

• Declare your style as a global style. You simply need to put your style on styles.scss.

styles.scss

body {
  margin: 0;
}

.test {
  background-color: red;
  width: 20px;
  height: 20px;
}

• Use the ::ng-deep pseudo selector on your component’s scss file. This basically declares your style block as a global style rule. This is currently deprecated, so you should maybe prefer the first solution. More information here : https://angular.io/guide/component-styles#deprecated-deep–and-ng-deep

map.component.scss

#myMap {
  height: calc(100vh - 58px);
  width: 100vw;
}

:host ::ng-deep .test {
  background-color: red;
  width: 20px;
  height: 20px;
}

In both cases, the style is applied on your HTML Marker

Hope this helps!