I'm trying to add two clickable buttons (OpenLayers.Control.Button). Should be easy enough. Here's how far I've got: http://funmap.co.uk/openlayers-test/buttons.html (code below)
For some reason having the css class 'olControlPanel' causes it to almost work, but this is a mystery to me (copied off some other example) and as the red borders demonstrate, I don't seem to have much control over where these click regions go. I suspect I'm barking up the wrong tree with that. There should be a much easier way of getting the click events to call my functions. OpenLayers.Function.bind perhaps, but I can't work out how to call this. Any pointers much appreciated. Harry Wood http://harrywood.co.uk Here's my html: <html> <head> <title>OpenLayers buttons experiment</title> <script src="http://openlayers.org/api/OpenLayers.js"; type="text/javascript"></script> <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"; type="text/javascript"></script> <style> .button1Display { margin-left: 60px; margin-top: 10px; width: 36px; height: 19px; background-image: url("./mybutton1.png"); } .button2Display { margin-left: 110px; margin-top: 10px; width: 36px; height: 19px; background-image: url("./mybutton2.png"); } /* olControlPanel is a mysterious css class of elements which seem to catch button click events */ .olControlPanel div { margin-left: 60px; margin-top: 10px; width: 36px; height: 19px; border: 1px solid RED; } #map { border: 1px solid #222; width: 300px; height: 300px; } </style> <script type="text/javascript"> <!-- var map; var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik"); var layerMaplint = new OpenLayers.Layer.OSM.Maplint("Maplint") var layerTah = new OpenLayers.Layer.OSM.Osmarender("[EMAIL PROTECTED]"); var layerMarkers = new OpenLayers.Layer.Markers("POIs"); function myFunction1() { alert('myFunction1'); } function myFunction2() { alert('myFunction2'); } function init(){ map = new OpenLayers.Map('map', { maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508), numZoomLevels: 18, maxResolution: 156543, units: 'm', projection: "EPSG:41001" }); map.addLayers([layerMapnik, layerMaplint, layerTah, layerMarkers]); map.addControl(new OpenLayers.Control.LayerSwitcher()); var panel = new OpenLayers.Control.Panel(); var button1 = new OpenLayers.Control.Button({title:'title1', displayClass: "button1Display", trigger: myFunction1}); var button2 = new OpenLayers.Control.Button({title:'title2', displayClass: "button2Display", trigger: myFunction2}); panel.addControls([button1,button2]); map.addControl(panel); var lat=51.508; var lon=-0.118; var zoom=8; var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); map.setCenter (lonLat, zoom); } // --> </script> </head> <body onload="init()"> <div id="map" width="400px" height="400px"></div> </body> </html> _______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
