Openlayers 2.12 canvas renderer issue

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Openlayers 2.12 canvas renderer issue

Ivan Sipka
Hello,

this is my scenario: a map with one baselayer and one overlay vector layer with one point feature in it. I want to obtain the feature DOM node via document.getElementById. Feature gets drawn on screen in both cases.

If I use canvas renderer the element gets drawn on map but:

1) document.getElementById(feature.geometry.id) returns null
2) DOM tree inspection via chrome debugger shows no elements in canvas

If I use SVG renderer, I can see it in the DOM tree and document.getElementById(feature.geometry.id) returns it.

Example code:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://openlayers.org/api/2.12/OpenLayers.js"></script>
       <!--<script src="http://openlayers.org/dev/OpenLayers.js"></script>-->
        <script type="text/javascript">
            
            var map,vectors,feature;

            function init() {
                var x = 659688.852138;
                var y = 5710701.2962197;
                
                map = new OpenLayers.Map({
                    div: "map",
                    projection: "EPSG:900913",
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar()
                    ]
                });
                
                var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
                
                renderer = typeof(renderer) == 'undefined' ? 'Canvas' : renderer;

                vectors = new OpenLayers.Layer.Vector('vectors', {
                                    renderers: [renderer]
                                }); 
                                
                feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x,y));

                map.addLayers([new OpenLayers.Layer.OSM(),vectors]);

                map.setCenter(new OpenLayers.LonLat(x,y), 18);
                vectors.addFeatures(feature);
                
                var fetched = document.getElementById(feature.geometry.id);
                
                alert('obtaining feature via document.getElementById has '+ (fetched == null ? 'failed':'suceeded'));
            }
        </script>
        <style>
            #map {
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body onload="init();">
        <div id="map"></div>
    </body>
</html>

Default renderer is Canvas if you want to test it you can give the canvas implementation as a URL parameter like this:

example.html
example.html?renderer=Canvas

or

example.html?renderer=SVG

Judging by the canvas example I'm doing it right. I tried to alternate OL versions from 2.12 to 2.13dev but it didn't help.

Why is this happening?  Is there any clever workaround?

thanks for your time
linski

_______________________________________________
Dev mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/openlayers-dev
Reply | Threaded
Open this post in threaded view
|

Re: Openlayers 2.12 canvas renderer issue

Andreas Hocevar-2
This is expected behavior. Canvas works like a drawing board. Elements drawn to the canvas do not have a DOM representation. Why don't you use in your vector layer's features array to see if your feature was fetched?

Andreas.


On Sat, Jun 1, 2013 at 8:34 AM, Ivan Sipka <[hidden email]> wrote:
Hello,

this is my scenario: a map with one baselayer and one overlay vector layer with one point feature in it. I want to obtain the feature DOM node via document.getElementById. Feature gets drawn on screen in both cases.

If I use canvas renderer the element gets drawn on map but:

1) document.getElementById(feature.geometry.id) returns null
2) DOM tree inspection via chrome debugger shows no elements in canvas

If I use SVG renderer, I can see it in the DOM tree and document.getElementById(feature.geometry.id) returns it.

Example code:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://openlayers.org/api/2.12/OpenLayers.js"></script>
       <!--<script src="http://openlayers.org/dev/OpenLayers.js"></script>-->
        <script type="text/javascript">
            
            var map,vectors,feature;

            function init() {
                var x = 659688.852138;
                var y = 5710701.2962197;
                
                map = new OpenLayers.Map({
                    div: "map",
                    projection: "EPSG:900913",
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar()
                    ]
                });
                
                var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
                
                renderer = typeof(renderer) == 'undefined' ? 'Canvas' : renderer;

                vectors = new OpenLayers.Layer.Vector('vectors', {
                                    renderers: [renderer]
                                }); 
                                
                feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x,y));

                map.addLayers([new OpenLayers.Layer.OSM(),vectors]);

                map.setCenter(new OpenLayers.LonLat(x,y), 18);
                vectors.addFeatures(feature);
                
                var fetched = document.getElementById(feature.geometry.id);
                
                alert('obtaining feature via document.getElementById has '+ (fetched == null ? 'failed':'suceeded'));
            }
        </script>
        <style>
            #map {
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body onload="init();">
        <div id="map"></div>
    </body>
</html>

Default renderer is Canvas if you want to test it you can give the canvas implementation as a URL parameter like this:

example.html
example.html?renderer=Canvas

or

example.html?renderer=SVG

Judging by the canvas example I'm doing it right. I tried to alternate OL versions from 2.12 to 2.13dev but it didn't help.

Why is this happening?  Is there any clever workaround?

thanks for your time
linski

_______________________________________________
Dev mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/openlayers-dev




--
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.

_______________________________________________
Dev mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/openlayers-dev