<html><body><div style="color:#000; background-color:#fff; font-family:times new roman, new york, times, serif;font-size:12pt"><div>Hello,
<br><br>I just started working with OpenLayers because I want to include
a map on my JSF page (.xhtml files). I want to use the same feature
that is demonstrated in this example:
<br><a href="http://openlayers.org/dev/examples/styles-context.html" target="_top" rel="nofollow">http://openlayers.org/dev/examples/styles-context.html</a><br><br>I played with the code a little bit in the html example files that come with the .zip download.
<br><br>When I copied the code into my JSF .xhtml page, the map appears but the markers are not displayed. Here is the example code:
<br> </div><pre><script type="text/javascript"><br>//<![CDATA[<br>var map;<br>function init(){<br> map = new OpenLayers.Map('map', {maxResolution:'auto'});<br>var wms = new OpenLayers.Layer.WMS.InlineXhtml( "OpenLayers WMS",<br> "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic', format: 'image/svg+xml'} );<br> map.addLayer(wms);<br><br>// create 50 random features in the northern hemisphere<br> // give them a "type" attribute that will be used to style<br>// them by size<br>var features = new Array(50);<br> for (var i=0; i<features.length; i++) {<br> features[i] = new OpenLayers.Feature.Vector(<br>new OpenLayers.Geometry.Point(<br> (360 * Math.random()) - 180, 90 * Math.random()<br>), {<br> type: 5 + parseInt(5 * Math.random())<br>}<br>);<br> }<br><br> // allow testing of specific renderers via "?renderer=Canvas", etc<br> var renderer =
OpenLayers.Util.getParameters(window.location.href).renderer;<br> renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;<br> <br> // create the layer styleMap with a simple symbolizer template<br>yer1 = new OpenLayers.Layer.Vector('Points', {<br>styleMap: new OpenLayers.StyleMap({<br>pointRadius: "${type}", // based on feature.attributes.type<br> fillColor: "#000000"<br> }),<br> renderers: renderer<br>});<br>layer1.addFeatures(features);<br><br> map.addLayers([layer1]);<br>map.zoomToExtent(layer1.getDataExtent());<br> }<br>//]]><br> </script><br></pre><br>I added:
<br><br>map.zoomToExtent(layer1.getDataExtent());
<br><br>and changed the markers from 50 random to 2 markers of the
coordinates of London and Berlin. And the map was centered exactly to
show them, but the markers are still not displayed. But that proves
that the markers are read and loaded to the map correctly, just not
displayed. If I do the same back in the example .html page the map is
again centered properly and the markers are displayed.
<br><br>Is it the problem of xhtml? How to fix this?
</div></body></html>