CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
jotamon
jotamon

Reputation: 1614

How to detect progress loaded for GroundOverlay

I am loading 10 GroundOverlays onto a GoogleMap and would like to show the progress associated with loading the images.

var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42.80059,-115.253806),
new google.maps.LatLng(47.481725,-110.227471));

var layer1 = new google.maps.GroundOverlay("overlays/layer1.png",imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);

How can I detect when the actual image of each overlay has loaded or the % loaded? I'd like to add a progress bar or something to show the user that overlays are loading as it can take 5 seconds or so.

Upvotes: 5

Views: 1380

Answers (3)

hoogw
hoogw

Reputation: 5525

As of 10 years later, 2021 Dec. I can confirm that @Aadaam 's idea works great !

Try my example:

click the example link, try zoom map or pan, it load image as groundOverlay, the progressing bar show on left panel bottom.

       new Image()

is HTML img object, document is here

      img_object.onload

is all lowercase, if you write

      .onLoad

will give you error.

https://transparentgov.net:3200/googlemaps12/default?layer_id=0&layer=SilverRock_MasterPlan_29Nov2016_s200-images.jpg&center_lat=33.65789936781538&center_long=-116.25862990762825&center_zoom=15&url=https%3A%2F%2Fgis.la-quinta.org%2Farcgis%2Frest%2Fservices%2FCommunity_and_economic%2FSilver_Rock_Master_Plan%2FMapServer&panto=0&overlayOpacity=8&overlayType=overlayType_image

my working code

enter image description here

Upvotes: 0

Aadaam
Aadaam

Reputation: 3739

If you have one single image as a groundoverlay, I'd do the following:

  1. Create an img tag through javascript
  2. Set its src to overlays/layer1.png
  3. display a waiting box
  4. Add an onload event to it, on which load it as a gmaps overlay and close the waiting box.

Progress... that's a bit more browser specific. But loading is easy, so:

function loadOverlay(){
    var img = new Image();
    var img_url = "overlays/layer1.png"
    img.src= img_url;
    $('#wait_for_overlay').show();
    img.onLoad = function(){
        $('#wait_for_overlay').hide();
        var layer1 = new google.maps.GroundOverlay(img_url,imageBounds);
        layer1.setOpacity(.5);
        layer1.setMap(map);
    }
};

Reason why this will work:

Creating an img object and setting its 'src' attribute will make the browser start to download the requested file as soon as the javascript function doing this has finished.

The browser will put this image into its local cache, then call the onLoad function to see what should happen with it.

The callback actually does nothing to the img variable (perhaps it should, make sure it doesn't get wiped out as per closure rules, do a NOP with it if this is buggy), but instead calls the google-maps function.

The google-maps function will request the image at the exact same url, at which the browser will look up its cache table, and bring the image back immediately from cache.

This trick is nasty, but in fact, the google maps engine will do the exact same onLoad thingy in the background (as this is how map engines work).

I hope this satisfies your question... no progress bar, just a loading indicator... Perhaps you could do progress bar by requesting it with XHR and checking progress, I'm not sure, but the trick will be the same: do a faux request, in order to make it arrive to the cache.

Upvotes: 5

user1226919
user1226919

Reputation: 215

I doubt you can do it. You may request for new functions added to the GroundOverlay class in order for the users to have more access and control over the loaded image. I'd like to have those kind of functions for my projects too.

Upvotes: 0

Related Questions