Update ImageService

js/src/definitions/leaflet-extend.d.ts

@@ -1,3 +1,4 @@
+import { Dict } from '@jupyter-widgets/base';
 import {
   Circle,
   CircleMarker,
@@ -49,7 +50,7 @@ declare module 'leaflet' {
     retain?: boolean | undefined;
   }
 
-  interface MagnifyingGlassOptions extends ControlOptions {
+  interface MagnifyingGlassOptions extends LayerOptions {
     radius: number;
     zoomOffset: number;
     layers: Layer[];
@@ -72,6 +73,37 @@ declare module 'leaflet' {
     options?: Control.MagnifyingGlassOptions
   ): L.MagnifyingGlass;
 
+  interface ImageServiceOptions extends LayerOptions {
+    url: string;
+    f: string;
+    format: string;
+    pixelType: string;
+    noData: number[];
+    noDataInterpretation: string;
+    interpolation: string;
+    compressionQuality: number;
+    bandIds: number[];
+    time: string[];
+    renderingRule: Dict;
+    mosaicRule: Dict;
+    endpoint: string;
+    attribution: string;
+    crs: CRS;
+    interactive: boolean;
+    updateInterval: number;
+  }
+
+  class ImageService extends Layer {
+    constructor(options?: ImageServiceOptions);
+    options: ImageServiceOptions;
+    updateUrl(): void;
+    onAdd(map: Map): this;
+    onRemove(): this;
+    update(): void;
+  }
+
+  function imageService(options?: ImageServiceOptions): L.ImageService;
+
   declare namespace Control {
     interface LegendOptions extends ControlOptions {
       position: ControlPosition;

js/src/layers/ImageService.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-// leaflet-imageservice does not have typescript definitions
+import { ImageService, ImageServiceOptions } from 'leaflet';
 import L from '../leaflet';
 import { getProjection } from '../projections';
 import { LeafletLayerModel, LeafletLayerView } from './Layer';
@@ -34,25 +34,25 @@ export class LeafletImageServiceModel extends LeafletLayerModel {
 }
 
 export class LeafletImageServiceView extends LeafletLayerView {
-  obj: any;
+  obj: ImageService;
 
   create_obj() {
-    //@ts-ignore
-    this.obj = L.imageService({
+    const options = {
+      ...(this.get_options() as ImageServiceOptions),
       url: this.model.get('url'),
-      ...this.get_options(),
       crs: getProjection(this.model.get('crs')),
-    });
+    };
+    this.obj = L.imageService(options);
   }
 
   model_events() {
     super.model_events();
     this.model.on('change:url', () => {
-      this.obj._update();
+      this.obj.update();
     });
     for (let option in this.get_options()) {
       this.model.on('change:' + option, () => {
-        this.obj._update();
+        this.obj.update();
       });
     }
   }

js/src/leaflet-imageservice.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-//@ts-nocheck
+
+import L, { ImageServiceOptions, Map, Point } from 'leaflet';
+
 L.ImageService = L.Layer.extend({
   options: {
     url: '',
@@ -22,7 +24,7 @@ L.ImageService = L.Layer.extend({
     updateInterval: 200,
   },
 
-  initialize: function (options) {
+  initialize: function (options: ImageServiceOptions) {
     L.Util.setOptions(this, options);
   },
 
@@ -38,14 +40,14 @@ L.ImageService = L.Layer.extend({
     return this;
   },
 
-  onAdd: function (map) {
+  onAdd: function (map: Map) {
     this._map = map;
     this.updateUrl();
     if (!this._image) {
       this._initImage();
     }
     this._map.on('moveend', () => {
-      L.Util.throttle(this._update(), this.options.updateInterval, this);
+      L.Util.throttle(this.update(), this.options.updateInterval, this);
     });
     if (this.options.interactive) {
       L.DomUtil.addClass(this._image, 'leaflet-interactive');
@@ -78,7 +80,7 @@ L.ImageService = L.Layer.extend({
     return this;
   },
 
-  setUrl: function (url) {
+  setUrl: function (url: string) {
     // change the URL of the image
     if (this.options.endpoint === 'Esri') {
       this._url = url + '/exportImage' + this._buildParams();
@@ -92,7 +94,7 @@ L.ImageService = L.Layer.extend({
   },
 
   getEvents: function () {
-    var events = {
+    const events = {
       zoom: this._reset,
       viewreset: this._reset,
     };
@@ -104,7 +106,10 @@ L.ImageService = L.Layer.extend({
     return this._bounds;
   },
 
-  toLatLngBounds: function (a, b) {
+  toLatLngBounds: function (
+    a: L.LatLngBounds | L.LatLngExpression,
+    b: L.LatLngExpression
+  ) {
     // convert bounds to LatLngBounds object
     if (a instanceof L.LatLngBounds) {
       return a;
@@ -124,9 +129,9 @@ L.ImageService = L.Layer.extend({
 
   _getBBox: function () {
     // get the bounding box of the current map formatted for exportImage
-    var pixelbounds = this._map.getPixelBounds();
-    var sw = this._map.unproject(pixelbounds.getBottomLeft());
-    var ne = this._map.unproject(pixelbounds.getTopRight());
+    const pixelbounds = this._map.getPixelBounds();
+    const sw = this._map.unproject(pixelbounds.getBottomLeft());
+    const ne = this._map.unproject(pixelbounds.getTopRight());
     return [
       this._map.options.crs.project(ne).x,
       this._map.options.crs.project(ne).y,
@@ -145,27 +150,27 @@ L.ImageService = L.Layer.extend({
 
   _getSize: function () {
     // get the size of the current map
-    var size = this._map.getSize();
+    const size = this._map.getSize();
     return [size.x, size.y];
   },
 
   _getEPSG: function () {
     // get the EPSG code (numeric) of the current map
-    var epsg = this.options.crs.code;
-    var spatial_reference = parseInt(epsg.split(':')[1], 10);
+    const epsg = this.options.crs.code;
+    const spatial_reference = parseInt(epsg.split(':')[1], 10);
     return spatial_reference;
   },
 
   _getTime: function () {
     // get start and end times and convert to seconds since epoch
-    var st = new Date(this.options.time[0]).getTime().valueOf();
-    var et = new Date(this.options.time[1]).getTime().valueOf();
-    return [st, et];
+    const startTime = new Date(this.options.time[0]).getTime().valueOf();
+    const endTime = new Date(this.options.time[1]).getTime().valueOf();
+    return [startTime, endTime];
   },
 
   _buildParams: function () {
     // parameters for image server query
-    var params = {
+    const params: Record<string, any> = {
       bbox: this._getBBox().join(','),
       size: this._getSize().join(','),
       bboxSR: this._getEPSG(),
@@ -210,8 +215,8 @@ L.ImageService = L.Layer.extend({
   },
 
   _initImage: function () {
-    var wasElementSupplied = this._url.tagName === 'IMG';
-    var img = (this._image = L.DomUtil.create('img'));
+    const wasElementSupplied = this._url.tagName === 'IMG';
+    const img = (this._image = L.DomUtil.create('img'));
     L.DomUtil.addClass(img, 'leaflet-image-layer');
     img.onselectstart = L.Util.falseFn;
     img.onmousemove = L.Util.falseFn;
@@ -224,23 +229,27 @@ L.ImageService = L.Layer.extend({
   },
 
   _reset: function () {
-    var img = this._image;
-    var size = this._getSize();
+    const img = this._image;
+    const size = this._getSize();
     img.style.width = size[0] + 'px';
     img.style.height = size[1] + 'px';
     if (this._getEPSG() === 3857) {
-      var bounds = new L.Bounds(
+      const bounds = new L.Bounds(
         this._map.latLngToLayerPoint(this._bounds.getNorthWest()),
         this._map.latLngToLayerPoint(this._bounds.getSouthEast())
       );
-      L.DomUtil.setPosition(img, bounds.min);
+      L.DomUtil.setPosition(img, bounds.min ?? new Point(0, 0));
     } else {
-      var pixelorigin = this._topLeft.subtract(this._map.getPixelOrigin());
+      const pixelorigin = this._topLeft.subtract(this._map.getPixelOrigin());
       L.DomUtil.setPosition(img, pixelorigin);
     }
   },
 
-  _update: function () {
+  // update: function () {
+  //   this.update();
+  // },
+
+  update: function () {
     if (!this._map) {
       return;
     }