I can change the z-index of a div so it appears above the map’s viewport div.
Why do want to add map controls via getControls().extend? What does that provide that I may not be accounting for?
Example:
const myControl = document.getElementById( "my-control");
const osm = new ol.source.OSM();
osm.setTileGridForProjection(
"EPSG:4326",
ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);
const tileLayer = new ol.layer.Tile({ source: osm });
const map = new ol.Map({
target: "map",
layers: [tileLayer],
view: new ol.View({
projection: "EPSG:4326",
center: [-77.0231007567732604, 38.902979974562264],
zoom: 3
}),
controls: ol.control.defaults.defaults({ attribution: false, zoom: false }),
});
ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);#map {
height: 128px;
width: 256px;
}
.control {
top: 20px;
left: 20px;
width: 100px;
height: 150px;
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(8,8,8,1) 80%, rgba(35,12,7,1) 80%, rgba(255,42,0,1) 90%, rgba(237,6,216,1) 90%);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.5.2/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.5.2/dist/ol.min.js"></script>
<div id="map">
<div id="my-control" style="z-index: 1;" class="ol-unselectable ol-control control">
<div > H </div>
</div>
</div>