How to place a HTML element on a map in OpenLayers

Question

I am working on Openlayers 5.13 with jQuery 3.21. I am trying to place a html div element on the viewport of a map in openlayers. This element is supposed to have two check-boxes to filter out some content on the map. For this purpose I am using an Overlay instance. There are two problems: 1) When I zoom-in or zoom-out the overlay tends to increase and decrease in size, which is not what I am expecting. I want that overlay (html div element) to retain its size.

2) I cant quit figure out how to place the overlay in top right corner. An overlay is instantiated with a position property which I don't know what to set to.

I also don't know that if the overlay is what I should seek to show some static element on the map. (I highly doubt that overlay is right way)

Here is my code : css-

<style>
        .ol-panel {
            position: absolute;
            background-color: white;
            filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 12px;
            left: -50px;
            min-width: 100px;
        }
    </style>

html -

   <div id="panel" class="ol-panel">
        <div id="content">
            <table>
                <tr>
                    <td>
                       Ports &nbsp;<input type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td>
                        Vessels&nbsp;<input type="checkbox">
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div id="map"></div>

script -

map = new ol.Map({
    logo: 'false',
    target: 'map',
    layers: [new ol.layer.Tile({
        title: 'OSM',
        type: 'base',
        visible: true,
        source: new ol.source.OSM()
    })],
    view: new ol.View({
        center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
        zoom: 3
    })
});

panelDiv = document.getElementById("panel");
var panel = new ol.Overlay({
    element: panelDiv,
    stopEvent: false,
    //offset:[0,0],
    autoPan: true,
    position: ol.proj.transform([82,80 ], 'EPSG:4326', 'EPSG:3857'),
    positioning: 'top-right',
    autoPanAnimation: {
        duration: 250
    }
});
map.addOverlay(panel);

This is my current output:

This is what I am expecting, an element that stays fixed at a position:

Reference - [http://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html]

For a search box on a full screen map I've simply appended the div to the viewport div `map.getViewport().appendChild(searchBox);` I'm not sure if it's the approved way, but it works! — Mike, Aug 31 '18 at 15:31
@Mike It doesn't work for me, it is just a workaround for you. — capnam, Sep 01 '18 at 08:34
I've just added your panel to one of my earlier demos, all it needed to work were the style settings to position it http://mikenunn.16mb.com/demo/hardlight2.htm However OpenLayers would probably recommend setting up a custom control. Controls are fixed on the viewport, overlays move with the map. — Mike, Sep 01 '18 at 09:37
If you don't need to place the checkboxes on specific coordinate on the map, why don't you add it as normal element not as overlay. just add it to the dom and add event on the checkboxes. — Chase Choi, Sep 03 '18 at 01:54

score 0 · Accepted Answer · answered Sep 03 '18 at 04:44

I got what I was looking for here [http://openlayers.org/en/latest/examples/custom-controls.html?q=custom-controls]

/** Create a checkbox to toggle visibility of straits on map 
             *  You can create different controls for different operations
             */
            var strait_cbx = document.createElement('input');
            strait_cbx.type = "checkbox";
            strait_cbx.id = "strait_cbx";
            strait_cbx.checked = true;

 /**
             * This is a container element which holds input elements which are controls for the map
             * You can add as many as you want depending upon use.
             * The element is a div which would act like a panel to add controls on map like toggling visibility of the layers
             */
            var element = document.createElement('div');
            element.className = 'ol-control-panel ol-unselectable ol-control';
            element.innerHTML="<b>Straits</b>&nbsp;"
            element.appendChild(strait_cbx);

            /*A custom control which has container holding input elements etc*/
            var controlPanel = new ol.control.Control({
                element: element
            });
map.addControl(controlPanel);

How to place a HTML element on a map in OpenLayers

1 Answers1