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>

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

1 Answer 1

Reset to default
3

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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