added split map

Author: Nour-Cheour10

examples/RasterLayer.ipynb

@@ -4,7 +4,7 @@
 # Copyright (c) QuantStack.
 # Distributed under the terms of the Modified BSD License.
 
-from .Map import *
+from .openlayers import *
 from ._version import __version__, version_info
 
 def _jupyter_labextension_paths():

ipyopenlayers/__init__.py

@@ -84,7 +84,6 @@ class ImageOverlay (BaseOverlay):
 class VideoOverlay (BaseOverlay):
    _view_name = Unicode('VideoOverlayView').tag(sync=True)
    _model_name = Unicode('VideoOverlayModel').tag(sync=True)
-   
    video_url = Unicode('').tag(sync=True)
 
 class PopupOverlay (BaseOverlay):
@@ -122,7 +121,7 @@ class SplitMapControl(BaseControl):
     _model_name = Unicode('SplitMapControlModel').tag(sync=True)
     _view_name = Unicode('SplitMapControlView').tag(sync=True)
     left_layer = Instance(Layer).tag(sync=True, **widget_serialization)
-    right_layer = Instance(Layer).tag(sync=True, **widget_serialization)
+    #right_layer = Instance(Layer).tag(sync=True, **widget_serialization)
     swipe_position = Int(50).tag(sync=True)
 
 

ipyopenlayers/Map.py ipyopenlayers/openlayers.py

@@ -1,5 +1,3 @@
-// Copyright (c) QuantStack
-// Distributed under the terms of the Modified BSD License.
 import Control from 'ol/control/Control';
 import { getRenderPixel } from 'ol/render';
 import 'ol/ol.css';
@@ -10,19 +8,16 @@ import { MapView } from './widget';
 interface SplitMapControlOptions {
   target?: string;
   map_view?: MapView;
-  swipe_position?: number; // Ajoutez swipe_position en tant que nombre
+  swipe_position?: number;
 }
