Implement Controls + Make BaseOverlayView abstract

ipyopenlayers/_frontend.py

@@ -10,3 +10,4 @@
 
 module_name = "ipyopenlayers"
 module_version = "^0.1.0"
+

ipyopenlayers/example.py

@@ -24,28 +24,60 @@ class TileLayer(Widget):
     _view_module_version = Unicode(module_version).tag(sync=True)
     url = Unicode('https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png').tag(sync=True)
 
-class BaseOverlay(DOMWidget):
-   _model_name = Unicode('BaseOverlayModel').tag(sync=True)
+class BaseOverlay(DOMWidget): 
+
    _model_module = Unicode(module_name).tag(sync=True)
    _model_module_version = Unicode(module_version).tag(sync=True)
-   _view_name = Unicode('BaseOverlayView').tag(sync=True)
    _view_module = Unicode(module_name).tag(sync=True)
    _view_module_version = Unicode(module_version).tag(sync=True)
-   overlay_type = Unicode().tag(sync=True)
    position = List([0, 0]).tag(sync=True)
 
 class ImageOverlay (BaseOverlay):
-   overlay_type = Unicode('image').tag(sync=True)
+   _view_name = Unicode('ImageOverlayView').tag(sync=True)
+   _model_name = Unicode('ImageOverlayModel').tag(sync=True)
+
    image_url = Unicode('').tag(sync=True)
 
 class VideoOverlay (BaseOverlay):
-   overlay_type = Unicode('video').tag(sync=True)
+   _view_name = Unicode('VideoOverlayView').tag(sync=True)
+   _model_name = Unicode('VideoOverlayModel').tag(sync=True)
+
    video_url = Unicode('').tag(sync=True)
 
 class PopupOverlay (BaseOverlay):
-   overlay_type = Unicode('popup').tag(sync=True)
+   _view_name = Unicode('PopupOverlayView').tag(sync=True)
+   _model_name = Unicode('PopupOverlayModel').tag(sync=True)
+
    popup_content = Unicode('').tag(sync=True)
 
+class BaseControl(DOMWidget):
+   _model_module = Unicode(module_name).tag(sync=True)
+   _model_module_version = Unicode(module_version).tag(sync=True)
+   _view_module = Unicode(module_name).tag(sync=True)
+   _view_module_version = Unicode(module_version).tag(sync=True)
+
+   control_name = Unicode().tag(sync=True)
+
+class ZoomSlider(BaseControl):
+   _view_name = Unicode('ZoomSliderView').tag(sync=True)
+   _model_name = Unicode('ZoomSliderModel').tag(sync=True)
+
+class FullScreen(BaseControl):
+    _view_name = Unicode('FullScreenView').tag(sync=True)
+    _model_name = Unicode('FullScreenModel').tag(sync=True)
+
+
+class ScaleLine(BaseControl):
+    _view_name = Unicode('ScaleLineView').tag(sync=True)
+    _model_name = Unicode('ScaleLineModel').tag(sync=True)
+
+
+
+class MousePosition(BaseControl):
+    _view_name = Unicode('MousePositionView').tag(sync=True)
+    _model_name = Unicode('MousePositionModel').tag(sync=True)
+
+
 class Map(DOMWidget):
     _model_name = Unicode('MapModel').tag(sync=True)
     _model_module = Unicode(module_name).tag(sync=True)
@@ -59,6 +91,8 @@ class Map(DOMWidget):
     zoom = CFloat(2).tag(sync=True, o=True)
     layers = List(Instance(TileLayer)).tag(sync=True, **widget_serialization)
     overlays=List(Instance(BaseOverlay)).tag(sync=True, **widget_serialization)
+    controls=List(Instance(BaseControl)).tag(sync=True, **widget_serialization)
+
 
 
     def __init__(self, center=None, zoom=None, **kwargs):
@@ -81,5 +115,12 @@ def remove_layer(self, layer):
     def remove_overlay(self, overlay):
         self.overlays = [x for x in self.overlays if x != overlay]
 
+    def add_control(self, control):
+        self.controls = self.controls + [control]
+
+    def remove_control(self, control):
+        self.controls = [x for x in self.controls if x != control]
+
+
     def clear_layers(self):
         self.layers = []

src/basecontrol.ts

