[OpenLayers-Dev] [Opera] Drawing in iframe

Wed Dec 30 12:53:54 EST 2009

Hi all,

I have got a "bizarre" behavior with both opera 9.64 and 10.10 (it works
with IE6/8, FF 2 to 3.5, Safari 4 and Chrome 3) : the drawing of a point
(or even dragging the point) is shifted when using an iframe (it works
without iframe).
I have been testing/debugging but everything seems ok, up to when opera
draws !-(
Furthermore, each time a point is drawn, the shift is doubled between the
original clic (default style in orange) and the drawn point (red circle)
...

Is there an issue with opera and iframe ?

Here is the sample code, I am using :

operaMain.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
    <title>opera - main</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <h1>opera</h1>
    <iframe src="./operaIFrame.html" width="400px" height="400px"
style="width:400px;height:400px;" scrolling="no"
frameborder="no"></iframe>
</body>
</html>

operaIFrame.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
    <title>opera - iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript"
src="http://openlayers.org/dev/lib/Firebug/firebug.js">
    <!-- -->
    </script>
    <script type="text/javascript"
src="http://openlayers.org/dev/OpenLayers.js">
    <!-- -->
    </script>
    <script type="text/javascript">
    <!--
    var map = null;
    function init() {
        var options= {};
        map = new OpenLayers.Map('map', options);
        var wms = new OpenLayers.Layer.WMS(
            "OpenLayers WMS",
            "http://labs.metacarta.com/wms/vmap0?",
            {layers: 'basic'}
        );
        map.addLayer(wms);
        map.setCenter(new OpenLayers.LonLat(0.87890625,45.52734375),3);

        var vlayer= new OpenLayers.Layer.Vector(
                'POINTXY',
                {
                    projection: map.getProjectionObject(),
                    displayInLayerSwitcher:false,
                    calculateInRange: function() { return true; },
                    styleMap: new OpenLayers.StyleMap({
                        'default': OpenLayers.Util.extend(
                            OpenLayers.Feature.Vector['default'],{
                                fillColor:'red',
                                pointRadius: 10,
                                fillOpacity: 1
                            })
                    })
                }
        );
        map.addLayer(vlayer);

        // drag control :
        var drag_feature= new OpenLayers.Control.DragFeature(
            vlayer,
            {
                onDrag:
function(f){OpenLayers.Console.log('onDrag=('+f+')')},
                onComplete:
function(f){OpenLayers.Console.log('onDrag=('+f+')')}
            });
        map.addControl(drag_feature);
        drag_feature.activate();

        // ctrl-clic control :
        var draw_feature= new OpenLayers.Control();
        OpenLayers.Util.extend(draw_feature, {
            draw: function (px) {
                this.div=
OpenLayers.Control.prototype.draw.apply(this,arguments);

                if (this.handler==null) {
                    this.handler= new OpenLayers.Handler.Point(
                        draw_feature,
                        {
                            done: function (pt) {
                                vlayer.destroyFeatures();

                                var f= new OpenLayers.Feature.Vector(pt);
                                f.state= OpenLayers.State.INSERT;
                                vlayer.addFeatures(f);
                            }
                        },
                        {
                            persist: true,
                            layerOptions: {
                                projection: map.getProjectionObject()
                            },
                            keyMask: OpenLayers.Handler.MOD_CTRL
                        });
                }
                return this.div;
            }
        });
        map.addControl(draw_feature);
        draw_feature.activate();

    }
      -->
    </script>
</head>
<body onload="init();">
    <div id="map" style="width:400px;height:400px;"></div>
</body>
</html>

Sincerely,
-- 
RICHARD Didier - Chef du pôle technique du Géoportail
2/4, avenue Pasteur - 94165 Saint Mandé Cedex
Tél : +33 (0) 1 43 98 83 23