Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Good Morning: I have a problem, I develop an jsf application with openlayers api, this example work fine with html page, but when I change to xhtml page the label text doesn´t showing. I hope anyone can help me, Thanks for your time and help. Here is my code.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"></meta>
<meta name="apple-mobile-web-app-capable" content="yes"></meta>
<title>OpenLayers Labeled Features Example</title>
    <link rel="stylesheet" href="../openLayers/theme/default/style.css"
<link rel="stylesheet" href="../openLayers/style.css" type="text/css"></link>
<script src="../openLayers/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
    var map;

    function init(){
        map = new OpenLayers.Map('map');

        var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "", {layers: 'basic'} );

        // 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;

        var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
            styleMap: new OpenLayers.StyleMap({'default':{
                strokeColor: "#00FF00",
                strokeOpacity: 1,
                strokeWidth: 3,
                fillColor: "#FF5500",
                fillOpacity: 0.5,
                pointRadius: 6,
                pointerEvents: "visiblePainted",
                // label with \n linebreaks
                label : "name: ${name}\n\nage: ${age}",

                fontColor: "${favColor}",
                fontSize: "12px",
                fontFamily: "Courier New, monospace",
                fontWeight: "bold",
                labelAlign: "${align}",
                labelXOffset: "${xOffset}",
                labelYOffset: "${yOffset}",
                labelOutlineColor: "white",
                labelOutlineWidth: 3
            renderers: renderer

        // create a point feature
        var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
        var pointFeature = new OpenLayers.Feature.Vector(point);
        pointFeature.attributes = {
            name: "toto",
            age: 20,
            favColor: 'red',
            align: "cm"

        // create a polygon feature from a linear ring of points
        var pointList = [];
        for(var p=0; p<6; ++p) {
            var a = p * (2 * Math.PI) / 7;
            var r = Math.random(1) + 1;
            var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
                                                         point.y + 5 + (r * Math.sin(a)));

        var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
        var polygonFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Polygon([linearRing]));
        polygonFeature.attributes = {
            name: "dude",
            age: 21,
            favColor: 'purple',
            align: 'lb'

        multiFeature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Collection([
                new OpenLayers.Geometry.LineString([
                    new OpenLayers.Geometry.Point(-105,40),
                    new OpenLayers.Geometry.Point(-95,45)
                new OpenLayers.Geometry.Point(-105, 40)
                name: "ball-and-chain",
                age: 30,
                favColor: 'black',
                align: 'rt'

        // Create a point feature to show the label offset options
        var labelOffsetPoint = new OpenLayers.Geometry.Point(-101.04, 35.68);
        var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPoint);
        labelOffsetFeature.attributes = {
            name: "offset",
            age: 22,
            favColor: 'blue',
            align: "cm",
            // positive value moves the label to the right
            xOffset: 50,
            // negative value moves the label down
            yOffset: -15

        var nullFeature = new OpenLayers.Feature.Vector(null);
        nullFeature.attributes = {
            name: "toto is some text about the world",
            age: 20,
            favColor: 'red',
            align: "cm"

        map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4);
        vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, labelOffsetFeature, nullFeature ]);
<body onload="init()">
<h1 id="title">OpenLayers Labeled features example</h1>
<div id="tags">
    vector, feature, labeling, symbolizer, light
<p id="shortdesc">
    Label vector features with a text symbolizer.
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example shows drawing simple vector features with a label.</p>
share|improve this question

How to Convert from HTML to XHTML

Add an XHTML <!DOCTYPE> to the first line of every page
Add an xmlns attribute to the html element of every page
Change all element names to lowercase
Close all empty elements
Change all attribute names to lowercase
Quote all attribute values

Please Vaildate your XHTML

Validate XHTML with the W3C Validator

share|improve this answer
Thanks for your quick answer. I validate my page with and do some changes. But I still have the same problem. I change the above code for validate code. – Jose May 10 '13 at 20:32

Well it's some sort of bug in OpenLayers. If you remove <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> then it will work fine

share|improve this answer

Your Answer


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.