@@ -0,0 +1,52 @@
+// Copyright (c) QuantStack
+// Distributed under the terms of the Modified BSD License.
+import Control from 'ol/control/Control.js';
+import 'ol/ol.css';
+import '../css/widget.css';
+import {
+  DOMWidgetModel,
+  DOMWidgetView,
+  ISerializers,
+} from '@jupyter-widgets/base';
+
+import 'ol/ol.css';
+import { MODULE_NAME, MODULE_VERSION } from './version';
+import '../css/widget.css';
+
+export class BaseControlModel extends DOMWidgetModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_name: BaseControlModel.model_name,
+      _model_module: BaseControlModel.model_module,
+      _model_module_version: BaseControlModel.model_module_version,
+      _view_name: BaseControlModel.view_name,
+      _view_module: BaseControlModel.view_module,
+      _view_module_version: BaseControlModel.view_module_version,
+    };
+  }
+
+  static serializers: ISerializers = {
+    ...DOMWidgetModel.serializers,
+  };
+
+  static model_name = 'BaseControlModel';
+  static model_module = MODULE_NAME;
+  static model_module_version = MODULE_VERSION;
+  static view_name = 'BaseControlView';
+  static view_module = MODULE_NAME;
+  static view_module_version = MODULE_VERSION;
+}
+
+export abstract class BaseControlView extends DOMWidgetView {
+  map_view: any;
+  element: HTMLElement;
+  obj: Control;
+
+  render() {
+    super.render();
+    this.createObj();
+  }
+
+  abstract createObj(): void;
+}

src/baseoverlay.ts

@@ -0,0 +1,65 @@
+// Copyright (c) QuantStack
+// Distributed under the terms of the Modified BSD License.
+import {
+  DOMWidgetModel,
+  DOMWidgetView,
+  ISerializers,
+} from '@jupyter-widgets/base';
+
+import 'ol/ol.css';
+import { MODULE_NAME, MODULE_VERSION } from './version';
+import '../css/widget.css';
+import Overlay from 'ol/Overlay';
+
+export class BaseOverlayModel extends DOMWidgetModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_module: BaseOverlayModel.model_module,
+      _model_module_version: BaseOverlayModel.model_module_version,
+      _view_module: BaseOverlayModel.view_module,
+      _view_module_version: BaseOverlayModel.view_module_version,
+      position: [0, 0],
+    };
+  }
+
+  static serializers: ISerializers = {
+    ...DOMWidgetModel.serializers,
+  };
+
+  static model_module = MODULE_NAME;
+  static model_module_version = MODULE_VERSION;
+  static view_module = MODULE_NAME;
+  static view_module_version = MODULE_VERSION;
+}
+
+export abstract class BaseOverlayView extends DOMWidgetView {
+  overlay: Overlay;
+  element: HTMLElement;
+
+  render() {
+    super.render();
+    this.createElement();
+    this.createOverlay();
+    this.model_events();
+  }
+  abstract createElement(): void;
+
+  createOverlay() {
+    const position = this.model.get('position');
+    this.overlay = new Overlay({
+      position: position,
+      element: this.element,
+    });
+    return this.overlay;
+  }
+
+  model_events() {
+    this.listenTo(this.model, 'change:position', this.updatePosition);
+  }
+
+  updatePosition() {
+    const position = this.model.get('position');
+    this.overlay.setPosition(position);
+  }
+}

src/fullscreen.ts

@@ -0,0 +1,42 @@
+// Copyright (c) QuantStack
+// Distributed under the terms of the Modified BSD License.
+import { DOMWidgetModel, ISerializers } from '@jupyter-widgets/base';
+import { BaseControlModel, BaseControlView } from './basecontrol';
+import FullScreen from 'ol/control/FullScreen.js';
+
+import 'ol/ol.css';
+import { MODULE_NAME, MODULE_VERSION } from './version';
+import '../css/widget.css';
+
+export class FullScreenModel extends BaseControlModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_name: FullScreenModel.model_name,
+      _model_module: FullScreenModel.model_module,
+      _model_module_version: FullScreenModel.model_module_version,
+      _view_name: FullScreenModel.view_name,
+      _view_module: FullScreenModel.view_module,
+      _view_module_version: FullScreenModel.view_module_version,
+    };
+  }
+
+  static serializers: ISerializers = {
+    ...DOMWidgetModel.serializers,
+    // Ajoutez ici tous les sérialiseurs supplémentaires
+  };
+
+  static model_name = 'FullScreenModel';
+  static model_module = MODULE_NAME;
+  static model_module_version = MODULE_VERSION;
+  static view_name = 'FullScreenView';
+  static view_module = MODULE_NAME;
+  static view_module_version = MODULE_VERSION;
+}
+export class FullScreenView extends BaseControlView {
+  createObj() {
+    this.obj = new FullScreen({
+      className: 'ol-full-screen',
+    });
+  }
+}

