Tuesday, September 22, 2015

Openlayers 3 - load start / load end events on layers

With the latest versions of OL3 we have the ability to listen for the 'loadstart' and 'loadend' events on layers exist on our map. In openlayers 2 that was quite clear.

With the latest versions of  openlayers 3, things start to be a bit more clear, though not as clear as it used to be on OL2.

So for TILE (ol.layer.Tile) layers our code snip should look like:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
//declare the layer
var osmLayer =  new ol.layer.Tile({
      source: new ol.source.OSM()
    });
//asign the listeners on the source of tile layer
osmLayer.getSource().on('tileloadstart', function(event) {
//replace with your custom action
document.getElementById('tilesloaderindicatorimg').src = 'css/images/tree_loading.gif';
     });

osmLayer.getSource().on('tileloadend', function(event) {
//replace with your custom action
document.getElementById('tilesloaderindicatorimg').src = 'css/images/ok.png';
     });
osmLayer.getSource().on('tileloaderror', function(event) {
//replace with your custom action        
document.getElementById('tilesloaderindicatorimg').src = 'css/images/no.png';
     });

For WMS layers the approach is a bit different:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//declare the layer
var wmsLayer =   new ol.layer.Image({
    source: new ol.source.ImageWMS({
      attributions: [new ol.Attribution({
        html: '© ' +
            '<a href="http://www.geo.admin.ch/internet/geoportal/' +
            'en/home.html">' +
            'National parks / geo.admin.ch</a>'
      })],
      crossOrigin: 'anonymous',
      params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
      serverType: 'mapserver',
      url: 'http://wms.geo.admin.ch/'
    })
  });

//and now asign the listeners on the source of it
 var lyrSource = wmsLayer.getSource();
      lyrSource.on('imageloadstart', function(event) {
      console.log('imageloadstart event',event);
      //replace with your custom action
      var elemId = event.target.params_.ELEMENTID;
      document.getElementById(elemId).src = 'css/images/tree_loading.gif'; 
      });

      lyrSource.on('imageloadend', function(event) {
       console.log('imageloadend event',event);
      //replace with your custom action
      var elemId = event.target.params_.ELEMENTID;
      document.getElementById(elemId).src = 'css/images/ok.png'; 
      });

      lyrSource.on('imageloaderror', function(event) {
       console.log('imageloaderror event',event);
      //replace with your custom action
      var elemId = event.target.params_.ELEMENTID;
      document.getElementById(elemId).src = 'css/images/no.png'; 
      });  

For WFS Vecotr layers things are even more complicated:

so I made a fiddle you may see here -->fiddle

fiddle preview -->

1 comment:

  1. can i pass external wms url from a form? then i want to render wms overlay on the basemap

    ReplyDelete

Convert Oracle ResultSet to GeoJson file.

This  is  a java approach to convert an oracle java resultset to a single GeoJson file. Before we go through the code example. Lets see th...