3
var pixelProjection = new ol.proj.Projection({
    code: 'pixel',
    units: 'pixels',
    extent: [0, 0, width, height]
});

var layerNC = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: '../cartes/img/' + newMapFileName,
            imageSize: [width, height],
            projection: pixelProjection,
            imageExtent: pixelProjection.getExtent()
        })
    }),
    layerVG = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: '../cartes/img/' + oldMapFileName,
            imageSize: [width, height],
            projection: pixelProjection,
            imageExtent: pixelProjection.getExtent()
        })
    });

var map = new ol.Map({
    layers: [
        layerNC,
        layerVG
    ],
    target: 'interactiveMap',
    controls: [],
    view: new ol.View({
        projection: pixelProjection,
        center: ol.extent.getCenter(pixelProjection.getExtent()),
        zoom: 1.75,
        maxZoom: 3,
        minZoom: 0
    })
});

layerVG.on("change", function(){
    console.log("loaded");
});

I am trying to make the layer event work and I can't seem to make it fire. Even when I try with moveend, nothing seems to be working. I want to have an event fire when the image (layer) is loaded for the first time.

1 Answer 1

3

Currently, OpenLayers 3 doesn't provide a mechanism to know when sources/layers are loaded. This is planned, but not yet implemented.

In the mean time, you can use your own imageLoadFunction. In your case:

 var source = new ol.source.ImageStatic({
   url: '../cartes/img/' + newMapFileName,
   imageSize: [width, height],
   projection: pixelProjection,
   imageExtent: pixelProjection.getExtent(),
   imageLoadFunction: function(image, src) {
     var imageElement = image.getImage();
     imageElement.onload = function() {
       console.log('loaded');
     };
     imageElement.src = src;
   }
  });

I've never used this myself, and I'm hoping it works.

Note that a similar technique can also be used for tile sources. See this post on the OpenLayers 3 mailing list.

6
  • Solution does not seem to work. The 'imageLoadFunction' never seems to fire. Also i could not find anything in the API documentation related to that.
    – Julien
    Jan 12, 2015 at 18:26
  • Uncheck "stable only" to see the option in the documentation.
    – erilem
    Jan 12, 2015 at 18:47
  • Do you use 3.1.1?
    – erilem
    Jan 12, 2015 at 18:48
  • I am using 3.0.0, though that could be changed.
    – Julien
    Jan 12, 2015 at 18:52
  • The imageLoadFunction didn't exist in 3.0.0. Try to use 3.1.1.
    – erilem
    Jan 12, 2015 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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