+
 export default class SplitMapControl extends Control {
   swipe: HTMLInputElement;
   leftLayer: any;
-  rightLayer: any;
   map_view: MapView;
-  swipe_position: any;
-  constructor(
-    leftLayer: any,
-    rightLayer: any,
-    options: SplitMapControlOptions = {},
-  ) {
+  private _swipe_position: number;
+
+  constructor(leftLayer: any, options: SplitMapControlOptions = {}) {
     const element = document.createElement('div');
     element.className = 'ol-unselectable ol-control split-map-control';
 
@@ -32,98 +27,63 @@ export default class SplitMapControl extends Control {
     });
 
     this.leftLayer = leftLayer;
-    this.rightLayer = rightLayer;
 
-    console.log('Initializing SplitMapControl...');
-    console.log(options);
     if (options.map_view) {
       this.map_view = options.map_view;
-      console.log('MapView initialized:', this.map_view);
     } else {
       throw new Error('MapView is required for SplitMapControl.');
     }
-    if (options.swipe_position) {
-      this.swipe_position = options.swipe_position;
-      console.log('swipe_position initialized:', this.swipe_position);
-    } else {
-      throw new Error('swipe_position is required for SplitMapControl.');
-    }
+
+    this._swipe_position = options.swipe_position ?? 0;
 
     const swiperContainer = document.createElement('div');
     swiperContainer.className = 'swiper-container';
+    swiperContainer.style.width = '100%';
 
     this.swipe = document.createElement('input');
     this.swipe.type = 'range';
     this.swipe.className = 'swipe';
-    (this.swipe.value = this.swipe_position),
-      swiperContainer.appendChild(this.swipe);
-    console.log('this.map_view.map_container', this.map_view.map_container);
-    this.map_view.map_container.appendChild(swiperContainer);
-    this.handleSwipe();
-  }
-
-  handleSwipe(event?: Event) {
-    console.log('Handling swipe event...');
-    console.log(this.swipe.value);
-    if (!this.leftLayer.hasListener('prerender')) {
-      console.log('1');
-      this.leftLayer.on('prerender', this.prerender.bind(this));
-    }
-
-    if (!this.leftLayer.hasListener('postrender')) {
-      console.log('2');
-      //this.leftLayer.on('postrender', this.postrender.bind(this));
-    }
-
-    if (!this.rightLayer.hasListener('prerender')) {
-      console.log('3');
+    this.swipe.style.width = '100%';
+    this.updateSwipeValue();
+    swiperContainer.appendChild(this.swipe);
 
-      //this.rightLayer.on('prerender', this.prerender.bind(this));
-    }
-
-    if (!this.rightLayer.hasListener('postrender')) {
-      console.log('4');
-
-      this.rightLayer.on('postrender', this.postrender.bind(this));
-    }
+    this.map_view.map_container.style.position = 'relative';
+    this.map_view.map_container.appendChild(swiperContainer);
 
-    console.log('ok');
-  }
+    const map_view = this.map_view;
 
-  prerender(event: any) {
-    console.log('Prerender event triggered.');
+    this.leftLayer.on('prerender', (event: any) => {
+      const gl = event.context;
+      gl.enable(gl.SCISSOR_TEST);
 
-    const gl = event.context; // Get WebGL context
-    gl.enable(gl.SCISSOR_TEST); // Enable scissor test
+      const mapSize = map_view.getSize();
 
-    const mapSize = this.map_view.getSize(); // Get the size of the map
-    if (!mapSize) {
-      console.warn('Map size is undefined.');
-      return;
-    }
+      if (mapSize) {
+        const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
+        const topRight = getRenderPixel(event, [mapSize[0], 0]);
 
-    // Get render pixels for the bottom left and top right corners
-    const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
-    const topRight = getRenderPixel(event, [mapSize[0], 0]);
+        const width = Math.round((topRight[0] - bottomLeft[0]) * (this._swipe_position / 100));
+        const height = topRight[1] - bottomLeft[1];
 
-    // Get the swipe value from the input element
-    const swipeValue = this.swipe.value;
-    console.log('swipeValue', swipeValue);
+        gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
+      }
+    });
 
-    // Calculate the width and height for the scissor test
-    const width = Math.round(
-      (topRight[0] - bottomLeft[0]) * (Number(swipeValue) / 100),
-    );
-    const height = topRight[1] - bottomLeft[1];
+    this.leftLayer.on('postrender', (event: any) => {
+      const gl = event.context;
+      gl.disable(gl.SCISSOR_TEST);
+    });
 
-    // Define the scissor box
-    gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
+    this.swipe.addEventListener('input', () => {
+      this._swipe_position = parseInt(this.swipe.value, 10);
+      this.updateSwipeValue();
+      map_view.map.render();
+    });
   }
 
-  postrender(event: any) {
-    console.log('Postrender event triggered.');
-
-    const gl = event.context; // Get WebGL context
-    gl.disable(gl.SCISSOR_TEST); // Disable scissor test
+  private updateSwipeValue() {
+    if (this.swipe) {
+      this.swipe.value = this._swipe_position.toString();
+    }
   }
 }

src/splitcontrol.ts

@@ -1,84 +1,77 @@
 // Copyright (c) QuantStack
 // Distributed under the terms of the Modified BSD License.
-import { unpack_models } from '@jupyter-widgets/base';
+import { unpack_models, ISerializers } from '@jupyter-widgets/base';
 import { BaseControlModel, BaseControlView } from './basecontrol';
 import 'ol/ol.css';
 import '../css/widget.css';
 import SplitMapControl from './splitcontrol';
+import { MODULE_NAME, MODULE_VERSION } from './version';
 
-// Modèle pour le contrôle de carte divisée
 export class SplitMapControlModel extends BaseControlModel {
   defaults() {
     return {
       ...super.defaults(),
-      _view_name: 'SplitMapControlView',
-      _model_name: 'SplitMapControlModel',
+      _model_name: SplitMapControlModel.model_name,
+      _model_module: SplitMapControlModel.model_module,
+      _model_module_version: SplitMapControlModel.model_module_version,
+      _view_name: SplitMapControlModel.view_name,
+      _view_module: SplitMapControlModel.view_module,
+      _view_module_version: SplitMapControlModel.view_module_version,
       left_layer: undefined,
       right_layer: undefined,
       swipe_position: 50,
     };
   }
-}
 
-SplitMapControlModel.serializers = {
-  ...BaseControlModel.serializers,
-  left_layer: { deserialize: unpack_models },
-  right_layer: { deserialize: unpack_models },
-};
+  static serializers: ISerializers = {
+    ...BaseControlModel.serializers,
+    left_layer: { deserialize: unpack_models },
+    right_layer: { deserialize: unpack_models },
+  };
+
+  static model_name = 'SplitMapControlModel';
+  static model_module = MODULE_NAME;
+  static model_module_version = MODULE_VERSION;
+  static view_name = 'SplitMapControlView';
+  static view_module = MODULE_NAME;
+  static view_module_version = MODULE_VERSION;
+}
 
 function asArray(arg: any) {
   return Array.isArray(arg) ? arg : [arg];
 }
 
 export class SplitMapControlView extends BaseControlView {
   swipe_position: number;
+
   initialize(parameters: any) {
     super.initialize(parameters);
     this.map_view = this.options.map_view;
     this.map_view.layer_views = this.options.map_view.layerViews;
-    console.log('hello');
     if (this.map_view && !this.map_view.layerViews) {
-      console.warn(
-        'Layer views is not initialized. Ensure it is properly set.',
-      );
+      console.warn('Layer views is not initialized. Ensure it is properly set.');
     }
   }
 
   createObj() {
-    console.log('Creating SplitMapControl object...');
     const left_models = asArray(this.model.get('left_layer'));
-
-    const right_models = asArray(this.model.get('right_layer'));
-
     let layersModel = this.map_view.model.get('layers');
-
-    layersModel = layersModel.concat(left_models, right_models);
+    layersModel = layersModel.concat(left_models);
 
     return this.map_view.layer_views.update(layersModel).then((views: any) => {
       const left_views: any[] = [];
-      console.log(left_views);
-      const right_views: any[] = [];
-      console.log(right_views);
-
       views.forEach((view: any) => {
         if (left_models.indexOf(view.model) !== -1) {
           left_views.push(view.obj);
         }
-        if (right_models.indexOf(view.model) !== -1) {
-          right_views.push(view.obj);
-        }
       });
 
-      console.log('Left views:', left_views);
-      console.log('Right views:', right_views);
       this.swipe_position = this.model.get('swipe_position');
-      console.log('swipe_position:', this.swipe_position);
 
-      this.obj = new SplitMapControl(left_views[0], right_views[0], {
+      this.obj = new SplitMapControl(left_views[0], {
         map_view: this.map_view,
         swipe_position: this.swipe_position,
       });
-      console.log('SplitMapControl created:', this.obj);
     });
   }
 }

src/splitmapcontrol.ts

@@ -11,10 +11,8 @@ import { LayerModel, LayerView } from './layer';
 import { BaseOverlayModel, BaseOverlayView } from './baseoverlay';
 import { BaseControlModel, BaseControlView } from './basecontrol';
 import { ViewObjectEventTypes } from 'ol/View';
-// widget.ts
 import { SplitMapControlModel, SplitMapControlView } from './splitmapcontrol';
 export { SplitMapControlModel, SplitMapControlView };
-
 import { Map } from 'ol';
 import View from 'ol/View';
 import 'ol/ol.css';
@@ -35,10 +33,9 @@ export * from './rastertilelayer';
 export * from './geotifflayer';
 export * from './vectortilelayer';
 export * from './splitmapcontrol';
+export * from './splitcontrol';
+
 
-/*type WebGLEvent = {
-  context: WebGLRenderingContext;
-};*/
 const DEFAULT_LOCATION = [0.0, 0.0];
 
 export class MapModel extends DOMWidgetModel {
@@ -135,10 +132,11 @@ export class MapView extends DOMWidgetView {
         this.model.set('zoom', this.map.getView().getZoom());
         this.model.save_changes();
       });
-
     this.layersChanged();
-    this.overlayChanged();
     this.controlChanged();
+    this.overlayChanged();
+    this.zoomChanged();
+    this.centerChanged();
     this.model.on('change:layers', this.layersChanged, this);
     this.model.on('change:overlays', this.overlayChanged, this);
     this.model.on('change:controls', this.controlChanged, this);
@@ -194,17 +192,15 @@ export class MapView extends DOMWidgetView {
     this.map.removeControl(child_view.obj);
     child_view.remove();
   }
-
+  
   async addLayerModel(child_model: LayerModel) {
     const view = await this.create_child_view<LayerView>(child_model, {
       map_view: this,
     });
     this.map.addLayer(view.obj);
-    console.log(this.map);
     this.displayed.then(() => {
       view.trigger('displayed', this);
     });
-    console.log(view);
 
     return view;
   }