[OpenLayers-Dev] Openlayers 2.12 canvas renderer issue

Ivan Sipka frkator at gmail.com
Sat Jun 1 07:34:20 PDT 2013


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<https://developer.mozilla.org/en-US/docs/Web/API/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<http://openlayers.org/dev/examples/canvas.html> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20130601/c03b39c3/attachment.html>


More information about the Dev mailing list