[GIS] Openlayers KML Layer Styling

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

Best Answer

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.

Related Question