[OpenLayers-Users] Dynamically change a control handler
Pierre GIRAUD
bluecarto at gmail.com
Thu Jun 19 05:07:31 EDT 2008
I had a quick test with your code snippets and this worked well with a
custom drawFeature control.
My feeling is that the code you provided is not responsible for the
issue encountered on IE.
Regards,
Pierre
Here's my code (tested in IE6 and IE7) :
{{{
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Draw Feature Example</title>
<link rel="stylesheet" href="../theme/default/style.css"
type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#controlToggle li, #handlerToggle li {
list-style: none;
}
p {
width: 512px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControl;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
drawControl = new
OpenLayers.Control.DrawFeatureCustom(pointLayer,
OpenLayers.Handler.Point);
map.addControl(drawControl);
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
document.getElementById('pointToggle').checked = true;
}
function toggleControl(element) {
if(element.value == 'draw' && element.checked) {
drawControl.activate();
drawControl.setHandlerType('POINT');
document.getElementById('pointToggle').checked = true;
} else {
drawControl.deactivate();
}
}
function toggleHandler(element) {
drawControl.setHandlerType(element.value);
}
/**
* Class: OpenLayers.Control.DrawFeatureCustom
* Draws features on a vector layer when active.
*
* Inherits from:
* - <OpenLayers.Control>
*/
OpenLayers.Control.DrawFeatureCustom =
OpenLayers.Class(OpenLayers.Control.DrawFeature, {
initialize: function(layer, handler, options) {
OpenLayers.Control.DrawFeature.prototype.initialize.apply(this,
[layer, handler, options]);
},
draw: function() {
switch (this.handlerType) {
case 'POINT':
this.handler = new OpenLayers.Handler.Point(
this,
{done: this.selectGeom},
{keyMask: this.keyMask}
);
break;
case 'BOX':
this.handler = new OpenLayers.Handler.RegularPolygon(
this,
{done: this.selectGeom},
{keyMask: this.keyMask, sides: 4, irregular: true}
);
break;
}
},
setHandlerType: function(handlerType) {
this.handlerType = handlerType;
if (this.active) {
this.deactivate();
this.draw();
this.activate();
}
}
});
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Draw Feature Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate on-screen digitizing tools for point, line,
and polygon creation.
</p>
<div id="map" class="smallmap"></div>
<ul id="controlToggle">Controls
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="draw"
id="drawToggle" onclick="toggleControl(this);" />
<label for="drawToggle">draw</label>
</li>
</ul>
<ul id="toggleHandler">Draw Handlers
<li>
<input type="radio" name="handler" value="POINT"
id="pointToggle"
onclick="toggleHandler(this);" checked="checked" />
<label for="pointToggle">point</label>
</li>
<li>
<input type="radio" name="handler" value="BOX"
id="polygonToggle" onclick="toggleHandler(this);" />
<label for="polygonToggle">polygon</label>
</li>
</ul>
</div>
</body>
</html>
}}}
On Wed, Jun 18, 2008 at 1:43 PM, Gilles Bassière
<gilles.bassiere at makina-corpus.com> wrote:
> Hi list,
>
> I'd like to know if there is a cross-browser way to change the mouse handler
> associated to a control.
>
> Context: I want to query the server for a given area. This area may be a
> point, a box or a any polygon. The user can choose the type of area with
> simple html radiobuttons.
>
> My control is set up with the following draw() method:
>
> draw: function() {
> switch (this.handlerType) {
> case 'POINT':
> this.handler = new OpenLayers.Handler.Point(
> this,
> {done: this.selectGeom},
> {keyMask: this.keyMask}
> );
> break;
> case 'BOX':
> this.handler = new OpenLayers.Handler.RegularPolygon(
> this,
> {done: this.selectGeom},
> {keyMask: this.keyMask, sides: 4, irregular: true}
> );
> break;
> ...
> }
> },
>
> I added a custom method in order to set the "handlerType" property:
>
> setHandlerType: function(handlerType) {
> this.handlerType = handlerType;
> if (this.active) {
> this.deactivate();
> this.draw();
> this.activate();
> }
> },
>
> All this works pretty fine in Firefox but does not in IE...
> The behavior in IE is the following:
> - when the control is selected, the default point handler works fine and the
> user can click on the map to fire a data request.
> - if the user change the handler type (using html radiobuttons and so, the
> control setHandlerType method), the mouse handler is lost until the first
> click on the map.
>
> Right after the call to setHandlerType(), I expect is to see my new handler
> but in IE, there is just no handler. The user needs to click once on the map
> and then the handler appears...
>
> Is it simply possible to achieve dynamic replacement of a control handler?
> If so, can anyone point me in the right direction?
>
> Regards
> Gilles
>
> --
> Gilles Bassiere
> MAKINA CORPUS
> 30 rue des Jeuneurs
> FR-75002 PARIS
> +33 (0) 1 44 82 00 80
> http://www.makina-corpus.com
>
>
>
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>
More information about the Users
mailing list