Skip to content

Commit bb8679e

Browse files
Nour-Cheour10Nour-Cheour10
committed
added split map
1 parent 3396c15 commit bb8679e

File tree

6 files changed

+127
-267
lines changed

6 files changed

+127
-267
lines changed

‎examples/RasterLayer.ipynb‎

Lines changed: 55 additions & 143 deletions
Large diffs are not rendered by default.

‎ipyopenlayers/__init__.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
# Copyright (c) QuantStack.
55
# Distributed under the terms of the Modified BSD License.
66

7-
from .Map import *
7+
from .openlayers import *
88
from ._version import __version__, version_info
99

1010
def _jupyter_labextension_paths():

ipyopenlayers/Map.py renamed to ipyopenlayers/openlayers.py

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ class ImageOverlay (BaseOverlay):
8484
class VideoOverlay (BaseOverlay):
8585
_view_name = Unicode('VideoOverlayView').tag(sync=True)
8686
_model_name = Unicode('VideoOverlayModel').tag(sync=True)
87-
8887
video_url = Unicode('').tag(sync=True)
8988

9089
class PopupOverlay (BaseOverlay):
@@ -122,7 +121,7 @@ class SplitMapControl(BaseControl):
122121
_model_name = Unicode('SplitMapControlModel').tag(sync=True)
123122
_view_name = Unicode('SplitMapControlView').tag(sync=True)
124123
left_layer = Instance(Layer).tag(sync=True, **widget_serialization)
125-
right_layer = Instance(Layer).tag(sync=True, **widget_serialization)
124+
#right_layer = Instance(Layer).tag(sync=True, **widget_serialization)
126125
swipe_position = Int(50).tag(sync=True)
127126

128127

‎src/splitcontrol.ts‎

