TransWikia.com

Feature label not working in xhtml file

Geographic Information Systems Asked on March 31, 2021

I have developed a jsf application with the OpenLayers API, using this example http://openlayers.org/dev/examples/vector-features-with-text.html. It works fine with html page, but when I change to xhtml page the label text is not showing.

Here is my code.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<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"
    type="text/css"></link>
<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", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
        map.addLayer(layer);
        
        // 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}nnage: ${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 = [];
      //<![CDATA[
        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)));
            pointList.push(newPoint);
        }
      //]]>
        pointList.push(pointList[0]);
        
        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.addLayer(vectorLayer);
        vectorLayer.drawFeature(multiFeature);
        map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4);
        vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, labelOffsetFeature, nullFeature ]);
    }
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Labeled features example</h1>
<div id="tags">
    vector, feature, labeling, symbolizer, light
</div>
<p id="shortdesc">
    Label vector features with a text symbolizer.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example shows drawing simple vector features with a label.</p>
</div>
</body>
</html>

2 Answers

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

http://www.w3schools.com/html/html_xhtml.asp

Answered by Mapperz on March 31, 2021

Well it's some sort of bug in OpenLayers. If you remove <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> then it will work fine

Answered by Tankhenk on March 31, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP