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

share|improve this question
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. –  anand 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

1 Answer 1

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.

share|improve this answer

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.