2

I am trying to change styling of Overlay KML layer in Openlayers, but I am not able to do so.

here is my code:

<!DOCTYPE html>
<html>
<head>

<title>OpenLayers KML as Base Map Example</title>

<script src="http://dev.openlayers.org/releases/OpenLayers-2.12/lib/OpenLayers.js">    

 </script>
 <script type="text/javascript">

function init(){

mapOptions = {
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    maxExtent: new OpenLayers.Bounds(27.2,35.75,28.7,36.5),
};

var style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    style.fillOpacity = 0.2;
    style.graphicOpacity = 1;
    style.strokeWidth = 4; 
    style.strokeColor = "#ff0000";
    style.strokeOpacity = 1;

var map = new OpenLayers.Map('map', mapOptions);

        Var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0",
                {layers: 'basic'} );


    var data =  new OpenLayers.Layer.Vector("KML", {
        style : style,
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "data/All - with projection 2100.kml",
            format: new OpenLayers.Format.KML({
                extractStyles: true, 
                extractAttributes: true
            })
        })
  });

map.addLayer(layer);
map.addLayer(data);
   map.zoomToMaxExtent();

   map.addControl(new  OpenLayers.Control.LayerSwitcher({'ascending':false}));
   map.addControl(new OpenLayers.Control.Scale());
   map.addControl(new OpenLayers.Control.Attribution());

    }
</script>
</head>
<body onload="init()">

<div id="map" class="smallmap" style="color:black; height:512px; width:1312px"></div>

</div>
</body>

  • 1
    in your code: extractStyles: true, from the KML - you probably want false as you want to override the style. – Mapperz Jan 10 '13 at 17:36
  • 1
    @Mapperz : Thank you very much, Yes that was the problem. – apaleja Jan 10 '13 at 17:52
  • anand, can you convert this to an answer (below) and mark it as such? – BradHards Jan 11 '13 at 9:04
2

extractStyles is by default = false. if it is NOT true, then you can set up a custom stylemap.

{Boolean} Extract styles from KML. Default is false. Extracting styleUrls also requires extractAttributes to be set to true

var data =  new OpenLayers.Layer.Vector("KML", {
    style : style,
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "data/All - with projection 2100.kml",
        format: new OpenLayers.Format.KML({
            //extractStyles: true, 
            extractAttributes: true
        })
    })
});

or

        format: new OpenLayers.Format.KML({
            extractAttributes: true
        })

or

        format: new OpenLayers.Format.KML({
            extractStyles: false,
            extractAttributes: true
        })

or

var data =  new OpenLayers.Layer.Vector("KML", {
    style : style,
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "data/All - with projection 2100.kml",
        format: new OpenLayers.Format.KML({
            //extractStyles: false, 
            extractAttributes: true
        })
    }),
    styleMap: new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
        graphicName: "cross",
        pointRadius: 6,
        fillOpacity: 0.50,
        fillColor: "#ffcc66",
        strokeColor: "#ff9933",
        strokeWidth: 2
    })
}),

for further reference on properties for kml => official documentation here. specific extractStyles tab.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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