0

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

This is kml file: click here to get kml file

  • 1
    Can you be a little more precise. What is your exact problem? – Stefan May 30 '13 at 7:05
  • What have you tried so far to "get KML attribute data on onload of html page using openlayers"? Did you get almost all the way and then strike an error you can post along with those steps? – PolyGeo May 30 '13 at 7:22
0

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.

  • I want to change color of the kml layer based on attribute data.. Eg: Usstate Id < 30--- green, 31 < Usstate Id < 70--- blue, Usstate Id > 71--- yellow, Is it possible through openlayers?? – Arun May 30 '13 at 7:15
  • sure, see my edit above – Gery May 30 '13 at 7:20
  • When I try this.. I am getting this error "Uncaught TypeError: Object #<Object> has no method 'addRules' " – Arun May 30 '13 at 7:44
  • that seems to be caused by a wrong object being passed, probably your kml is multipolygon, check here to have more ideas – Gery May 30 '13 at 7:51
0

You can add a kml layer this way:

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", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "kml/lines.kml",
            format: new OpenLayers.Format.KML({
                extractStyles: true, 
                extractAttributes: true,
                maxDepth: 2
            })
        })
    })
],
center: new OpenLayers.LonLat(-112.169, 36.099),
zoom: 11

});

UPDATE I

In the init you can add a style:

            var myStyles = new OpenLayers.StyleMap({ 
                        "default": new OpenLayers.Style({ 
                            fillColor: "${getColor}",
                            strokeWidth: 1,             
                            strokeColor: "#000", 
                            fillOpacity: 0.8, 
                            graphicZIndex: 5,
                            //label: "${getLabel}"                  
                        },
                        {
                            context: {
                                getColor : function (feature) {
                                    return feature.attributes.pop_est > 100000000 ? '#00317c' :
                                           feature.attributes.pop_est > 10000000 ? '#ffc000' :
                                                                              '#FFEDA0' ;
                                }
                            } 
                        })
                    }); 

Then add the styleMap to the kml layer

styleMap: myStyles

Update II

Like this

var kml = new OpenLayers.Layer.Vector("kml", {
                styleMap: myStyles,
                projections: "EPSG:4326",
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "test.kml",
                    format: new OpenLayers.Format.KML()
                })
            });
  • Thanks for answering my question.. Actually I am able to add tha kml layer on my base map. What I need is I want to add colors to the each state of the kml layer using attribute data. This is my requirement – Arun May 30 '13 at 7:10
  • 1
    It is better if you add this to the question. – Stefan May 30 '13 at 7:15
  • I want to change color of each state of the kml layer based on attribute data.. Eg: Usstate Id < 30--- green, 31 < Usstate Id < 70--- blue, Usstate Id > 71--- yellow, Is it possible through openlayers?? – Arun May 30 '13 at 7:16
  • Hi Stefan Van Der Hoorn. Thanks 4 ur response.. I did what you say.. Still I am not getting any change.. var kmllayer = new OpenLayers.Layer.Vector("KML", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: "kml/us_states.kml", format: new OpenLayers.Format.KML({ extractStyles: true, extractAttributes: true }) }), styleMap: myStyles }); – Arun May 30 '13 at 7:29
0

perhaps a bit late but:

You need to set extractStyles: false on your KML layer if your KML content doesn't contain styles (even when it does contain styles, chances are it will not work with the styles defined in the KML itself). I've spent a great amount of time and I pretty much came to the conclusion that openlayers is quite picky on the KML format. For me, the KML I generate opens fine in google earth (with icons defined in styles from within the KML), but the same KML will not show in openlayers (but it is there, just no icons).

By setting styleMaps in your code, you don't need that option anyway as styles are not extracted from KML.

Your KML file is probably parsed ok but you aren't seeing anything, but the data is there, just no icons. You can check if the parsing works when zooming to the bounds. If that works you know the data is there:

    var bounds = kmllayer.getDataExtent();
    if(bounds){ map.panTo(bounds.getCenterLonLat()); 
       map.updateSize({force:true});
       map.zoomToExtent(bounds, true);
    }

This is from experiences with openlayers 2.11.

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.