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 am trying to change the style of an OpenLayers.Vector using radio buttons and redraw it, but the result is a black vector.

I tried own build OpenLayers11 and 12, beside api openlayers hosted.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>See kml data</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" language="javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">

var osm
var eu;
var Heatmap = new OpenLayers.Style({ 
       id: 1,
       name: 'heatmap',
       fill: true,
       fillColor: '#FF0000',
       fillOpacity: 0.5,
       strokeWidth: 4,
       strokeColor: 'white'
    });

var RG = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
       id: 2,
       name: 'rg',
       fill: true,
       fillColor: '#00FF00',
       fillOpacity: 0.5,
       strokeColor: 'white'
    })
    });

var RW = new OpenLayers.Style({
       id: 3,
       name: 'rw',
       fill: true,
       fillColor: '#FFFF00',
       fillOpacity: 0.5,
       strokeColor: 'white'
    }); 

function init() {
var bounds = new OpenLayers.Bounds(
                -1177646.439, 4104612.325,
                3850226.548, 11465970.640
                );

map = new OpenLayers.Map("map", {
    //allOverlays: true,
    maxExtent: bounds,
    //restrictedExtent: bounds
});

//osm =new OpenLayers.Layer.WMS( "Open Street Map",
        //"http://vmap0.tiles.osgeo.org/wms/vmap0",
                //{
                    //layers: 'basic',
                    //isBaseLayer: true,
                    //maxExtent: bounds,
                   // sphericalMercator: true,
                    //visibility: false
                //}
            //);    

kml = new OpenLayers.Layer.Vector("KML", {
        //style: Heatmap,
        isFixed: false,
        strategies: [new OpenLayers.Strategy.BBOX()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "europe.kml",
            format: new OpenLayers.Format.KML({
                extractStyles: false,
                extractAttributes: false
            })
        })
    });

//kml = new OpenLayers.Layer.GML('KML', 
                //"europe.kml",
                //{
                        //visibility: true,
                        //format: OpenLayers.Format.KML,
                        //style: Heatmap,
                        //projection: map.displayProjection,
                        //strategies: [new OpenLayers.Strategy.BBOX()]
                //}
        //);


map.addLayers([osm, kml]);
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.MousePosition({
            prefix:"long",
            suffix:"lat",
            numDigits:4,
            granularity:true,
    displayProjection:(new OpenLayers.Projection("EPSG:4326"))
            }));
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.addControl(new OpenLayers.Control.ScaleLine());
map.zoomToExtent(bounds);
}

</head>

<body onload="init()">

  <div id="wrap">

    <div id="header"><h1>See kml data with user styling</h1>

    </div>


<div id="main">

        <div id="map"></div>

</div>

<div id="sidebar"><h1>Select style</h1>
<form name="styleform">
<input name="iStyle1" type="radio" value="heatmap.kml" id="Heatmap" onclick="choosestyle(this.form)">Heatmap</input>
<input name="iStyle2" type="radio" value="RG" id="RG" onclick="choosestyle(this.form)">Red to Green</input>
<input name="iStyle3" type="radio" value="RW" id="RW" onclick="choosestyle(this.form)">Red to White</input>
</form>
</div>

<div id="footer"></div>
</body>
<script type="text/javascript">
function choosestyle(userstyles) {
//alert(userstyles.elements[0].value);
//var userstyle = document.forms[0].elements[iStyle];
//alert(userstyle.length);
for(var i = 0; i < userstyles.length; i++)
   {
   if (userstyles[i].checked)
      {
        kml.style = userstyles[i].value;
    kml.redraw();
    userstyles[i].checked = false;
      }
   }
}
</script>
</html> 

I tried beside an Openlayers.Vector, Openlayers.GML. I tried beside simple OpenLayers.Style, OpenLayers.StyleMap and server hosted kml style.

The results are shown bellow:

Initial default style

User choosen style

Any clue would help!

Mihai

Edit of the choosestyle(userstyles) function which on the alert returns a style object (checked with Firebug DOM):

function choosestyle(userstyles) {
//alert(userstyles.elements[0].value);
//var userstyle = document.forms[0].elements[iStyle];
//alert(userstyle.length);
for(var i = 0; i < userstyles.length; i++)
   {
   if (userstyles[i].checked)
      {
            kml.style = userstyles[i].value;
        kml.redraw();
            alert(kml.style);
        userstyles[i].checked = false;
      }
   }
}

But the map has the same black color.

share|improve this question
add comment

1 Answer 1

up vote 3 down vote accepted

There is working example of your application:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>See kml data</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>

    var Heatmap = { 
      fill: true,
      fillColor: '#FF0000',
      fillOpacity: 0.5,
      strokeWidth: 4,
      strokeColor: 'white'
    };

    var RG = {
      fill: true,
      fillColor: '#00FF00',
      fillOpacity: 0.5,
      strokeColor: 'white'
    };

    var RW = {
        fill: true,
        fillColor: '#FFFF00',
        fillOpacity: 0.5,
        strokeColor: 'white'
    };

    var styles = {"RW": RW, "RG": RG, "Heatmap": Heatmap};

    function choosestyle(userstyles) {
        for (var i = 0; i < userstyles.length; i++) {
            if (userstyles[i].checked) {
                kml.style = styles[userstyles[i].value];
                kml.redraw();
                userstyles[i].checked = false;
            }
        }
    } 

    function init() {

        var bounds = new OpenLayers.Bounds(-1177646.439, 4104612.325, 3850226.548, 11465970.640);

        map = new OpenLayers.Map("map", {maxExtent: bounds});

        osm =new OpenLayers.Layer.OSM("Open Street Map");    

        kml = new OpenLayers.Layer.Vector("KML", {
                isFixed: false,
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "europe.kml",
                    format: new OpenLayers.Format.KML({
                        extractStyles: false,
                        extractAttributes: false
                    })
                })
            });

        map.addLayers([osm, kml]);
        map.zoomToExtent(bounds);
    }
</script>

</head>
<body onload="init()">
<div id="wrap">
<div id="header"><h1>See kml data with user styling</h1>
</div>

<div id="main">
<div id="map" style="width:640px; height:480px;"></div>
</div>

<div id="sidebar"><h1>Select style</h1>
<form name="styleform">
<input name="iStyle1" type="radio" value="Heatmap" id="Heatmap" onclick="choosestyle(this.form)">Heatmap</input>
<input name="iStyle2" type="radio" value="RG" id="RG" onclick="choosestyle(this.form)">Red to Green</input>
<input name="iStyle3" type="radio" value="RW" id="RW" onclick="choosestyle(this.form)">Red to White</input>
</form>
</div>

<div id="footer"></div>
</body>
</html>

There are some mistakes in original code:

  1. OpenLayers.Layer.Vector.style is symbolizer object, not OpenLayers.StyleMap;
  2. userstyles[i].value returns string, not symbolizer, so you need lookup object {"RW": RW, "RG": RG, "Heatmap": Heatmap};
  3. Value of input iStyle1 should be Heatmap.
share|improve this answer
    
I tried your code but with an alert in the choosesstyle() function, which returns undefined. I updated the code of the function with a variant which on alert returns an object (using eval()), which in Firebug DOM is indeed a style. But still black kml. –  Niculita Mihai Aug 2 '12 at 10:20
    
@NiculitaMihai, here is live demo: gis-lab.info/share/DR/sandbox/kmlstyle.html –  drnextgis Aug 2 '12 at 10:30
    
Yes it work on your way. I moved the position of the function before the init(). In the first try the function was moved after the body. Thanks man! –  Niculita Mihai Aug 2 '12 at 11:06
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.