<div dir="ltr">Hello,<div><br></div><div>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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById">document.getElementById</a>. Feature gets drawn on screen in both cases.</div>
<div><br></div><div style>If I use canvas renderer the element gets drawn on map but:</div><div style><br></div><div style>1) document.getElementById(<a href="http://feature.geometry.id">feature.geometry.id</a>) returns null</div>
<div style>2) DOM tree inspection via chrome debugger shows no elements in canvas</div><div style><br></div><div><div style>If I use SVG renderer, I can see it in the DOM tree and document.getElementById(<a href="http://feature.geometry.id">feature.geometry.id</a>) returns it.</div>
</div><div style><br></div><div style>Example code:</div><div style>
<div id="map"></div>
<div id="map"></div>
<div id="map"></div>
<div id="map"></div><div><br></div><div><!DOCTYPE html></div><div><html></div><div> <head></div><div> <script src="<a href="http://openlayers.org/api/2.12/OpenLayers.js">http://openlayers.org/api/2.12/OpenLayers.js</a>"></script></div>
<div> <!--<script src="<a href="http://openlayers.org/dev/OpenLayers.js">http://openlayers.org/dev/OpenLayers.js</a>"></script>--><br></div><div> <script type="text/javascript"></div>
<div> </div><div> var map,vectors,feature;</div><div><br></div><div> function init() {</div><div> var x = 659688.852138;</div><div> var y = 5710701.2962197;</div>
<div> </div><div> map = new OpenLayers.Map({</div><div> div: "map",</div><div> projection: "EPSG:900913",</div><div> controls: [</div>
<div> new OpenLayers.Control.Navigation(),</div><div> new OpenLayers.Control.PanZoomBar()</div><div> ]</div><div> });</div><div> </div>
<div> var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;</div><div> </div><div> renderer = typeof(renderer) == 'undefined' ? 'Canvas' : renderer;</div>
<div><br></div><div> vectors = new OpenLayers.Layer.Vector('vectors', {</div><div> renderers: [renderer]</div><div> }); </div><div> </div>
<div> feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(x,y));</div><div><br></div><div> map.addLayers([new OpenLayers.Layer.OSM(),vectors]);</div><div><br></div><div> map.setCenter(new OpenLayers.LonLat(x,y), 18);</div>
<div> vectors.addFeatures(feature);</div><div> </div><div> var fetched = document.getElementById(<a href="http://feature.geometry.id">feature.geometry.id</a>);</div><div> </div>
<div> alert('obtaining feature via document.getElementById has '+ (fetched == null ? 'failed':'suceeded'));</div><div> }</div><div> </script></div><div> <style></div>
<div> #map {</div><div> width: 600px;</div><div> height: 400px;</div><div> }</div><div> </style></div><div> </head></div><div> <body onload="init();"></div>
<div> <div id="map"></div></div><div> </body></div><div></html></div><div><br></div><div style>Default renderer is Canvas if you want to test it you can give the canvas implementation as a URL parameter like this:</div>
<div style><br></div><div style>example.html</div><div style>example.html?renderer=Canvas</div><div style><br></div><div style>or</div><div style><br></div><div style>example.html?renderer=SVG<br></div><div style><br></div>
<div style>Judging by the <a href="http://openlayers.org/dev/examples/canvas.html">canvas example</a> I'm doing it right. I tried to alternate OL versions from 2.12 to 2.13dev but it didn't help.</div><div style><br>
</div><div style>Why is this happening? Is there any clever workaround?</div><div style><br></div><div style>thanks for your time</div><div style>linski</div></div></div>