Hi Harry, check this: http://www.mail-archive.com/[email protected]/msg05106.html
I'm not a CSS expert but got this working after I removed absolute positioning from my button styles and put float:left into olControlPanel div. I think after you got your panel horizontal things get easier. - mika - Harry Wood kirjoitti: > 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 > _______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
