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

Wed Nov 12 10:06:42 EST 2008

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>