1

I'm trying to add some KML files to a vector layer using this code:

            var map = new OpenLayers.Map('map');   
            map.addLayer(new OpenLayers.Layer.OSM());
            var kml = ['kml/file1.kml','kml/file2.kml' ... 'kml/fileN.kml'];

            function createFeatures() {
                var features = [];
                for (var i=0; i<kml.length; i++) {
                        features.push(new OpenLayers.Feature.Vector(
                            new OpenLayers.Protocol.HTTP({
                                url: 'kml/file'+i+'.kml',
                                format: new OpenLayers.Format.KML()
                            }
                        )));
                }
                return features;
            }

            var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
                isBaseLayer: false,
                style: { strokeWidth: 3, strokeColor: "#FF0000", fillOpacity: 0.50, fillColor: "#FF0000" }
            });
            map.addLayer(vectors1); 
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            vectors1.addFeatures(createFeatures());  

I get this error:

Uncaught TypeError: a.geometry.getBounds is not a function

1

new OpenLayers.Feature.Vector creates a single feature from a geometry, which explains the error. You would need to load each kml, which would be an asynchronous operation, and when loaded read the features and add them to the layer. Here's some very basic code:

        var map = new OpenLayers.Map('map');   
        map.addLayer(new OpenLayers.Layer.OSM());
        var kml = ['kml/file1.kml','kml/file2.kml' ... 'kml/fileN.kml'];

        var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
            isBaseLayer: false,
            style: { strokeWidth: 3, strokeColor: "#FF0000", fillOpacity: 0.50, fillColor: "#FF0000" }
        });
        map.addLayer(vectors1); 
        map.addControl(new OpenLayers.Control.LayerSwitcher());

        var format = new OpenLayers.Format.KML({
            externalProjection: new OpenLayers.Projection('EPSG:4326'),
            internalProjection: new OpenLayers.Projection('EPSG:900913')
        });

        function loadKML(url) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                var features = format.read(xhr.responseText);
                console.log(features);
                vectors1.addFeatures(features);
            }
            xhr.open("GET", url, true);
            xhr.send();
        }

        for (var i=0; i<kml.length; i++) {
            loadKML(kml[i]);
        }
  • With this I get no errors, but my KML files are not shown on the map. – imre Feb 18 at 12:21
  • Use console.log to check that features are being added, also zoom in on lat/lon 0,0 off the coast of Africa to see if they are there but in the wrong projection. – Mike Feb 18 at 12:52
  • You are right, they are at Africa. But how? Before I tried to add them to the same layer, I created separate layers for each files, and they were displayed at the correct place. – imre Feb 19 at 19:54
  • The projections needed to be specified. Hopefully adding then to the format will be sufficient. – Mike Feb 19 at 20:24

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.