<aol-control-*> doesn't work

[kaito3desuyo]

Hello.

<aol-control-*> is not displayed.
Am I wrong in usage?

Angular 7.2.0
ngx-openlayers 1.0.0-next.6

<div class="map-container" style="position: relative">
  <aol-map id="map" [width]="'100vw'" [height]="'100vh'">

    <aol-view [zoom]="zoom">
      <aol-coordinate [x]="135" [y]="35" [srid]="'EPSG:4326'"></aol-coordinate>
    </aol-view>

    <aol-layer-tile *ngFor="let map of maps" [opacity]="map.opacity" [visible]="map.visible">
      <aol-source-xyz [url]="map.url"></aol-source-xyz>
    </aol-layer-tile>

    <aol-control-zoom>
      <aol-content style="position:absolute; top: 24px; left: 24px;" fxLayout="column" fxLayoutGap="48px">
        <app-map-zoom-button [instance]="view.instance"></app-map-zoom-button>
        <app-map-mode-button [disabled]="!isExistActiveVectorLayer()" (selectedType)="onSelectType($event)"
          (undo)="undo()" (redo)="redo()">
        </app-map-mode-button>
      </aol-content>
    </aol-control-zoom>

    <aol-control-scaleline></aol-control-scaleline>

    <aol-control>
      <aol-content style="position:absolute; top: 24px; right: 24px;">

        <app-map-layer-toolbar [maps]="maps" [vectors]="vectors"></app-map-layer-toolbar>

      </aol-content>
    </aol-control>

  </aol-map>

</div>

[siarhei-yushkevich]

Necroposting just in case somebody has the same issue and googled it.

Short section in readme.md about controls says that you have to set id for your custom control (immediate child of aol-content), and then just style the 'map component's css'.

This highlights the problem: controls are not added inside aol-control or aol-content, they are added to one of the children inside the map itself.
As for built-in controls, they don't have any id, but they have some styles like ol-zoom, so you can use it in your selectors.

So you are on your own: use dev tools to search where the control was added and how you can identify it, and then apply style to the aol-map. Mind the style isolation, so ::ng-deep should be applied to bypass it.

Here's an example:

.map-styles{
::ng-deep div.ol-zoom{
display: flex;
flex-direction: column;
position: absolute;
right: 24px;
top: 24px;
}

and then:

[jorugit]

Hi!
please post a sample of your code.
I have the same issue and your short sample doesnt help me

[siarhei-yushkevich]

@jorugit https://pastebin.com/BNhkuETm here's the simple map component I've created for one of the projects. I hope it helps. Although it won't work without the surrounding infrastructure, the required modifications for general use are minimal.

[jorugit]

@jorugit https://pastebin.com/BNhkuETm here's the simple map component I've created for one of the projects. I hope it helps. Although it won't work without the surrounding infrastructure, the required modifications for general use are minimal.

OK, THANK YOU!
the error was that i forgot to link to the ol.css-file in anguar.json....