[GIS] KML attribute data on onload of html page using openlayers

fields-attributeskmlopenlayers-2

How to get KML attribute data on onload of html page using openlayers.

This is kml file: click here to get kml file

Best Answer

to style your kml use (this is just an example, check here for more):

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;

then you show the kml with this using the styles:

var map = new OpenLayers.Map({
    div: "map",
    layers: [
        new OpenLayers.Layer.WMS(
            "WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
            {layers: "basic"}
        ),
        new OpenLayers.Layer.Vector("KML", {
            style : style,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "us_states.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        })
    ],
    center: new OpenLayers.LonLat(-159.35,21.95),
    zoom: 11
});

To filter your kml, you can use this (this is just an example):

var ruleLow = new OpenLayers.Rule(
    {
        filter: new OpenLayers.Filter.Comparison(
            {
                type: OpenLayers.Filter.Comparison.LESS_THAN,
                property: "amount",
                value: 20,
            }),
        symbolizer: {pointRadius: 10, fillColor: "green", fillOpacity: 0.5, strokeColor: "black"}
    });
var ruleHigh = new OpenLayers.Rule(
    {
        filter: new OpenLayers.Filter.Comparison(
            {
                type: OpenLayers.Filter.Comparison.GREATER_THAN_OR_EQUAL_TO,
                property: "amount",
                value: 20,
            }),
        symbolizer: {pointRadius: 20, fillColor: "red", fillOpacity: 0.7, strokeColor: "black"}
    });

style.addRules([ruleLow, ruleHigh]);

Read this to have more options to solve your issue.

Related Question