Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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: http://openlayers.org/dev/examples/styles-context.html

I played with the code a little bit in the html example files that come with the .zip download.

When I copied the code into my JSF .xhtml page, the map appears but the markers are not displayed. Here is the example code:

<script type="text/javascript">
//<![CDATA[
var map;
function init(){
 map = new OpenLayers.Map('map', {maxResolution:'auto'});
var wms = new OpenLayers.Layer.WMS.InlineXhtml( "OpenLayers WMS",
 "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic', format: 'image/svg+xml'} );
 map.addLayer(wms);

// create 50 random features in the northern hemisphere
 // give them a "type" attribute that will be used to style
// them by size
var features = new Array(50);
            for (var i=0; i<features.length; i++) {
 features[i] = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(
                        (360 * Math.random()) - 180, 90 * Math.random()
), {
 type: 5 + parseInt(5 * Math.random())
}
);
 }

 // allow testing of specific renderers via "?renderer=Canvas", etc
 var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

            // create the layer styleMap with a simple symbolizer template
yer1 = new OpenLayers.Layer.Vector('Points', {
styleMap: new OpenLayers.StyleMap({
pointRadius: "${type}", // based on feature.attributes.type
 fillColor: "#000000"
 }),
 renderers: renderer
});
layer1.addFeatures(features);

 map.addLayers([layer1]);
map.zoomToExtent(layer1.getDataExtent());
 }
//]]>
 </script>

I added:

map.zoomToExtent(layer1.getDataExtent());

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.

I have uploaded the example .html file to my webapp and it works perfectly. So this seems to be the .xhtml issue...

Is it the problem of xhtml? How to fix this?

EDIT:

Using the google console tool I analysed the code that was generated and it turnes out that in the .xhtml page the radious is zero:

<circle id="OpenLayers.Geometry.Point_41" cx="483.55555555555566" cy="150.7555555555556" r="" fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle>

Please notice that it's always r="" but why is that? The script code is IDENTICAL in both cases - one (.html) produces the right radios, the other(.xhtml) one doesn't...

share|improve this question
    
does the example work with the 50 random markers in the example? –  atlefren May 10 '12 at 14:15
    
The example .html works with either random or manually set cooridnates. None works in .xhtml... (Only the markers are not displayed, the map itself is and as I mentioned it is properly zoomed to the given points) –  srd.pl May 10 '12 at 14:27
    
can you add your code in jsfiddle.net –  Aragon May 10 '12 at 14:49
    
jsfiddle.net/Udd4e/59 Here is the link, but I can't get the map to be displayed (it is displayed on my .xhtml webapp page). Is there sth missing in the code? –  srd.pl May 10 '12 at 15:14
    
Which browser are you using? Are you using the same rendering mode on both pages (quirks vs standard) –  johanvdw Jun 9 '12 at 22:13
add comment

1 Answer

in your code, there is a problem about adding layer and feautures. firstly add your layer as map.addLayer(layer1); then features as layer1.addFeatures(features);

so it have to be sth like this:

yer1 = new OpenLayers.Layer.Vector('Points', {
styleMap: new OpenLayers.StyleMap({
pointRadius: "${type}", // based on feature.attributes.type
 fillColor: "#000000"
 }),
 renderers: renderer
});

map.addLayer(layer1);
layer1.addFeatures(features);

i hope it helps you...

share|improve this answer
    
No unfortunately it doesn't - still no change in the behavior. Besides the EXACT SAME code works in the example .html file... –  srd.pl May 10 '12 at 15:24
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.