What code could I use to make it wait for the program to load the map first after the zoomIn command?

Here's a part of my code.

for (var z = zoomfrom; z <= zoomto; z++) { 
    var scale = MapPanel.map.getScale();
    var zoomlevel = MapPanel.map.getZoom();
    NewZoomLevel = getzoomlevel(scale); 
    lat1 = lat2tile(coords.top, NewZoomLevel);
    lat2 = lat2tile(coords.bottom, NewZoomLevel);

    long1 = long2tile(coords.left, NewZoomLevel);
    long2 = long2tile(coords.right, NewZoomLevel);

    for (var x= lat1; x<=lat2; x++) {
         for (var y= long1; y<=long2; y++) {
              list = list + startlink + zoomlevel + '/' + x + '/' + y + '<br>';
        } //y for
    } //x for

    // this part im hoping to put a code to wait for map to load after zoomIn                                                                                               
}; // z for

I tried using delayed function of extjs but to no avail.


Due to the asynchronous nature of JavaScript you can't "delay" code execution to wait for a certain event to happen, you need to use completion callbacks. OpenLayers.Map has a range of events you can listen to, the one you need is zoomend:

zoomend triggered after a zoom completes

Here's a simple example based on your code:

var map = MapPanel.map;
map.events.register('zoomend', map, function() {
  console.log('Zoom completed!');

console.log('About to zoom in');
console.log('Zoom in started');

You can test it directly in your browser by pasting the code above (without the first line) into the JavaScript console on http://openlayers.org/. The output confirms that the execution order is what you'd expect:

About to zoom in

Zoom in started

Zoom completed!

However, it's not clear what you need the list variable for - depending on whether you'd like to use it before or after the zoom event you may need to rejiggle your code a bit.

  • i'm actually gonna use the list. it's supposed to be a container for links and it will show it after all the Z loop finishes. erm.. what's a completion callback? i never heard it. – Minadale Aug 13 '14 at 0:27
  • There are loads of articles explaining that, google for "JavaScript callback" (SO for example: stackoverflow.com/q/3523628/1240557). Did you try using the zoomend event as described above? Are you still having problems? – kryger Aug 13 '14 at 10:07
  • yup. i checked it out. didn't work out. tried using loadend event at the moment. it might work seeing the loadend example on Openlayers. – Minadale Aug 14 '14 at 0:32
  • maybe i should change my question. what I wanted is to "wait" for all the tiles of the baselayer to be loaded after zoomIn was fired and the for loop to be executed. – Minadale Aug 14 '14 at 2:34

In Openlayers there is loadend event to listen to layer(s) and not map when it is loaded, check below code & link:

var mylayer = ''//Openlayers layer object
mylayer.events.register("loadend", mylayer, function() { 
   console.log('layer loaded');

link: http://dev.openlayers.org/examples/layerLoadMonitoring.html

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.