javascriptcssangularopenlayersopenlayers-6

Openlayers set the Position of map/canvas to relative

I use the maps from openlayers in a ngFor using a child component to initialize each map. It works fine and the maps are generated with the right coordinates from the search results. The Problem here is the position. All maps are returned in one div and not in the div element that hey should as you can see in the screenshot:

enter image description here

The ui expert said to me that the position:absolute in the canvas makes them to return in one div.

Here the generated html:

    <div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
    <div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0;">
        <div class="ol-layer" style="position: absolute; width: 100%; height: 100%;">
            <canvas width="440" height="550" style="position: absolute; left: 0px; transform-origin: left top; transform: matrix(0.363636, 0, 0, 0.363636, 0, 0);"/>
        </div>
    </div>
    <div class="ol-overlaycontainer" style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;"/>
    <div class="ol-overlaycontainer-stopevent" style="position: absolute; z-index: 0; width: 100%; height: 100%; pointer-events: none;">
        <div class="ol-rotate ol-unselectable ol-control ol-hidden" style="pointer-events: auto;">
            <button class="ol-rotate-reset" type="button" title="Reset rotation">
                <span class="ol-compass" style="transform: rotate(0rad);">⇧</span>
            </button>
        </div>
        <div class="ol-scale-bar ol-unselectable" style="pointer-events: none;">
            <div class="ol-scale-bar-inner" style="width: 128px;">
                <div class="ol-scale-step-marker" style="position: absolute; top: 3px;"/>
                <div>
                    <div class="ol-scale-singlebar ol-scale-singlebar-odd" style="width: 32px;"/>
                    <div class="ol-scale-step-marker" style="position: relative; top: -10px;"/>
                    <div class="ol-scale-step-text" style="margin-left: -3px;text-align: left;min-width: 0px;left: unset;">0</div>
                </div>
                <div>
                    <div class="ol-scale-singlebar ol-scale-singlebar-even" style="width: 32px;"/>
                    <div class="ol-scale-step-marker" style="position: relative; top: -10px;"/>
                </div>
                <div>
                    <div class="ol-scale-singlebar ol-scale-singlebar-odd" style="width: 32px;"/>
                    <div class="ol-scale-step-marker" style="position: relative; top: -10px;"/>
                    <div class="ol-scale-step-text" style="margin-left: -32px;text-align: center;min-width: 64px;left: unset;">10000 km</div>
                </div>
                <div>
                    <div class="ol-scale-singlebar ol-scale-singlebar-even" style="width: 32px;"/>
                    <div class="ol-scale-step-marker" style="position: relative; top: -10px;"/>
                </div>
                <div class="ol-scale-step-text" style="margin-left: -32px;text-align: center;min-width: 64px;left: 128px;">20000 km</div>
            </div>
        </div>
    </div>
</div>

In the css I tried the following but without any luck:

.ol-viewport canvas {
    position: relative;
  }

.ol-viewport layer {
  position: relative;
}

.ol-viewport .ol-unselectable {
  position: relative;
}

.ol-unselectable {
  position: relative;
}

Its probably wrong and I am not very familiar with css. It was difficult enoough to return the maps in the ngFor loop, and the case here with the position is making me crazy. Please help!

Solution

  • The comment @Mike helped me to understand the real problem here. I created the divs for the maps with the same id (js-map), so all maps belonged at the end together in the js-map. I changed my approach to generate in the child component a unique id for each map div and used the map functions to initialize the map in the ngAfterViewInit and it works now! Thank you again!