Bootstrap Angular Leaflet Div над картой - PullRequest
Новая
       26

Bootstrap Angular Leaflet Div над картой

0 голосов
/ 07 ноября 2018

Я пытаюсь поместить div над картой, добавить некоторые действия, такие как фильтры и прочее, но div появляется только тогда, когда я перемещаю карту и она идет за картой.

компонент css: 

.map {
    padding: 0;
    position:relative;
    width:100% ;
    height: 100%;
}

.mapContainer{
        width: 100vw;
        height: 92.6vh; /* Fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 92.6);
        padding: 0 ;
}

.overlay {
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(255, 50, 50, 0.5);
}

компонент html: 

<div class="container-fluid" >
    <div class="row">
        <div class="col-sm-2">
            <div *ngIf="city">
                <p>{{city.name}}  </p>
            </div>
        </div>
    <div class="col-sm-10 mapContainer" >
        <div leaflet class="map"
            [leafletOptions]="options"
            [leafletFitBounds]="bounds"
            (leafletMapReady)="onMapReady($event)"
            [leafletMarkerCluster]="markerClusterData"   
            [leafletMarkerClusterOptions]="markerClusterOptions"
            (leafletMarkerClusterReady)="markerClusterReady($event)">
        </div>
        <div class = "overlay">
            <input type="radio" class = "someButton">Foo Bar
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 07 ноября 2018

Поскольку вы использовали position: absolute в своем классе overlay, вы можете применить свойство z-index к equal or more 1000, чтобы оно находилось перед элементом карты с более низким значением z-index. 

.overlay {
     width: 100px;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     background-color: rgba(255, 50, 50, 0.5);
     z-index: 1000
}

Демо

...