Home/ Questions/Q 4613594
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T01:34:28+00:00

I’m trying to add a button to the OpenLayers map that is supposed to

  • 0

I’m trying to add a button to the OpenLayers map that is supposed to call a JS function when clicked. I’ve managed to get it to appear how I would like, but the trigger functionality does not work.

If I have the Control.Navigation present, clicking on the button seems to start a dragging event and I can drag the map by clicking even on that button. But even if I remove all other controls, the button’s trigger handler does not get called.

I’ve also tried adding “autoActivate” parameter (which does not make the control automatically active for some reason anyway), I’ve tried to call activate() function for the button after I’ve added it, which seem to toggle the control’s “active” property, but it still does not respond to the clicks.

Can someone point me to the right direction, please, or post a working example? My non-working example is below.

Thanks,
Janis

<html>
<head>
<title>OpenLayers.Control.Button</title>
<style text="text/css">
.olControlButton {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    width: 22px;
    height: 22px;
}
</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var panel;

function buttonClicked()
{
    alert ('Button clicked.');
}

function init()
{
    map = new OpenLayers.Map ('map', {controls: [/*new OpenLayers.Control.Navigation()*/]});
    map.addLayer (new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}));
    map.zoomToMaxExtent();

    panel = new OpenLayers.Control.Panel();
    map.addControl (panel);

    panel.addControls ([new OpenLayers.Control.Button ({autoActivate: true, displayClass: 'olControlButton', trigger: buttonClicked, title: 'Button is to be clicked'})]);
    //panel.controls[0].activate(); <-- this does not help.
}
</script>
</head>
<body onload="init()">
    <div id="map" style="border: 2px solid black; height: 500px"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The button DIV can’t receive click events since the panel DIV (which contains the button) has no dimensions. You should style the panel DIV as well. Also the class given to the button under the panel is olControlButtonItemActive so you need to style it instead of olControlButton.

    OpenLayers.Control.Panel handles activation of child controls, to have it activate the button automatically you should set the defaultControl option to button when instantiating a new Panel instance. Otherwise, you’ll have to click the button once before you can actually trigger it.

    <html>
<head>
<title>OpenLayers.Control.Button</title>
<style text="text/css">
.olControlButtonItemActive {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    width: 22px;
    height: 22px;
}

.olControlPanel {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

</style>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var panel;

function buttonClicked()
{
    alert ('Button clicked.');
}

function init()
{
    map = new OpenLayers.Map ('map', {controls: [/*new OpenLayers.Control.Navigation()*/]});
    map.addLayer (new OpenLayers.Layer.WMS ("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'}));
    map.zoomToMaxExtent();

    button = new OpenLayers.Control.Button ({displayClass: 'olControlButton', trigger: buttonClicked, title: 'Button is to be clicked'});

    panel = new OpenLayers.Control.Panel({defaultControl: button});
    panel.addControls([button]);
    map.addControl (panel);

}
</script>
</head>
<body onload="init()">
    <div id="map" style="border: 2px solid black; height: 500px"></div>
</body>
</html>
    • 0