3

I am attempting to modify the Zoom buttons on OpenLayers 5.3 in an Angular 6 component. And I'm using this OL3 question as a starting point: Creating new buttons and removing default ones - Openlayers-3.

However, my custom CSS class for my component is being ignored (or overwritten with the original ol.css for the zoom buttons).

this.map = new OlMap({
  target: 'map',
  layers: [
    new OlTileLayer({
      source: new OlOSM()
    })
  ],
  view: this.view,
  controls: [
    new OlZoom({ className: 'custom-zoom' })
  ]

And I've placed .custom-zoom and .custom-zoom button in my scss for my component, but they do not render for the Zoom buttons.

Any ideas on an Angular 6 solution to custom CSS classes for the Zoom buttons?

enter image description here

Jay Cummins
  • 14,642
  • 7
  • 66
  • 141

2 Answers2

5

In Angular a style in @Component will only be applied to its own template (see https://angular.io/guide/component-styles#style-scope) You basically have two options:

  1. Overwrite the style in your global style.scss.

    .ol-control button {
    background-color: red;
}

  2. (deprecated) Use ::ng-deep in your component style.

    ::ng-deep .ol-control button {
    background-color: red;
}

For more information on the whole /deep/ deprecation see this question for example.

Grmpfhmbl
  • 178
  • 1
  • 6
0

[This should be a comment] You could overwrite the styles of ol.css with your custom ones. Just take their file (https://github.com/openlayers/openlayers/blob/master/src/ol/ol.css) copy the ones you need to your scss file, customize it, and then import it after ol.css.

cabesuon
  • 1,051
  • 6
  • 7
  • This will not work. Angular encapsulates styles in its components. So when one declares a component local style it will not be applied to markup outside of its own template. – Grmpfhmbl Mar 01 '19 at 17:52