Lines changed: 39 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// Copyright (c) QuantStack
2-
// Distributed under the terms of the Modified BSD License.
31
import Control from 'ol/control/Control';
42
import { getRenderPixel } from 'ol/render';
53
import 'ol/ol.css';
@@ -10,19 +8,16 @@ import { MapView } from './widget';
108
interface SplitMapControlOptions {
119
target?: string;
1210
map_view?: MapView;
13-
swipe_position?: number; // Ajoutez swipe_position en tant que nombre
11+
swipe_position?: number;
1412
}
13+
1514
export default class SplitMapControl extends Control {
1615
swipe: HTMLInputElement;
1716
leftLayer: any;
18-
rightLayer: any;
1917
map_view: MapView;
20-
swipe_position: any;
21-
constructor(
22-
leftLayer: any,
23-
rightLayer: any,
24-
options: SplitMapControlOptions = {},
25-
) {
18+
private _swipe_position: number;
19+
20+
constructor(leftLayer: any, options: SplitMapControlOptions = {}) {
2621
const element = document.createElement('div');
2722
element.className = 'ol-unselectable ol-control split-map-control';
2823

@@ -32,98 +27,63 @@ export default class SplitMapControl extends Control {
3227
});
3328

3429
this.leftLayer = leftLayer;
35-
this.rightLayer = rightLayer;
3630

37-
console.log('Initializing SplitMapControl...');
38-
console.log(options);
3931
if (options.map_view) {
4032
this.map_view = options.map_view;
41-
console.log('MapView initialized:', this.map_view);
4233
} else {
4334
throw new Error('MapView is required for SplitMapControl.');
4435
}
45-
if (options.swipe_position) {
46-
this.swipe_position = options.swipe_position;
47-
console.log('swipe_position initialized:', this.swipe_position);
48-
} else {
49-
throw new Error('swipe_position is required for SplitMapControl.');
50-
}
36+
37+
this._swipe_position = options.swipe_position ?? 0;
5138

5239
const swiperContainer = document.createElement('div');
5340
swiperContainer.className = 'swiper-container';
41+
swiperContainer.style.width = '100%';
5442

5543
this.swipe = document.createElement('input');
5644
this.swipe.type = 'range';
5745
this.swipe.className = 'swipe';
58-
(this.swipe.value = this.swipe_position),
59-
swiperContainer.appendChild(this.swipe);
60-
console.log('this.map_view.map_container', this.map_view.map_container);
61-
this.map_view.map_container.appendChild(swiperContainer);
62-
this.handleSwipe();
63-
}
64-
65-
handleSwipe(event?: Event) {
66-
console.log('Handling swipe event...');
67-
console.log(this.swipe.value);
68-
if (!this.leftLayer.hasListener('prerender')) {
69-
console.log('1');
70-
this.leftLayer.on('prerender', this.prerender.bind(this));
71-
}
72-
73-
if (!this.leftLayer.hasListener('postrender')) {
74-
console.log('2');
75-
//this.leftLayer.on('postrender', this.postrender.bind(this));
76-
}
77-
78-
if (!this.rightLayer.hasListener('prerender')) {
79-
console.log('3');
46+
this.swipe.style.width = '100%';
47+
this.updateSwipeValue();
48+
swiperContainer.appendChild(this.swipe);
8049

81-
//this.rightLayer.on('prerender', this.prerender.bind(this));
82-
}
83-
84-
if (!this.rightLayer.hasListener('postrender')) {
85-
console.log('4');
86-
87-
this.rightLayer.on('postrender', this.postrender.bind(this));
88-
}
50+
this.map_view.map_container.style.position = 'relative';
51+
this.map_view.map_container.appendChild(swiperContainer);
8952

90-
console.log('ok');
91-
}
53+
const map_view = this.map_view;
9254

93-
prerender(event: any) {
94-
console.log('Prerender event triggered.');
55+
this.leftLayer.on('prerender', (event: any) => {
56+
const gl = event.context;
57+
gl.enable(gl.SCISSOR_TEST);
9558

96-
const gl = event.context; // Get WebGL context
97-
gl.enable(gl.SCISSOR_TEST); // Enable scissor test
59+
const mapSize = map_view.getSize();
9860

99-
const mapSize = this.map_view.getSize(); // Get the size of the map
100-
if (!mapSize) {
101-
console.warn('Map size is undefined.');
102-
return;
103-
}
61+
if (mapSize) {
62+
const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
63+
const topRight = getRenderPixel(event, [mapSize[0], 0]);
10464

105-
// Get render pixels for the bottom left and top right corners
106-
const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
107-
const topRight = getRenderPixel(event, [mapSize[0], 0]);
65+
const width = Math.round((topRight[0] - bottomLeft[0]) * (this._swipe_position / 100));
66+
const height = topRight[1] - bottomLeft[1];
10867

109-
// Get the swipe value from the input element
110-
const swipeValue = this.swipe.value;
111-
console.log('swipeValue', swipeValue);
68+
gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
69+
}
70+
});
11271

113-
// Calculate the width and height for the scissor test
114-
const width = Math.round(
115-
(topRight[0] - bottomLeft[0]) * (Number(swipeValue) / 100),
116-
);
117-
const height = topRight[1] - bottomLeft[1];
72+
this.leftLayer.on('postrender', (event: any) => {
73+
const gl = event.context;
74+
gl.disable(gl.SCISSOR_TEST);
75+
});
11876

119-
// Define the scissor box
120-
gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
77+
this.swipe.addEventListener('input', () => {
78+
this._swipe_position = parseInt(this.swipe.value, 10);
79+
this.updateSwipeValue();
80+
map_view.map.render();
81+
});
12182
}
12283

123-
postrender(event: any) {
124-
console.log('Postrender event triggered.');
125-
126-
const gl = event.context; // Get WebGL context
127-
gl.disable(gl.SCISSOR_TEST); // Disable scissor test
84+
private updateSwipeValue() {
85+
if (this.swipe) {
86+
this.swipe.value = this._swipe_position.toString();
87+
}
12888
}
12989
}

‎src/splitmapcontrol.ts‎

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,77 @@
11
// Copyright (c) QuantStack
22
// Distributed under the terms of the Modified BSD License.
3-
import { unpack_models } from '@jupyter-widgets/base';
3+
import { unpack_models, ISerializers } from '@jupyter-widgets/base';
44
import { BaseControlModel, BaseControlView } from './basecontrol';
55
import 'ol/ol.css';
66
import '../css/widget.css';
77
import SplitMapControl from './splitcontrol';
8+
import { MODULE_NAME, MODULE_VERSION } from './version';
89

9-
// Modèle pour le contrôle de carte divisée
1010
export class SplitMapControlModel extends BaseControlModel {
1111
defaults() {
1212
return {
1313
...super.defaults(),
14-
_view_name: 'SplitMapControlView',
15-
_model_name: 'SplitMapControlModel',
14+
_model_name: SplitMapControlModel.model_name,
15+
_model_module: SplitMapControlModel.model_module,
16+
_model_module_version: SplitMapControlModel.model_module_version,
17+
_view_name: SplitMapControlModel.view_name,
18+
_view_module: SplitMapControlModel.view_module,
19+
_view_module_version: SplitMapControlModel.view_module_version,
1620
left_layer: undefined,
1721
right_layer: undefined,
1822
swipe_position: 50,
1923
};
2024
}
21-
}
2225

23-
SplitMapControlModel.serializers = {
24-
...BaseControlModel.serializers,
25-
left_layer: { deserialize: unpack_models },
26-
right_layer: { deserialize: unpack_models },
27-
};
26+
static serializers: ISerializers = {
27+
...BaseControlModel.serializers,
28+
left_layer: { deserialize: unpack_models },
29+
right_layer: { deserialize: unpack_models },
30+
};
31+
32+
static model_name = 'SplitMapControlModel';
33+
static model_module = MODULE_NAME;
34+
static model_module_version = MODULE_VERSION;
35+
static view_name = 'SplitMapControlView';
36+
static view_module = MODULE_NAME;
37+
static view_module_version = MODULE_VERSION;
38+
}
2839

