[OpenLayers-Users] How to add two clickable buttons? (OpenLayers.Control.Button)

Wed Nov 12 14:00:14 EST 2008

Hi Harry,

check this:
http://www.mail-archive.com/users@openlayers.org/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("Tiles at Home");
>         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
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>   