src/imageoverlay.ts

@@ -0,0 +1,56 @@
+// Copyright (c) QuantStack
+// Distributed under the terms of the Modified BSD License.
+import { DOMWidgetModel, ISerializers } from '@jupyter-widgets/base';
+import { BaseOverlayModel, BaseOverlayView } from './baseoverlay';
+
+import 'ol/ol.css';
+import { MODULE_NAME, MODULE_VERSION } from './version';
+import '../css/widget.css';
+
+export class ImageOverlayModel extends BaseOverlayModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_name: ImageOverlayModel.model_name,
+      _model_module: ImageOverlayModel.model_module,
+      _model_module_version: ImageOverlayModel.model_module_version,
+      _view_name: ImageOverlayModel.view_name,
+      _view_module: ImageOverlayModel.view_module,
+      _view_module_version: ImageOverlayModel.view_module_version,
+      image_url: '',
+    };
+  }
+
+  static serializers: ISerializers = {
+    ...DOMWidgetModel.serializers,
+    // Ajoutez ici tous les sérialiseurs supplémentaires
+  };
+
+  static model_name = 'ImageOverlayModel';
+  static model_module = MODULE_NAME;
+  static model_module_version = MODULE_VERSION;
+  static view_name = 'ImageOverlayView';
+  static view_module = MODULE_NAME;
+  static view_module_version = MODULE_VERSION;
+}
+
+export class ImageOverlayView extends BaseOverlayView {
+  render() {
+    super.render();
+    this.updateImageElement();
+  }
+  createElement() {
+    this.element = document.createElement('img');
+  }
+  model_events() {
+    super.model_events();
+    this.listenTo(this.model, 'change:image_url', this.updateImageElement);
+  }
+
+  updateImageElement() {
+    const imageUrl = this.model.get('image_url');
+    if (imageUrl) {
+      (this.element as HTMLImageElement).src = imageUrl;
+    }
+  }
+}

src/index.ts

@@ -3,3 +3,4 @@
 export * from './version';
 export * from './widget';
 export * from './tilelayer';
+export * from './basecontrol';

src/mouseposition.ts

@@ -0,0 +1,42 @@
+// Copyright (c) QuantStack
+// Distributed under the terms of the Modified BSD License.
+import { DOMWidgetModel, ISerializers } from '@jupyter-widgets/base';
+import { BaseControlModel, BaseControlView } from './basecontrol';
+import MousePosition from 'ol/control/MousePosition.js';
+
+import 'ol/ol.css';
+import { MODULE_NAME, MODULE_VERSION } from './version';
+import '../css/widget.css';
+
+export class MousePositionModel extends BaseControlModel {
+  defaults() {
+    return {
+      ...super.defaults(),
+      _model_name: MousePositionModel.model_name,
+      _model_module: MousePositionModel.model_module,
+      _model_module_version: MousePositionModel.model_module_version,
+      _view_name: MousePositionModel.view_name,
+      _view_module: MousePositionModel.view_module,
+      _view_module_version: MousePositionModel.view_module_version,
+    };
+  }
+
+  static serializers: ISerializers = {
+    ...DOMWidgetModel.serializers,
+    // Ajoutez ici tous les sérialiseurs supplémentaires
+  };
+
+  static model_name = 'MousePositionModel';
+  static model_module = MODULE_NAME;
+  static model_module_version = MODULE_VERSION;
+  static view_name = 'MousePositionView';
+  static view_module = MODULE_NAME;
+  static view_module_version = MODULE_VERSION;
+}
+export class MousePositionView extends BaseControlView {
+  createObj() {
+    this.obj = new MousePosition({
+      className: 'ol-mouse-position',
+    });
+  }
+}