2940
function asArray(arg: any) {
3041
return Array.isArray(arg) ? arg : [arg];
3142
}
3243

3344
export class SplitMapControlView extends BaseControlView {
3445
swipe_position: number;
46+
3547
initialize(parameters: any) {
3648
super.initialize(parameters);
3749
this.map_view = this.options.map_view;
3850
this.map_view.layer_views = this.options.map_view.layerViews;
39-
console.log('hello');
4051
if (this.map_view && !this.map_view.layerViews) {
41-
console.warn(
42-
'Layer views is not initialized. Ensure it is properly set.',
43-
);
52+
console.warn('Layer views is not initialized. Ensure it is properly set.');
4453
}
4554
}
4655

4756
createObj() {
48-
console.log('Creating SplitMapControl object...');
4957
const left_models = asArray(this.model.get('left_layer'));
50-
51-
const right_models = asArray(this.model.get('right_layer'));
52-
5358
let layersModel = this.map_view.model.get('layers');
54-
55-
layersModel = layersModel.concat(left_models, right_models);
59+
layersModel = layersModel.concat(left_models);
5660

5761
return this.map_view.layer_views.update(layersModel).then((views: any) => {
5862
const left_views: any[] = [];
59-
console.log(left_views);
60-
const right_views: any[] = [];
61-
console.log(right_views);
62-
6363
views.forEach((view: any) => {
6464
if (left_models.indexOf(view.model) !== -1) {
6565
left_views.push(view.obj);
6666
}
67-
if (right_models.indexOf(view.model) !== -1) {
68-
right_views.push(view.obj);
69-
}
7067
});
7168

72-
console.log('Left views:', left_views);
73-
console.log('Right views:', right_views);
7469
this.swipe_position = this.model.get('swipe_position');
75-
console.log('swipe_position:', this.swipe_position);
7670

77-
this.obj = new SplitMapControl(left_views[0], right_views[0], {
71+
this.obj = new SplitMapControl(left_views[0], {
7872
map_view: this.map_view,
7973
swipe_position: this.swipe_position,
8074
});
81-
console.log('SplitMapControl created:', this.obj);
8275
});
8376
}
8477
}

‎src/widget.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,8 @@ import { LayerModel, LayerView } from './layer';
1111
import { BaseOverlayModel, BaseOverlayView } from './baseoverlay';
1212
import { BaseControlModel, BaseControlView } from './basecontrol';
1313
import { ViewObjectEventTypes } from 'ol/View';
14-
// widget.ts
1514
import { SplitMapControlModel, SplitMapControlView } from './splitmapcontrol';
1615
export { SplitMapControlModel, SplitMapControlView };
17-
1816
import { Map } from 'ol';
1917
import View from 'ol/View';
2018
import 'ol/ol.css';
@@ -35,10 +33,9 @@ export * from './rastertilelayer';
3533
export * from './geotifflayer';
3634
export * from './vectortilelayer';
3735
export * from './splitmapcontrol';
36+
export * from './splitcontrol';
37+
3838

39-
/*type WebGLEvent = {
40-
context: WebGLRenderingContext;
41-
};*/
4239
const DEFAULT_LOCATION = [0.0, 0.0];
4340

4441
export class MapModel extends DOMWidgetModel {
@@ -135,10 +132,11 @@ export class MapView extends DOMWidgetView {
135132
this.model.set('zoom', this.map.getView().getZoom());
136133
this.model.save_changes();
137134
});
138-
139135
this.layersChanged();
140-
this.overlayChanged();
141136
this.controlChanged();
137+
this.overlayChanged();
138+
this.zoomChanged();
139+
this.centerChanged();
142140
this.model.on('change:layers', this.layersChanged, this);
143141
this.model.on('change:overlays', this.overlayChanged, this);
144142
this.model.on('change:controls', this.controlChanged, this);
@@ -194,17 +192,15 @@ export class MapView extends DOMWidgetView {
194192
this.map.removeControl(child_view.obj);
195193
child_view.remove();
196194
}
197-
195+
198196
async addLayerModel(child_model: LayerModel) {
199197
const view = await this.create_child_view<LayerView>(child_model, {
200198
map_view: this,
201199
});
202200
this.map.addLayer(view.obj);
203-
console.log(this.map);
204201
this.displayed.then(() => {
205202
view.trigger('displayed', this);
206203
});
207-
console.log(view);
208204

209205
return view;
210206
}

0 commit comments

Comments
 (0)