Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I have 2 or more maps with one ore n layers on each map. Now I want zoom to extent for each map, but the getDataExtent returns only for the last layer in the last map a bounds.

Can you help me?

Here is the code

var jekyllMapping = (function () {
    return {
        mappingInitialize: function() {
            var maps = document.getElementsByClassName("jekyll-mapping");
            for ( var i = 0; i < maps.length; i++ ) {
                var zoom      = maps[i].getAttribute("data-zoom"),
                    lat       = maps[i].getAttribute("data-latitude"),
                    lon       = maps[i].getAttribute("data-longitude"),
                    layers    = maps[i].getAttribute("data-layers"),
                    title     = maps[i].getAttribute("data-title"),
                    map, markers, center;

                maps[i].setAttribute('id', 'jekyll-mapping' + i);

                markers = new OpenLayers.Layer.Markers("Markers")
                map = new OpenLayers.Map('jekyll-mapping' + i);
                map.addLayer(new OpenLayers.Layer.OSM());
                map.addLayer(markers);
                if (lat && lon) {
                    center = new OpenLayers.LonLat(lon, lat).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        new OpenLayers.Projection("EPSG:900913"));
                    map.setCenter(center, zoom);
                    markers.addMarker(new OpenLayers.Marker(center));
                }

                if (layers) {
                    // layers are url's to kml files
                    layers = layers.split(' ');
                    while (layers.length > 0){
                        var m = new OpenLayers.Layer.Vector("KML", {
                                strategies: [new OpenLayers.Strategy.Fixed()],
                                protocol: new OpenLayers.Protocol.HTTP({
                                            url: layers.pop(),
                                            format: new OpenLayers.Format.KML({extractStyles: true, extractAttributes: true, maxDepth: 2 })
                                })
                        });
                        if (m) {
                            m.events.register("loadend", m, function () {
                                // raises for all layers but only the last layer on second map gives me a bound, why???
                                var bounds = m.getDataExtent();
                                if (bounds) {
                                    map.zoomToExtent(bounds);
                                }
                            });
                            map.addLayer(m);
                        }
                    }
                }
            }
        }
    };
}());

window.onload = function() { jekyllMapping.mappingInitialize(); }
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

ok, i found my own solution (after some thoughts...), it's not perfect, but it works (look at my comments)

var jekyllMapping = (function () {
    return {
        mappingInitialize: function() {
            // holds all created maps
            var allMaps = [];
            // nested for loadend event
            var lastLayer;

            var maps = document.getElementsByClassName("jekyll-mapping");
            for ( var i = 0; i < maps.length; i++ ) {
                var zoom      = maps[i].getAttribute("data-zoom"),
                    lat       = maps[i].getAttribute("data-latitude"),
                    lon       = maps[i].getAttribute("data-longitude"),
                    layers    = maps[i].getAttribute("data-layers"),
                    title     = maps[i].getAttribute("data-title"),
                    map, markers, center;

                // Set an arbitrary id on the element
                maps[i].setAttribute('id', 'jekyll-mapping' + i);

                markers = new OpenLayers.Layer.Markers("Markers")
                map = new OpenLayers.Map('jekyll-mapping' + i);

                // we need the map later for zoomToExtent
                allMaps.push(map);

                map.addLayer(new OpenLayers.Layer.OSM());
                map.addLayer(markers);
                if (lat && lon) {
                    center = new OpenLayers.LonLat(lon, lat).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        new OpenLayers.Projection("EPSG:900913"));
                    map.setCenter(center, zoom);
                    markers.addMarker(new OpenLayers.Marker(center));
                }

                if (layers) {
                    layers = layers.split(' ');
                    while (layers.length > 0){
                        lastLayer = new OpenLayers.Layer.Vector("KML", {
                                    strategies: [new OpenLayers.Strategy.Fixed()],
                                    protocol: new OpenLayers.Protocol.HTTP({
                                                  url: layers.pop(),
                                                  format: new OpenLayers.Format.KML({extractStyles: true, extractAttributes: true, maxDepth: 2 })
                                              })
                                });
                        map.addLayer(lastLayer);
                    }
                }
            }
            // now try zooming all maps to extent
            if (allMaps.length > 0 && lastLayer) {
                lastLayer.events.register("loadend", lastLayer, function () {
                    while (allMaps.length > 0) {
                        var map = allMaps.pop();
                        var layers = map.getLayersByClass("OpenLayers.Layer.Vector");
                        var bounds;
                        for (i = 0; i < layers.length; i++) {
                            var l = layers[i];
                            if (l) {
                                var b = l.getDataExtent();
                                if (b) {
                                    if (bounds) {
                                        bounds.extend(b);
                                    } else {
                                        bounds = b;
                                    }
                                }
                            }
                        }
                        if (bounds) {
                            map.zoomToExtent(bounds);
                        } else {
                            map.zoomToMaxExtent();
                        }
                    }
                });
            }
        }
    };
}());

window.onload = function() { jekyllMapping.mappingInitialize(); }

here is another simple example

<html>
    <head>
        <title>OpenLayers Example</title>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
        <div style="width:800px; height:350px" id="map1"></div>
        <div style="width:800px; height:350px" id="map2"></div>

        <script defer="defer" type="text/javascript">
            var allMaps = [];
            var map1 = new OpenLayers.Map('map1');
            allMaps.push(map1);
            map1.addLayer(new OpenLayers.Layer.OSM());
            var l1 = new OpenLayers.Layer.Vector("KML", {
                        strategies: [new OpenLayers.Strategy.Fixed()],
                        protocol: new OpenLayers.Protocol.HTTP({
                                      url: "running_001.kml",
                                      format: new OpenLayers.Format.KML({extractStyles: true, extractAttributes: true, maxDepth: 2 })
                                  })
                    });
            var l2 = new OpenLayers.Layer.Vector("KML", {
                        strategies: [new OpenLayers.Strategy.Fixed()],
                        protocol: new OpenLayers.Protocol.HTTP({
                                      url: "running_002.kml",
                                      format: new OpenLayers.Format.KML({extractStyles: true, extractAttributes: true, maxDepth: 2 })
                                  })
                    });
            map1.addLayer(l1);
            map1.addLayer(l2);

            var map2 = new OpenLayers.Map('map2');
            allMaps.push(map2);
            map2.addLayer(new OpenLayers.Layer.OSM());
            var l3 = new OpenLayers.Layer.Vector("KML", {
                        strategies: [new OpenLayers.Strategy.Fixed()],
                        protocol: new OpenLayers.Protocol.HTTP({
                                      url: "running_003.kml",
                                      format: new OpenLayers.Format.KML({extractStyles: true, extractAttributes: true, maxDepth: 2 })
                                  })
                    });
            l3.events.register("loadend", l3, function () {
                if (allMaps.length > 0) {
                    while (allMaps.length > 0) {
                        var map = allMaps.pop();
                        var layers = map.getLayersByClass("OpenLayers.Layer.Vector");
                        var bounds;
                        for (i = 0; i < layers.length; i++) {
                            var l = layers[i];
                            if (l) {
                                var b = l.getDataExtent();
                                if (b) {
                                    if (bounds) {
                                        bounds.extend(b);
                                    } else {
                                        bounds = b;
                                    }
                                }
                            }
                        }
                        if (bounds) {
                            map.zoomToExtent(bounds);
                        } else {
                            map.zoomToMaxExtent();
                        }
                    }
                }
            });
            map2.addLayer(l3);
        </script>
    </body>
</html>

hope that helps :-)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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