OpenLayers.Control.Button's trigger parameter won't get called -
i'm trying add button openlayers map supposed call js function when clicked. i've managed appear how like, trigger functionality not work.
if have control.navigation present, clicking on button seems start dragging event , can drag map clicking on button. if remove other controls, button's trigger handler not called.
i've tried adding "autoactivate" parameter (which not make control automatically active reason anyway), i've tried call activate() function button after i've added it, seem toggle control's "active" property, still not respond clicks.
can point me right direction, please, or post working example? non-working example 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 clicked'})]); //panel.controls[0].activate(); <-- not help. } </script> </head> <body onload="init()"> <div id="map" style="border: 2px solid black; height: 500px"></div> </body> </html>
the button div can't receive click events since panel div (which contains button) has no dimensions. should style panel div well. class given button under panel olcontrolbuttonitemactive need style instead of olcontrolbutton.
openlayers.control.panel handles activation of child controls, have activate button automatically should set defaultcontrol option button when instantiating new panel instance. otherwise, you'll have click button once before can 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 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>
Comments
Post a Comment