OpenLayers adding custom button

Question

I'm trying to modify an OpenLayers example to add my custom button but I can't click this button. I've tryied everything but it is as if the click event couldn't be attached to the button....Where is the problem? I'm getting mad. Any help will be appreciated! Here is my code (sorry to post a full example but I can't shorten it):

<html>
    <head>
        <title>OpenLayers Editing Toolbar Example</title>

        <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
        <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
        <style type="text/css">
        #btnHiLite {  
        top: 50%;
        left: 3%;
        height: 10px;
        z-index: 3000;

        background: url('http://s11.postimg.org/s3u0s4pjj/marker.png') no-repeat center;
        padding: 5px 10px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
        text-shadow: rgba(0,0,0,.4) 0 1px 0;
        color: #9c494e;
        font-size: 12px;
        font-family: Georgia, serif;
        text-decoration: none;
        vertical-align: middle;
    }
        </style>


        <script src="http://openlayers.org/api/OpenLayers.js"></script>
         <script type="text/javascript">
            var map, layer;

            function rotate_image() {
          alert("Button clicked!");
        }

            function init(){

        var btnHiLite = new OpenLayers.Control.Button({ 
          title: "click it to rotate image 90º",
          id: 'btnHiLite',
          trigger: rotate_image,
          type: OpenLayers.Control.TYPE_BUTTON
        });   

        var graphic = new OpenLayers.Layer.Image(
            'Document Page',
            "http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/landscape_7.jpg",
            new OpenLayers.Bounds(-250, -100, 250, 100),
            new OpenLayers.Size(250, 100)
        );

                map = new OpenLayers.Map( 'map', {
                    controls: [new OpenLayers.Control.PanZoom(), btnHiLite]
                });

                map.addLayers([graphic]);
                map.zoomToMaxExtent();
            }
        </script>
    </head>
    <body onload="init()">
        <h1 id="title">Editing Toolbar Example</h1>

        <div id="tags">
            digitizing, point, line, linestring, polygon, editing
        </div>

        <p id="shortdesc">
            Demonstrate polygon, polyline and point creation and editing tools.
        </p>

        <div id="panel"></div>
        <div id="map" class="smallmap"></div>
    </body>
</html>

Adding this to a jsfiddle makes it easier for folks to quickly see the problems and help you out. — kjelderg
– kjelderg, Commented Oct 28, 2013 at 18:52
Yes, you are right! I've tried (jsfiddle.net/gilan/wR4Ee) but I've couldn't make it run fine... — user969228
– user969228, Commented Oct 31, 2013 at 8:58

Mike Stoddart · Accepted Answer · 2014-09-29 13:35:27Z

8

Ok...I answer my own question. I basically needed:

1.- Create a panel to add buttons in it

var panel = new OpenLayers.Control.Panel({defaultControl: btnHiLite});

2.- Add the button to the panel

panel.addControls([btnHiLite]);

3.- Add the panel to the map

map = new OpenLayers.Map( 'map', {
    controls: [
        new OpenLayers.Control.PanZoom(), 
        panel]
});

Here is the right code: jsfiddle.net/gilan/wR4Ee

edited Sep 29, 2014 at 13:35

Mike Stoddart

5347 silver badges23 bronze badges

answered Nov 4, 2013 at 14:28

user969228

1411 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brain · Accepted Answer · 2016-09-08 20:19:03Z

2

I don't like the OpenLayer's own control framework. It's way much simpler to use your own, written in plain html and jquery.

For example: http://jsfiddle.net/wR4Ee/111/

<div id="map"></div>
<div id="panel"><button id="testButton" class="btn btn-primary">TEST BUTTON</button></div>

$('#testButton').click(function(){
  console.log('click');
  map.getView().setZoom(map.getView().getZoom()+1); 
});

answered Sep 8, 2016 at 20:19

Brain

4508 silver badges22 bronze badges

Collectives™ on Stack Overflow

OpenLayers adding custom button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related