Menu
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>
977
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
59
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
