convert bounds and size to lists

start working on imageservicelayer function

Author: tsutterley

ipyleaflet/leaflet.py

@@ -760,7 +760,7 @@ class VideoOverlay(RasterLayer):
     attribution = Unicode().tag(sync=True, o=True)
 
 
-class ImageServiceLayer(ImageOverlay):
+class ImageServiceLayer(RasterLayer):
     """ImageServiceLayer class
 
     Image Service layer for raster data served through a web service

js/src/jupyter-leaflet.js

@@ -12,10 +12,10 @@ export * from './layers/TileLayer.js';
 export * from './layers/VectorTileLayer.js';
 export * from './layers/LocalTileLayer.js';
 export * from './layers/WMSLayer.js';
-export * from './layers/ImageServiceLayer.js';
 export * from './layers/MagnifyingGlass.js';
 export * from './layers/ImageOverlay.js';
 export * from './layers/VideoOverlay.js';
+export * from './layers/ImageServiceLayer.js';
 export * from './layers/Velocity.js';
 export * from './layers/Heatmap.js';
 export * from './layers/VectorLayer.js';

js/src/layers/ImageServiceLayer.js

@@ -2,10 +2,10 @@
 // Distributed under the terms of the Modified BSD License.
 
 const L = require('../leaflet.js');
-const imageoverlay = require('./ImageOverlay.js');
+const rasterlayer = require('./RasterLayer.js');
 const proj = require('../projections.js');
 
-export class LeafletImageServiceLayerModel extends imageoverlay.LeafletImageOverlayModel {
+export class LeafletImageServiceLayerModel extends rasterlayer.LeafletRasterLayerModel {
   defaults() {
     return {
       ...super.defaults(),
@@ -19,21 +19,21 @@ export class LeafletImageServiceLayerModel extends imageoverlay.LeafletImageOver
       // data type of the raster image
       pixel_type: 'F32',
       // pixel value or list of pixel values representing no data
-      no_data: null,
+      no_data: [],
       // how to interpret no data values
       no_data_interpretation: '',
       // resampling process for interpolating the pixel values
       interpolation: '',
       // lossy quality for image compression
       compression_quality: '',
       // order of bands to export for multiple band images
-      band_ids: null,
+      band_ids: [],
       // time instance or extent for image
-      time: null,
+      time: [],
       // rules for rendering
-      rendering_rule: null,
+      rendering_rule: {},
       // rules for mosaicking
-      mosaic_rule: null,
+      mosaic_rule: {},
       // image transparency
       transparent: false,
       // coordinate reference system
@@ -44,10 +44,10 @@ export class LeafletImageServiceLayerModel extends imageoverlay.LeafletImageOver
   }
 }
 
-export class LeafletImageServiceLayerView extends imageoverlay.LeafletImageOverlayView {
+export class LeafletImageServiceLayerView extends rasterlayer.LeafletRasterLayerView {
   create_obj() {
     this.model._url = this.model.get('url') + '/exportImage' + this.buildParams()
-    this.model._bounds = this._map.getBounds()
+    this.model._bounds = this.get_bounds()
     this.obj = L.ImageOverlay(this.model._url, this.model._bounds)
   }
 
@@ -56,13 +56,38 @@ export class LeafletImageServiceLayerView extends imageoverlay.LeafletImageOverl
     for (var option in this.get_options()) {
       this._map.on('change:' + option, () => {
         this.model._url = this.model.get('url') + '/exportImage' + this.buildParams()
-        this.model._bounds = this._map.getBounds()
+        this.model._bounds = this.get_bounds()
+        this.obj.setUrl(this.model._url);
+        this.obj.setBounds(this.model._bounds);
         this.refresh();
       });
-    }
+    };
+    this._map.on('moveend', () => {
+      this.model._url = this.model.get('url') + '/exportImage' + this.buildParams()
+      this.model._bounds = this.get_bounds()
+      this.obj.setUrl(this.model._url);
+      this.obj.setBounds(this.model._bounds);
+      this.refresh();
+    })
+  }
+
+  get_bbox () {
+    return [this._map.getBounds().getWest(),
+        this._map.getBounds().getSouth(),
+        this._map.getBounds().getEast(),
+        this._map.getBounds().getNorth()]
+  }
+
+  get_bounds () {
+    return [[map.getBounds().getSouth(),map.getBounds().getWest()],
+        [map.getBounds().getNorth(),map.getBounds().getEast()]]
+  }
+
+  get_size () {
+    return [this._map.getSize().x, this._map.getSize().y]
   }
 
-  model_epsg() {
+  get_epsg() {
     // get the EPSG code of the current map
     var crs = proj.getProjection(this.model.get('crs'))
     var spatial_reference = parseInt(crs.code.split(':')[1], 10);
@@ -72,10 +97,10 @@ export class LeafletImageServiceLayerView extends imageoverlay.LeafletImageOverl
   buildParams () {
     // parameters for image server query
     var params = {
-      bbox: this._map.getBounds(),
-      size: this._map.getSize(),
+      bbox: this.get_bbox(),
+      size: this.get_size(),
       bboxSR: 4326,
-      imageSR: this.model_epsg(),
+      imageSR: this.get_epsg(),
       ...this.get_options()
     };
     // merge list parameters

js/src/leaflet-imageservice.js

@@ -0,0 +1,31 @@
+
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+L.ImageServiceLayer = L.RasterLayer.extend({
+  options: {
+    url: '',
+    f: 'image',
+    format: 'png',
+    pixel_type: 'F32',
+    no_data: [],
+    no_data_interpretation: '',
+    interpolation: '',
+    compression_quality: '',
+    band_ids: [],
+    time: [],
+    rendering_rule: {},
+    mosaic_rule: {},
+    transparent: false,
+    crs: null
+  },
+
+  initialize: function(options) {
+    L.Util.setOptions(this, options);
+  },
+
+})
+
+L.imageServiceLayer = function (options) {
+    return new L.ImageServiceLayer(options);
+};

js/src/leaflet.js

@@ -9,6 +9,7 @@ require('leaflet.markercluster');
 require('leaflet-velocity');
 require('leaflet-measure');
 require('./leaflet-heat.js');
+require('./leaflet-imageservice.js');
 require('./leaflet-magnifyingglass.js');
 require('leaflet-rotatedmarker');
 require('leaflet-fullscreen');