From d79b03d744a9a958b1b5865b6ac83ba07d29f638 Mon Sep 17 00:00:00 2001 From: Nour-Cheour10 Date: Fri, 17 May 2024 16:09:06 +0200 Subject: [PATCH 1/6] add full-screen+location+slider-zoom+scale-line --- examples/introduction.ipynb | 119 +++++++++++++++++++----------------- ipyopenlayers/example.py | 25 +++++++- src/widget.ts | 58 +++++++++++++++--- 3 files changed, 137 insertions(+), 65 deletions(-) diff --git a/examples/introduction.ipynb b/examples/introduction.ipynb index e7b23e4..cb5d34c 100644 --- a/examples/introduction.ipynb +++ b/examples/introduction.ipynb @@ -7,49 +7,13 @@ "# Introduction" ] }, - { - "cell_type": "code", - "execution_count": 1, - "metadata": {}, - "outputs": [], - "source": [ - "from ipyopenlayers import Map, TileLayer" - ] - }, { "cell_type": "code", "execution_count": 2, "metadata": {}, - "outputs": [ - { - "data": { - "application/vnd.jupyter.widget-view+json": { - "model_id": "757d5de3cec24c4e83d186b710dcfa59", - "version_major": 2, - "version_minor": 0 - }, - "text/plain": [ - "Map(center=[0.0, 0.0])" - ] - }, - "execution_count": 2, - "metadata": {}, - "output_type": "execute_result" - } - ], - "source": [ - "m = Map()\n", - "m" - ] - }, - { - "cell_type": "code", - "execution_count": 5, - "metadata": {}, "outputs": [], "source": [ - "m.zoom=4\n", - "\n" + "from ipyopenlayers import Map, TileLayer" ] }, { @@ -162,68 +126,113 @@ }, { "cell_type": "code", - "execution_count": 12, + "execution_count": 13, "metadata": {}, "outputs": [ { "data": { - "application/vnd.jupyter.widget-view+json": { - "model_id": "59aea50b07f14f028e2fb5e01c43a461", - "version_major": 2, - "version_minor": 0 - }, "text/plain": [ - "Map(center=[0.0, 0.0])" + "2.0" ] }, - "execution_count": 12, + "execution_count": 13, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m1 = Map(center=[0.0, 0.0], zoom=2)\n", - "m1" + "m1.zoom\n" ] }, { "cell_type": "code", - "execution_count": 13, + "execution_count": 14, "metadata": {}, "outputs": [ { "data": { "text/plain": [ - "2.0" + "[0.0, 0.0]" ] }, - "execution_count": 13, + "execution_count": 14, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m1.zoom\n" + "m1.center" ] }, { "cell_type": "code", - "execution_count": 14, + "execution_count": 3, "metadata": {}, "outputs": [ { "data": { + "application/vnd.jupyter.widget-view+json": { + "model_id": "59e2d329b5a24b6dabb1ca4aeead5469", + "version_major": 2, + "version_minor": 0 + }, "text/plain": [ - "[0.0, 0.0]" + "Map(center=[0.0, 0.0])" ] }, - "execution_count": 14, + "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m1.center" + "m = Map(center=[0.0, 0.0], zoom=2)\n", + "m" + ] + }, + { + "cell_type": "code", + "execution_count": 8, + "metadata": {}, + "outputs": [], + "source": [ + "m.coordinates()" + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_zoom_slider()" + ] + }, + { + "cell_type": "code", + "execution_count": 5, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_scale_line()" + ] + }, + { + "cell_type": "code", + "execution_count": 6, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_full_screen()" + ] + }, + { + "cell_type": "code", + "execution_count": 7, + "metadata": {}, + "outputs": [], + "source": [ + "m.zoom_slider=True" ] }, { diff --git a/ipyopenlayers/example.py b/ipyopenlayers/example.py index 8ead0e1..a58714f 100644 --- a/ipyopenlayers/example.py +++ b/ipyopenlayers/example.py @@ -8,9 +8,11 @@ TODO: Add module docstring """ -from ipywidgets import DOMWidget, Widget, widget_serialization -from traitlets import Unicode, List, Instance, CFloat +from ipywidgets import DOMWidget, Widget, widget_serialization, HTML +from traitlets import Unicode, List, Instance, CFloat, Bool,Int, Float from ._frontend import module_name, module_version +import random + def_loc = [0.0, 0.0] class TileLayer(Widget): @@ -36,7 +38,12 @@ class Map(DOMWidget): center = List(def_loc).tag(sync=True, o=True) zoom = CFloat(2).tag(sync=True, o=True) layers = List(Instance(TileLayer)).tag(sync=True, **widget_serialization) - + title = Unicode('').tag(sync=True) + zoom_slider = Bool(False).tag(sync=True) + scale_line = Bool(False).tag(sync=True) + full_screen = Bool(False).tag(sync=True) + mouse_position= Bool(False).tag(sync=True) + def __init__(self, center=None, zoom=None, **kwargs): super().__init__(**kwargs) @@ -55,4 +62,16 @@ def remove_layer(self, layer): def clear_layers(self): self.layers = [] + def add_zoom_slider(self): + self.zoom_slider = True + + def add_scale_line(self): + self.scale_line=True + + def add_full_screen(self): + self.full_screen=True + + def coordinates(self): + self.mouse_position=True + diff --git a/src/widget.ts b/src/widget.ts index 0f845d7..240b3e6 100644 --- a/src/widget.ts +++ b/src/widget.ts @@ -21,8 +21,11 @@ import 'ol/ol.css'; import { MODULE_NAME, MODULE_VERSION } from './version'; import '../css/widget.css'; import { useGeographic } from 'ol/proj'; +import * as olControl from 'ol/control'; + const DEFAULT_LOCATION = [0.0, 0.0]; + export class MapModel extends DOMWidgetModel { defaults() { return { @@ -71,12 +74,6 @@ export class MapView extends DOMWidgetView { this ); - - this.layers_changed(); - this.model.on('change:layers', this.layers_changed, this); - this.model.on('change:zoom', this.zoom_changed, this) - this.model.on('change:center', this.center_changed, this); - this.map = new Map({ target: this.mapContainer, view: new View({ @@ -89,6 +86,17 @@ export class MapView extends DOMWidgetView { }) ] }); + + this.layers_changed(); + this.model.on('change:layers', this.layers_changed, this); + this.model.on('change:zoom', this.zoom_changed, this) + this.model.on('change:center', this.center_changed, this); + this.model.on('change:zoom_slider', this.addZoomSliderControl, this); + this.model.on('change:scale_line', this.addScaleLineControl, this); + this.model.on('change:full_screen', this.addFullScreenControl, this); + this.model.on('change:mouse_position', this.addMousePositionControl, this); + + } layers_changed(){ @@ -126,6 +134,42 @@ export class MapView extends DOMWidgetView { return view; } + addZoomControl() { + const nv_zoom_slider = this.model.get('zoom_slider'); + if (nv_zoom_slider !== undefined && nv_zoom_slider !== null) { + this.map.addControl(new olControl.Zoom()); + } + } + + addZoomSliderControl() { + const nv_zoom_slider = this.model.get('zoom_slider'); + if (nv_zoom_slider !== undefined && nv_zoom_slider !== null) { + this.map.addControl(new olControl.ZoomSlider()); + } + } + + addScaleLineControl() { + const nv_scale_line = this.model.get('scale_line'); + if (nv_scale_line !== undefined && nv_scale_line !== null) { + this.map.addControl(new olControl.ScaleLine()); + } + } + + addFullScreenControl() { + const nv_full_screen = this.model.get('full_screen'); + if (nv_full_screen !== undefined && nv_full_screen !== null) { + this.map.addControl(new olControl.FullScreen()); + } + } + + addMousePositionControl() { + const mousePositionEnabled = this.model.get('mouse_position'); + if (mousePositionEnabled !== undefined && mousePositionEnabled !== null) { + this.map.addControl(new olControl.MousePosition()); + } + } + + mapContainer: HTMLDivElement; map: Map; @@ -189,4 +233,4 @@ export class TileLayerView extends WidgetView { tileLayer: TileLayer; -} \ No newline at end of file +} From bafdc6b9a9eaffad3c25eec86c352e52c0ea2e7b Mon Sep 17 00:00:00 2001 From: Nour-Cheour10 Date: Thu, 23 May 2024 15:00:25 +0200 Subject: [PATCH 2/6] added overlay functionality --- examples/introduction.ipynb | 147 ++++++++++++---------------- ipyopenlayers/example.py | 34 ++++--- src/widget.ts | 188 ++++++++++++++++++++++++++++-------- 3 files changed, 230 insertions(+), 139 deletions(-) diff --git a/examples/introduction.ipynb b/examples/introduction.ipynb index cb5d34c..98405d9 100644 --- a/examples/introduction.ipynb +++ b/examples/introduction.ipynb @@ -9,25 +9,42 @@ }, { "cell_type": "code", - "execution_count": 2, + "execution_count": 1, "metadata": {}, "outputs": [], "source": [ - "from ipyopenlayers import Map, TileLayer" + "from ipyopenlayers import Map, TileLayer, ImageOverLayer" ] }, { "cell_type": "code", - "execution_count": 3, + "execution_count": 2, "metadata": {}, - "outputs": [], + "outputs": [ + { + "data": { + "application/vnd.jupyter.widget-view+json": { + "model_id": "fd180ddb3ce34b25b1398585399bfb59", + "version_major": 2, + "version_minor": 0 + }, + "text/plain": [ + "Map(center=[0.0, 0.0])" + ] + }, + "execution_count": 2, + "metadata": {}, + "output_type": "execute_result" + } + ], "source": [ - "m.center=[10.0,5.0]" + "m = Map(center=[0.0, 0.0], zoom=2)\n", + "m" ] }, { "cell_type": "code", - "execution_count": 6, + "execution_count": 4, "metadata": {}, "outputs": [], "source": [ @@ -37,7 +54,7 @@ }, { "cell_type": "code", - "execution_count": 7, + "execution_count": 9, "metadata": { "scrolled": true }, @@ -48,7 +65,7 @@ }, { "cell_type": "code", - "execution_count": 8, + "execution_count": 6, "metadata": {}, "outputs": [ { @@ -57,7 +74,7 @@ "[TileLayer(url='https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png')]" ] }, - "execution_count": 8, + "execution_count": 6, "metadata": {}, "output_type": "execute_result" } @@ -68,7 +85,7 @@ }, { "cell_type": "code", - "execution_count": 9, + "execution_count": 7, "metadata": {}, "outputs": [], "source": [ @@ -77,7 +94,7 @@ }, { "cell_type": "code", - "execution_count": 10, + "execution_count": 8, "metadata": {}, "outputs": [ { @@ -86,7 +103,7 @@ "[]" ] }, - "execution_count": 10, + "execution_count": 8, "metadata": {}, "output_type": "execute_result" } @@ -97,142 +114,104 @@ }, { "cell_type": "code", - "execution_count": 11, - "metadata": {}, - "outputs": [], - "source": [ - "m.clear_layers()" - ] - }, - { - "cell_type": "code", - "execution_count": 28, + "execution_count": 17, "metadata": {}, "outputs": [ { "data": { + "application/vnd.jupyter.widget-view+json": { + "model_id": "8df509e3cc2b46e1b35e5b67f8194472", + "version_major": 2, + "version_minor": 0 + }, "text/plain": [ - "[]" + "ImageOverLayer(image_bounds=[0, 0])" ] }, - "execution_count": 28, + "execution_count": 17, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m.layers" + "image=ImageOverLayer()\n", + "image" ] }, { "cell_type": "code", - "execution_count": 13, + "execution_count": 18, "metadata": {}, - "outputs": [ - { - "data": { - "text/plain": [ - "2.0" - ] - }, - "execution_count": 13, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [ - "m1.zoom\n" + "image.image_url=\"https://i.imgur.com/06Q1fSz.png\"" ] }, { "cell_type": "code", - "execution_count": 14, + "execution_count": 19, "metadata": {}, "outputs": [ { "data": { "text/plain": [ - "[0.0, 0.0]" + "'https://i.imgur.com/06Q1fSz.png'" ] }, - "execution_count": 14, + "execution_count": 19, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m1.center" + "image.image_url\n" + ] + }, + { + "cell_type": "code", + "execution_count": 20, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_Overlayer(image)" ] }, { "cell_type": "code", - "execution_count": 3, + "execution_count": 21, "metadata": {}, "outputs": [ { "data": { - "application/vnd.jupyter.widget-view+json": { - "model_id": "59e2d329b5a24b6dabb1ca4aeead5469", - "version_major": 2, - "version_minor": 0 - }, "text/plain": [ - "Map(center=[0.0, 0.0])" + "[ImageOverLayer(image_bounds=[0, 0], image_url='https://i.imgur.com/06Q1fSz.png')]" ] }, - "execution_count": 3, + "execution_count": 21, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m = Map(center=[0.0, 0.0], zoom=2)\n", - "m" + "m.OverLayers" ] }, { "cell_type": "code", - "execution_count": 8, + "execution_count": 23, "metadata": {}, "outputs": [], "source": [ - "m.coordinates()" + "image.image_bounds=([-100,30]) " ] }, { "cell_type": "code", - "execution_count": 4, - "metadata": {}, - "outputs": [], - "source": [ - "m.add_zoom_slider()" - ] - }, - { - "cell_type": "code", - "execution_count": 5, - "metadata": {}, - "outputs": [], - "source": [ - "m.add_scale_line()" - ] - }, - { - "cell_type": "code", - "execution_count": 6, - "metadata": {}, - "outputs": [], - "source": [ - "m.add_full_screen()" - ] - }, - { - "cell_type": "code", - "execution_count": 7, + "execution_count": 24, "metadata": {}, "outputs": [], "source": [ - "m.zoom_slider=True" + "m.remove_Overlayer(image)" ] }, { diff --git a/ipyopenlayers/example.py b/ipyopenlayers/example.py index a58714f..b86e741 100644 --- a/ipyopenlayers/example.py +++ b/ipyopenlayers/example.py @@ -11,7 +11,6 @@ from ipywidgets import DOMWidget, Widget, widget_serialization, HTML from traitlets import Unicode, List, Instance, CFloat, Bool,Int, Float from ._frontend import module_name, module_version -import random def_loc = [0.0, 0.0] @@ -24,7 +23,19 @@ class TileLayer(Widget): _view_module = Unicode(module_name).tag(sync=True) _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 ImageOverLayer (DOMWidget): + + _model_name = Unicode('ImageOverLayerModel').tag(sync=True) + _model_module = Unicode(module_name).tag(sync=True) + _model_module_version = Unicode(module_version).tag(sync=True) + _view_name = Unicode('ImageOverLayerView').tag(sync=True) + _view_module = Unicode(module_name).tag(sync=True) + _view_module_version = Unicode(module_version).tag(sync=True) + + image_url = Unicode('').tag(sync=True) + image_bounds = List([0, 0]).tag(sync=True) + class Map(DOMWidget): _model_name = Unicode('MapModel').tag(sync=True) @@ -38,6 +49,8 @@ class Map(DOMWidget): center = List(def_loc).tag(sync=True, o=True) zoom = CFloat(2).tag(sync=True, o=True) layers = List(Instance(TileLayer)).tag(sync=True, **widget_serialization) + OverLayers=List(Instance(ImageOverLayer)).tag(sync=True, **widget_serialization) + title = Unicode('').tag(sync=True) zoom_slider = Bool(False).tag(sync=True) scale_line = Bool(False).tag(sync=True) @@ -56,22 +69,17 @@ def __init__(self, center=None, zoom=None, **kwargs): def add_layer(self, layer): self.layers = self.layers + [layer] + def add_Overlayer(self, Overlayer): + self.OverLayers = self.OverLayers + [Overlayer] + def remove_layer(self, layer): self.layers = [x for x in self.layers if x != layer] + + def remove_Overlayer(self, Overlayer): + self.OverLayers = [x for x in self.OverLayers if x != Overlayer] def clear_layers(self): self.layers = [] - def add_zoom_slider(self): - self.zoom_slider = True - - def add_scale_line(self): - self.scale_line=True - - def add_full_screen(self): - self.full_screen=True - - def coordinates(self): - self.mouse_position=True diff --git a/src/widget.ts b/src/widget.ts index 240b3e6..18e7868 100644 --- a/src/widget.ts +++ b/src/widget.ts @@ -21,7 +21,10 @@ import 'ol/ol.css'; import { MODULE_NAME, MODULE_VERSION } from './version'; import '../css/widget.css'; import { useGeographic } from 'ol/proj'; -import * as olControl from 'ol/control'; +import Overlay from 'ol/Overlay'; +import ImageLayer from 'ol/layer/Image'; +import ImageSource from 'ol/source/Image'; +import ImageStatic from 'ol/source/ImageStatic'; const DEFAULT_LOCATION = [0.0, 0.0]; @@ -47,6 +50,7 @@ export class MapModel extends DOMWidgetModel { static serializers: ISerializers = { ...DOMWidgetModel.serializers, layers: { deserialize: unpack_models }, + OverLayers: { deserialize: unpack_models }, // Add any extra serializers here }; @@ -74,6 +78,12 @@ export class MapView extends DOMWidgetView { this ); + this.Overlayer_views = new ViewList( + this.add_overlayer_model, + this.remove_overlayer_view, + this, + ); + this.map = new Map({ target: this.mapContainer, view: new View({ @@ -84,18 +94,22 @@ export class MapView extends DOMWidgetView { new TileLayer({ source: new OSM() }) - ] + ], + }); + + this.imageElement = document.createElement('img'); + this.overlay = new Overlay({ + element: this.imageElement, + position: this.model.get('image_bounds'), }); this.layers_changed(); this.model.on('change:layers', this.layers_changed, this); + this.model.on('change:OverLayers', this.OverLayers_changed, this); + this.model.on('change:image_bounds', this.update_position_overlay, this); + this.model.on('change:zoom', this.zoom_changed, this) this.model.on('change:center', this.center_changed, this); - this.model.on('change:zoom_slider', this.addZoomSliderControl, this); - this.model.on('change:scale_line', this.addScaleLineControl, this); - this.model.on('change:full_screen', this.addFullScreenControl, this); - this.model.on('change:mouse_position', this.addMousePositionControl, this); - } @@ -103,6 +117,12 @@ export class MapView extends DOMWidgetView { const layers = this.model.get('layers') as TileLayerModel[]; this.layer_views.update(layers); } + + OverLayers_changed() { + const OverLayers = this.model.get('OverLayers') as ImageOverLayerModel[]; + this.Overlayer_views.update(OverLayers); + } + zoom_changed() { const newZoom = this.model.get('zoom'); if (newZoom !== undefined && newZoom !== null) { @@ -120,12 +140,19 @@ export class MapView extends DOMWidgetView { this.map.removeLayer(child_view.tileLayer); child_view.remove(); } + remove_overlayer_view(child_view: ImageOverLayerView){ + if (child_view.overlay) { + this.map.removeOverlay(child_view.overlay); + } + child_view.remove(); + } + async add_layer_model(child_model: TileLayerModel) { const view = await this.create_child_view(child_model, { map_view: this, }); - + this.map.addLayer(view.tileLayer); this.displayed.then(() => { @@ -133,48 +160,52 @@ export class MapView extends DOMWidgetView { }); return view; } + async add_overlayer_model(child_model: ImageOverLayerModel) { - addZoomControl() { - const nv_zoom_slider = this.model.get('zoom_slider'); - if (nv_zoom_slider !== undefined && nv_zoom_slider !== null) { - this.map.addControl(new olControl.Zoom()); - } - } - - addZoomSliderControl() { - const nv_zoom_slider = this.model.get('zoom_slider'); - if (nv_zoom_slider !== undefined && nv_zoom_slider !== null) { - this.map.addControl(new olControl.ZoomSlider()); - } - } - - addScaleLineControl() { - const nv_scale_line = this.model.get('scale_line'); - if (nv_scale_line !== undefined && nv_scale_line !== null) { - this.map.addControl(new olControl.ScaleLine()); - } - } - - addFullScreenControl() { - const nv_full_screen = this.model.get('full_screen'); - if (nv_full_screen !== undefined && nv_full_screen !== null) { - this.map.addControl(new olControl.FullScreen()); + const view = await this.create_child_view(child_model, { + map_view: this, + }); + + view.overlay = this.overlay; + this.map.addOverlay(this.overlay); + + const imageSource = view.imageLayer.getSource() as ImageStatic; + const imageUrl = imageSource.getUrl(); + + if (imageUrl) { + this.imageElement.src = imageUrl; + } else { + console.error('Image URL is undefined'); } + + this.displayed.then(() => { + view.trigger('displayed', this); + }); + + const imageExtent = imageSource.getImageExtent(); + this.overlay.setPosition(imageExtent); + + view.on('image_bounds_changed', (nv_image_bounds: number[]) => { + this.update_position_overlay(nv_image_bounds); + }); + + + return view; } - addMousePositionControl() { - const mousePositionEnabled = this.model.get('mouse_position'); - if (mousePositionEnabled !== undefined && mousePositionEnabled !== null) { - this.map.addControl(new olControl.MousePosition()); + update_position_overlay(nv_image_bounds: number[]) { + if (nv_image_bounds !== undefined && nv_image_bounds !== null) { + this.overlay.setPosition(nv_image_bounds) } - } - - - mapContainer: HTMLDivElement; +} + + imageElement : HTMLImageElement; + mapContainer: HTMLDivElement; + overlay : Overlay map: Map; - layer_views: ViewList; + Overlayer_views :ViewList } @@ -234,3 +265,76 @@ export class TileLayerView extends WidgetView { tileLayer: TileLayer; } + + +export class ImageOverLayerModel extends DOMWidgetModel { + defaults() { + return { + ...super.defaults(), + _model_name: ImageOverLayerModel.model_name, + _model_module: ImageOverLayerModel.model_module, + _model_module_version: ImageOverLayerModel.model_module_version, + _view_name: ImageOverLayerModel.view_name, + _view_module: ImageOverLayerModel.view_module, + _view_module_version: ImageOverLayerModel.view_module_version, + value: 'Hello World' + }; + } + + + static serializers: ISerializers = { + ...DOMWidgetModel.serializers, + // Ajoutez ici tous les sérialiseurs supplémentaires + }; + static model_name = 'ImageOverLayerModel'; + static model_module = MODULE_NAME; + static model_module_version = MODULE_VERSION; + static view_name = 'ImageOverLayerView'; + static view_module = MODULE_NAME; + static view_module_version = MODULE_VERSION; + } + + + export class ImageOverLayerView extends DOMWidgetView { + imageLayer :ImageLayer; + overlay: Overlay | null; + render() { + super.render(); + this.model_events(); + } + initialize(parameters: WidgetView.IInitializeParameters) { + super.initialize(parameters); + this.create_image_layer(); + this.model_events(); + } + create_image_layer() { + this.imageLayer = new ImageLayer ({ + source: new ImageStatic({ + url: this.model.get('image_url'), + imageExtent: this.model.get('image_bounds') + }) + }); + } + + model_events() { + this.listenTo(this.model, 'change:image_url', () => { + const url = this.model.get('image_url'); + + if (url) { + const newSource = new ImageStatic({ + url: this.model.get('image_url'), + imageExtent: this.model.get('image_bounds') + }); + this.imageLayer.setSource(newSource) + } + }); + + this.listenTo(this.model, 'change:image_bounds', () => { + const nv_image_bounds = this.model.get('image_bounds'); + this.imageLayer.setExtent(nv_image_bounds); + this.trigger('image_bounds_changed', nv_image_bounds); + + + }); + } +} \ No newline at end of file From 2ef9fe6ff9b79336165348d80686e6a58771665c Mon Sep 17 00:00:00 2001 From: Nour-Cheour10 Date: Tue, 28 May 2024 16:56:08 +0200 Subject: [PATCH 3/6] add multiple overlays --- examples/introduction.ipynb | 137 ++++++---------------- ipyopenlayers/example.py | 15 +-- src/__tests__/utils.ts | 6 +- src/plugin.ts | 2 +- src/widget.ts | 224 ++++++++++++++++++------------------ 5 files changed, 154 insertions(+), 230 deletions(-) diff --git a/examples/introduction.ipynb b/examples/introduction.ipynb index 98405d9..844499a 100644 --- a/examples/introduction.ipynb +++ b/examples/introduction.ipynb @@ -9,7 +9,7 @@ }, { "cell_type": "code", - "execution_count": 1, + "execution_count": 26, "metadata": {}, "outputs": [], "source": [ @@ -18,13 +18,13 @@ }, { "cell_type": "code", - "execution_count": 2, + "execution_count": 27, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { - "model_id": "fd180ddb3ce34b25b1398585399bfb59", + "model_id": "b5ca1d6e4568477b9b74c923a0be1262", "version_major": 2, "version_minor": 0 }, @@ -32,7 +32,7 @@ "Map(center=[0.0, 0.0])" ] }, - "execution_count": 2, + "execution_count": 27, "metadata": {}, "output_type": "execute_result" } @@ -44,83 +44,13 @@ }, { "cell_type": "code", - "execution_count": 4, - "metadata": {}, - "outputs": [], - "source": [ - "layere= TileLayer()\n", - "layere.url=\"https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png\"\n" - ] - }, - { - "cell_type": "code", - "execution_count": 9, - "metadata": { - "scrolled": true - }, - "outputs": [], - "source": [ - "m.add_layer(layere)" - ] - }, - { - "cell_type": "code", - "execution_count": 6, - "metadata": {}, - "outputs": [ - { - "data": { - "text/plain": [ - "[TileLayer(url='https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png')]" - ] - }, - "execution_count": 6, - "metadata": {}, - "output_type": "execute_result" - } - ], - "source": [ - "m.layers" - ] - }, - { - "cell_type": "code", - "execution_count": 7, - "metadata": {}, - "outputs": [], - "source": [ - "m.remove_layer(layere)" - ] - }, - { - "cell_type": "code", - "execution_count": 8, - "metadata": {}, - "outputs": [ - { - "data": { - "text/plain": [ - "[]" - ] - }, - "execution_count": 8, - "metadata": {}, - "output_type": "execute_result" - } - ], - "source": [ - "m.layers" - ] - }, - { - "cell_type": "code", - "execution_count": 17, + "execution_count": 28, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { - "model_id": "8df509e3cc2b46e1b35e5b67f8194472", + "model_id": "2bf7058855764a519a4ff61ea74324a7", "version_major": 2, "version_minor": 0 }, @@ -128,7 +58,7 @@ "ImageOverLayer(image_bounds=[0, 0])" ] }, - "execution_count": 17, + "execution_count": 28, "metadata": {}, "output_type": "execute_result" } @@ -140,7 +70,7 @@ }, { "cell_type": "code", - "execution_count": 18, + "execution_count": 29, "metadata": {}, "outputs": [], "source": [ @@ -149,27 +79,16 @@ }, { "cell_type": "code", - "execution_count": 19, + "execution_count": 30, "metadata": {}, - "outputs": [ - { - "data": { - "text/plain": [ - "'https://i.imgur.com/06Q1fSz.png'" - ] - }, - "execution_count": 19, - "metadata": {}, - "output_type": "execute_result" - } - ], + "outputs": [], "source": [ - "image.image_url\n" + "image.image_url=\"\"" ] }, { "cell_type": "code", - "execution_count": 20, + "execution_count": 31, "metadata": {}, "outputs": [], "source": [ @@ -178,48 +97,60 @@ }, { "cell_type": "code", - "execution_count": 21, + "execution_count": 32, + "metadata": {}, + "outputs": [], + "source": [ + "image.image_bounds=[-70,70]" + ] + }, + { + "cell_type": "code", + "execution_count": 33, "metadata": {}, "outputs": [ { "data": { "text/plain": [ - "[ImageOverLayer(image_bounds=[0, 0], image_url='https://i.imgur.com/06Q1fSz.png')]" + "[ImageOverLayer(image_bounds=[-70, 70])]" ] }, - "execution_count": 21, + "execution_count": 33, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m.OverLayers" + "m.over_layers" ] }, { "cell_type": "code", - "execution_count": 23, + "execution_count": 34, "metadata": {}, "outputs": [], "source": [ - "image.image_bounds=([-100,30]) " + "imaget=ImageOverLayer()\n", + "imaget.image_url=\"https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg\"\n" ] }, { "cell_type": "code", - "execution_count": 24, + "execution_count": 35, "metadata": {}, "outputs": [], "source": [ - "m.remove_Overlayer(image)" + "m.add_Overlayer(imaget)" ] }, { "cell_type": "code", - "execution_count": null, + "execution_count": 36, "metadata": {}, "outputs": [], - "source": [] + "source": [ + "m.remove_Overlayer(image)" + ] } ], "metadata": { diff --git a/ipyopenlayers/example.py b/ipyopenlayers/example.py index b86e741..7721424 100644 --- a/ipyopenlayers/example.py +++ b/ipyopenlayers/example.py @@ -49,7 +49,7 @@ class Map(DOMWidget): center = List(def_loc).tag(sync=True, o=True) zoom = CFloat(2).tag(sync=True, o=True) layers = List(Instance(TileLayer)).tag(sync=True, **widget_serialization) - OverLayers=List(Instance(ImageOverLayer)).tag(sync=True, **widget_serialization) + over_layers=List(Instance(ImageOverLayer)).tag(sync=True, **widget_serialization) title = Unicode('').tag(sync=True) zoom_slider = Bool(False).tag(sync=True) @@ -69,17 +69,14 @@ def __init__(self, center=None, zoom=None, **kwargs): def add_layer(self, layer): self.layers = self.layers + [layer] - def add_Overlayer(self, Overlayer): - self.OverLayers = self.OverLayers + [Overlayer] + def add_Overlayer(self, over_layer): + self.over_layers = self.over_layers + [over_layer] def remove_layer(self, layer): self.layers = [x for x in self.layers if x != layer] - def remove_Overlayer(self, Overlayer): - self.OverLayers = [x for x in self.OverLayers if x != Overlayer] + def remove_Overlayer(self, over_layer): + self.over_layers = [x for x in self.over_layers if x != over_layer] def clear_layers(self): - self.layers = [] - - - + self.layers = [] \ No newline at end of file diff --git a/src/__tests__/utils.ts b/src/__tests__/utils.ts index 0a61d63..06f6387 100644 --- a/src/__tests__/utils.ts +++ b/src/__tests__/utils.ts @@ -54,7 +54,7 @@ export class DummyManager extends baseManager.ManagerBase { display_view( msg: services.KernelMessage.IMessage, view: widgets.DOMWidgetView, - options: any + options: any, ) { // TODO: make this a spy // TODO: return an html element @@ -68,7 +68,7 @@ export class DummyManager extends baseManager.ManagerBase { protected loadClass( className: string, moduleName: string, - moduleVersion: string + moduleVersion: string, ): Promise { if (moduleName === '@jupyter-widgets/base') { if ((widgets as any)[className]) { @@ -106,7 +106,7 @@ export interface Constructor { export function createTestModel( constructor: Constructor, - attributes?: any + attributes?: any, ): T { const id = widgets.uuid(); const widget_manager = new DummyManager(); diff --git a/src/plugin.ts b/src/plugin.ts index dbad27f..b469593 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -32,7 +32,7 @@ export default examplePlugin; */ function activateWidgetExtension( app: Application, - registry: IJupyterWidgetRegistry + registry: IJupyterWidgetRegistry, ): void { registry.registerWidget({ name: MODULE_NAME, diff --git a/src/widget.ts b/src/widget.ts index 18e7868..68f1c34 100644 --- a/src/widget.ts +++ b/src/widget.ts @@ -1,6 +1,5 @@ // Copyright (c) QuantStack // Distributed under the terms of the Modified BSD License. - import { DOMWidgetModel, DOMWidgetView, @@ -17,7 +16,6 @@ import TileLayer from 'ol/layer/Tile'; import View from 'ol/View'; import XYZ from 'ol/source/XYZ'; import 'ol/ol.css'; - import { MODULE_NAME, MODULE_VERSION } from './version'; import '../css/widget.css'; import { useGeographic } from 'ol/proj'; @@ -26,7 +24,6 @@ import ImageLayer from 'ol/layer/Image'; import ImageSource from 'ol/source/Image'; import ImageStatic from 'ol/source/ImageStatic'; - const DEFAULT_LOCATION = [0.0, 0.0]; export class MapModel extends DOMWidgetModel { @@ -43,22 +40,21 @@ export class MapModel extends DOMWidgetModel { layers: [], zoom: 2, center: DEFAULT_LOCATION, - }; } static serializers: ISerializers = { ...DOMWidgetModel.serializers, layers: { deserialize: unpack_models }, - OverLayers: { deserialize: unpack_models }, + over_layers: { deserialize: unpack_models }, // Add any extra serializers here }; static model_name = 'MapModel'; static model_module = MODULE_NAME; static model_module_version = MODULE_VERSION; - static view_name = 'MapView'; - static view_module = MODULE_NAME; + static view_name = 'MapView'; + static view_module = MODULE_NAME; static view_module_version = MODULE_VERSION; } @@ -69,90 +65,82 @@ export class MapView extends DOMWidgetView { this.mapContainer = document.createElement('div'); this.mapContainer.style.height = '500px'; - this.el.appendChild(this.mapContainer); this.layer_views = new ViewList( this.add_layer_model, this.remove_layer_view, - this + this, ); this.Overlayer_views = new ViewList( - this.add_overlayer_model, - this.remove_overlayer_view, + this.add_over_layer_model, + this.remove_over_layer_view, this, ); this.map = new Map({ target: this.mapContainer, view: new View({ - center: this.model.get('center'), - zoom : this.model.get('zoom'), + center: this.model.get('center'), + zoom: this.model.get('zoom'), }), layers: [ new TileLayer({ - source: new OSM() - }) - ], - }); - - this.imageElement = document.createElement('img'); - this.overlay = new Overlay({ - element: this.imageElement, - position: this.model.get('image_bounds'), + source: new OSM(), + }), + ], }); this.layers_changed(); this.model.on('change:layers', this.layers_changed, this); - this.model.on('change:OverLayers', this.OverLayers_changed, this); - this.model.on('change:image_bounds', this.update_position_overlay, this); - - this.model.on('change:zoom', this.zoom_changed, this) + this.model.on('change:over_layers', this.OverLayers_changed, this); + //this.model.on('change:image_bounds', this.update_position_overlay, this); + this.model.on('change:zoom', this.zoom_changed, this); this.model.on('change:center', this.center_changed, this); - } - layers_changed(){ + layers_changed() { const layers = this.model.get('layers') as TileLayerModel[]; this.layer_views.update(layers); } OverLayers_changed() { - const OverLayers = this.model.get('OverLayers') as ImageOverLayerModel[]; - this.Overlayer_views.update(OverLayers); - } - + const over_layers = this.model.get('over_layers') as ImageOverLayerModel[]; + this.Overlayer_views.update(over_layers); + console.log('OverLayers_changed'); + } + zoom_changed() { const newZoom = this.model.get('zoom'); if (newZoom !== undefined && newZoom !== null) { - this.map.getView().setZoom(newZoom); + this.map.getView().setZoom(newZoom); } -} + } + center_changed() { const newCenter = this.model.get('center'); if (newCenter !== undefined && newCenter !== null) { - this.map.getView().setCenter(newCenter); + this.map.getView().setCenter(newCenter); } -} + } remove_layer_view(child_view: TileLayerView) { - this.map.removeLayer(child_view.tileLayer); - child_view.remove(); + this.map.removeLayer(child_view.tileLayer); + child_view.remove(); } - remove_overlayer_view(child_view: ImageOverLayerView){ + + remove_over_layer_view(child_view: ImageOverLayerView) { if (child_view.overlay) { this.map.removeOverlay(child_view.overlay); } child_view.remove(); } - async add_layer_model(child_model: TileLayerModel) { const view = await this.create_child_view(child_model, { map_view: this, }); - this.map.addLayer(view.tileLayer); this.displayed.then(() => { @@ -160,55 +148,31 @@ export class MapView extends DOMWidgetView { }); return view; } - async add_overlayer_model(child_model: ImageOverLayerModel) { + async add_over_layer_model(child_model: ImageOverLayerModel) { const view = await this.create_child_view(child_model, { map_view: this, }); - - view.overlay = this.overlay; - this.map.addOverlay(this.overlay); - - const imageSource = view.imageLayer.getSource() as ImageStatic; - const imageUrl = imageSource.getUrl(); - - if (imageUrl) { - this.imageElement.src = imageUrl; - } else { - console.error('Image URL is undefined'); - } - + this.map.addOverlay(view.overlay); this.displayed.then(() => { view.trigger('displayed', this); }); - - const imageExtent = imageSource.getImageExtent(); - this.overlay.setPosition(imageExtent); - - view.on('image_bounds_changed', (nv_image_bounds: number[]) => { - this.update_position_overlay(nv_image_bounds); - }); - - + console.log('supposee added'); return view; } - + /* update_position_overlay(nv_image_bounds: number[]) { if (nv_image_bounds !== undefined && nv_image_bounds !== null) { - this.overlay.setPosition(nv_image_bounds) + this.overlay.setPosition(nv_image_bounds); } -} - - - imageElement : HTMLImageElement; + }*/ + imageElement: HTMLImageElement; mapContainer: HTMLDivElement; - overlay : Overlay map: Map; layer_views: ViewList; - Overlayer_views :ViewList + Overlayer_views: ViewList; } - export class TileLayerModel extends WidgetModel { defaults() { return { @@ -231,20 +195,20 @@ export class TileLayerModel extends WidgetModel { static model_name = 'TileLayerModel'; static model_module = MODULE_NAME; static model_module_version = MODULE_VERSION; - static view_name = 'TileLayerView'; - static view_module = MODULE_NAME; + static view_name = 'TileLayerView'; + static view_module = MODULE_NAME; static view_module_version = MODULE_VERSION; } export class TileLayerView extends WidgetView { render() { super.render(); - const url= this.model.get('url') + const url = this.model.get('url'); this.tileLayer = new TileLayer({ source: new XYZ({ - url: url - }) + url: url, + }), }); this.url_changed(); @@ -252,21 +216,18 @@ export class TileLayerView extends WidgetView { } url_changed() { - const newUrl = this.model.get('url'); - if (newUrl) { - const newSource = new XYZ({ - url: newUrl - }); - this.tileLayer.setSource(newSource); - - }} + const newUrl = this.model.get('url'); + if (newUrl) { + const newSource = new XYZ({ + url: newUrl, + }); + this.tileLayer.setSource(newSource); + } + } - tileLayer: TileLayer; - } - export class ImageOverLayerModel extends DOMWidgetModel { defaults() { return { @@ -277,64 +238,99 @@ export class ImageOverLayerModel extends DOMWidgetModel { _view_name: ImageOverLayerModel.view_name, _view_module: ImageOverLayerModel.view_module, _view_module_version: ImageOverLayerModel.view_module_version, - value: 'Hello World' + value: 'Hello World', }; } - - + static serializers: ISerializers = { ...DOMWidgetModel.serializers, // Ajoutez ici tous les sérialiseurs supplémentaires }; + static model_name = 'ImageOverLayerModel'; static model_module = MODULE_NAME; static model_module_version = MODULE_VERSION; static view_name = 'ImageOverLayerView'; static view_module = MODULE_NAME; static view_module_version = MODULE_VERSION; - } - - - export class ImageOverLayerView extends DOMWidgetView { - imageLayer :ImageLayer; - overlay: Overlay | null; +} + +export class ImageOverLayerView extends DOMWidgetView { + imageLayer: ImageLayer; + overlay: Overlay; + imageElement: HTMLImageElement; render() { super.render(); - this.model_events(); + console.log('Render called'); + this.update_image_element(); } + initialize(parameters: WidgetView.IInitializeParameters) { super.initialize(parameters); - this.create_image_layer(); - this.model_events(); + this.imageElement = document.createElement('img'); + this.create_image_layer(); + this.create_overlay(); + this.model_events(); + console.log('Overlay created in initialize:', this.overlay); } + create_image_layer() { - this.imageLayer = new ImageLayer ({ + this.imageLayer = new ImageLayer({ source: new ImageStatic({ url: this.model.get('image_url'), - imageExtent: this.model.get('image_bounds') - }) + imageExtent: this.model.get('image_bounds'), + }), }); } - + create_overlay() { + const imageExtent = this.model.get('image_bounds'); + this.overlay = new Overlay({ + position: imageExtent, + element: this.imageElement, + }); + return this.overlay; + } model_events() { this.listenTo(this.model, 'change:image_url', () => { const url = this.model.get('image_url'); - + console.log('hne'); + console.log(url); if (url) { const newSource = new ImageStatic({ url: this.model.get('image_url'), - imageExtent: this.model.get('image_bounds') + imageExtent: this.model.get('image_bounds'), }); - this.imageLayer.setSource(newSource) - } - }); - + this.imageLayer.setSource(newSource); + this.imageElement.src = url; + this.update_image_element(); + } + }); + this.update_image_element(); this.listenTo(this.model, 'change:image_bounds', () => { const nv_image_bounds = this.model.get('image_bounds'); this.imageLayer.setExtent(nv_image_bounds); this.trigger('image_bounds_changed', nv_image_bounds); - - }); + this.on('image_bounds_changed', (nv_image_bounds: number[]) => { + this.update_position_overlay(nv_image_bounds); + }); + } + update_image_element() { + const imageSource = this.imageLayer.getSource() as ImageStatic; + if (imageSource) { + const imageUrl = imageSource.getUrl(); + if (imageUrl) { + this.imageElement.src = imageUrl; + console.log(this.imageElement); + console.log('imageURL'); + console.log(this.overlay.getElement); + } + } + console.log('update_image_element'); } -} \ No newline at end of file + update_position_overlay(nv_image_bounds: number[]) { + if (nv_image_bounds && this.overlay) { + this.overlay.setPosition(nv_image_bounds); + } + } +} From 1a02dd506bcc006e7b7cb363350b580ca248f5bc Mon Sep 17 00:00:00 2001 From: Nour-Cheour10 Date: Thu, 30 May 2024 16:05:03 +0200 Subject: [PATCH 4/6] added vide+html popup overlay --- examples/introduction.ipynb | 211 ++++++++++++++++++++++++++++++----- ipyopenlayers/example.py | 35 +++--- src/index.ts | 2 + src/widget.ts | 214 ++++++++++++++++++------------------ 4 files changed, 313 insertions(+), 149 deletions(-) diff --git a/examples/introduction.ipynb b/examples/introduction.ipynb index 844499a..64c1eb2 100644 --- a/examples/introduction.ipynb +++ b/examples/introduction.ipynb @@ -9,22 +9,22 @@ }, { "cell_type": "code", - "execution_count": 26, + "execution_count": 1, "metadata": {}, "outputs": [], "source": [ - "from ipyopenlayers import Map, TileLayer, ImageOverLayer" + "from ipyopenlayers import Map, TileLayer, ImageOverlay, VideoOverlay,PopupOverlay" ] }, { "cell_type": "code", - "execution_count": 27, + "execution_count": 2, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { - "model_id": "b5ca1d6e4568477b9b74c923a0be1262", + "model_id": "9eca96d547f3475589485750d72ce076", "version_major": 2, "version_minor": 0 }, @@ -32,7 +32,7 @@ "Map(center=[0.0, 0.0])" ] }, - "execution_count": 27, + "execution_count": 2, "metadata": {}, "output_type": "execute_result" } @@ -44,33 +44,33 @@ }, { "cell_type": "code", - "execution_count": 28, + "execution_count": 3, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { - "model_id": "2bf7058855764a519a4ff61ea74324a7", + "model_id": "4295b725b3ac45e4a5311db80d397a3d", "version_major": 2, "version_minor": 0 }, "text/plain": [ - "ImageOverLayer(image_bounds=[0, 0])" + "ImageOverlay(position=[0, 0])" ] }, - "execution_count": 28, + "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "image=ImageOverLayer()\n", + "image=ImageOverlay()\n", "image" ] }, { "cell_type": "code", - "execution_count": 29, + "execution_count": 4, "metadata": {}, "outputs": [], "source": [ @@ -79,7 +79,7 @@ }, { "cell_type": "code", - "execution_count": 30, + "execution_count": 5, "metadata": {}, "outputs": [], "source": [ @@ -88,69 +88,228 @@ }, { "cell_type": "code", - "execution_count": 31, + "execution_count": 5, "metadata": {}, "outputs": [], "source": [ - "m.add_Overlayer(image)" + "m.add_overlay(image)" ] }, { "cell_type": "code", - "execution_count": 32, + "execution_count": 6, "metadata": {}, "outputs": [], "source": [ - "image.image_bounds=[-70,70]" + "image.position=[-70,70]" ] }, { "cell_type": "code", - "execution_count": 33, + "execution_count": 7, "metadata": {}, "outputs": [ { "data": { "text/plain": [ - "[ImageOverLayer(image_bounds=[-70, 70])]" + "[ImageOverlay(image_url='https://i.imgur.com/06Q1fSz.png', position=[-70, 70])]" ] }, - "execution_count": 33, + "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ - "m.over_layers" + "m.overlays" ] }, { "cell_type": "code", - "execution_count": 34, + "execution_count": 10, "metadata": {}, "outputs": [], "source": [ - "imaget=ImageOverLayer()\n", + "imaget=ImageOverlay()\n", "imaget.image_url=\"https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg\"\n" ] }, { "cell_type": "code", - "execution_count": 35, + "execution_count": 11, "metadata": {}, "outputs": [], "source": [ - "m.add_Overlayer(imaget)" + "m.add_overlay(imaget)" ] }, { "cell_type": "code", - "execution_count": 36, + "execution_count": 8, "metadata": {}, "outputs": [], "source": [ - "m.remove_Overlayer(image)" + "m.remove_overlay(image)" ] + }, + { + "cell_type": "code", + "execution_count": 9, + "metadata": {}, + "outputs": [ + { + "data": { + "application/vnd.jupyter.widget-view+json": { + "model_id": "2c752a6a9f4740dc87b858c6907f58d8", + "version_major": 2, + "version_minor": 0 + }, + "text/plain": [ + "VideoOverlay(position=[0, 0])" + ] + }, + "execution_count": 9, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "video=VideoOverlay()\n", + "video" + ] + }, + { + "cell_type": "code", + "execution_count": 10, + "metadata": {}, + "outputs": [], + "source": [ + "video.video_url=\"https://www.w3schools.com/html/mov_bbb.webm\"" + ] + }, + { + "cell_type": "code", + "execution_count": 6, + "metadata": {}, + "outputs": [], + "source": [ + "video.video_url=\"https://www.mapbox.com/bites/00188/patricia_nasa.webm\"" + ] + }, + { + "cell_type": "code", + "execution_count": 11, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_overlay(video)" + ] + }, + { + "cell_type": "code", + "execution_count": 12, + "metadata": {}, + "outputs": [], + "source": [ + "video.position=[-70,70]" + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "metadata": {}, + "outputs": [], + "source": [ + "video2=VideoOverlay()\n", + "video2.video_url=\"https://www.mapbox.com/bites/00188/patricia_nasa.webm\"" + ] + }, + { + "cell_type": "code", + "execution_count": 6, + "metadata": {}, + "outputs": [], + "source": [ + "video2.position=[-80,70]" + ] + }, + { + "cell_type": "code", + "execution_count": 5, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_overlay(video2)" + ] + }, + { + "cell_type": "code", + "execution_count": 13, + "metadata": {}, + "outputs": [], + "source": [ + "m.remove_overlay(video)" + ] + }, + { + "cell_type": "code", + "execution_count": 14, + "metadata": {}, + "outputs": [ + { + "data": { + "application/vnd.jupyter.widget-view+json": { + "model_id": "786f2fed9b174fa5bbc4829bffabe492", + "version_major": 2, + "version_minor": 0 + }, + "text/plain": [ + "PopupOverlay(position=[0, 0])" + ] + }, + "execution_count": 14, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "popup=PopupOverlay()\n", + "popup" + ] + }, + { + "cell_type": "code", + "execution_count": 15, + "metadata": {}, + "outputs": [], + "source": [ + "popup.popup_content='hellooooo'" + ] + }, + { + "cell_type": "code", + "execution_count": 16, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_overlay(popup)" + ] + }, + { + "cell_type": "code", + "execution_count": 17, + "metadata": {}, + "outputs": [], + "source": [ + "m.remove_overlay(popup)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [] } ], "metadata": { diff --git a/ipyopenlayers/example.py b/ipyopenlayers/example.py index 7721424..5e252b7 100644 --- a/ipyopenlayers/example.py +++ b/ipyopenlayers/example.py @@ -24,18 +24,27 @@ 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 ImageOverLayer (DOMWidget): - - _model_name = Unicode('ImageOverLayerModel').tag(sync=True) +class BaseOverlay(DOMWidget): + _model_name = Unicode('BaseOverlayModel').tag(sync=True) _model_module = Unicode(module_name).tag(sync=True) _model_module_version = Unicode(module_version).tag(sync=True) - _view_name = Unicode('ImageOverLayerView').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) image_url = Unicode('').tag(sync=True) - image_bounds = List([0, 0]).tag(sync=True) +class VideoOverlay (BaseOverlay): + overlay_type = Unicode('video').tag(sync=True) + video_url = Unicode('').tag(sync=True) + +class PopupOverlay (BaseOverlay): + overlay_type = Unicode('popup').tag(sync=True) + popup_content = Unicode('').tag(sync=True) class Map(DOMWidget): _model_name = Unicode('MapModel').tag(sync=True) @@ -49,14 +58,8 @@ class Map(DOMWidget): center = List(def_loc).tag(sync=True, o=True) zoom = CFloat(2).tag(sync=True, o=True) layers = List(Instance(TileLayer)).tag(sync=True, **widget_serialization) - over_layers=List(Instance(ImageOverLayer)).tag(sync=True, **widget_serialization) + overlays=List(Instance(BaseOverlay)).tag(sync=True, **widget_serialization) - title = Unicode('').tag(sync=True) - zoom_slider = Bool(False).tag(sync=True) - scale_line = Bool(False).tag(sync=True) - full_screen = Bool(False).tag(sync=True) - mouse_position= Bool(False).tag(sync=True) - def __init__(self, center=None, zoom=None, **kwargs): super().__init__(**kwargs) @@ -69,14 +72,14 @@ def __init__(self, center=None, zoom=None, **kwargs): def add_layer(self, layer): self.layers = self.layers + [layer] - def add_Overlayer(self, over_layer): - self.over_layers = self.over_layers + [over_layer] + def add_overlay(self, overlay): + self.overlays = self.overlays + [overlay] def remove_layer(self, layer): self.layers = [x for x in self.layers if x != layer] - def remove_Overlayer(self, over_layer): - self.over_layers = [x for x in self.over_layers if x != over_layer] + def remove_overlay(self, overlay): + self.overlays = [x for x in self.overlays if x != overlay] def clear_layers(self): self.layers = [] \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 850616a..ff44c97 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,3 +3,5 @@ export * from './version'; export * from './widget'; +//export * from './imageoverlay'; +//export * from './tilelayer'; diff --git a/src/widget.ts b/src/widget.ts index 68f1c34..9672c75 100644 --- a/src/widget.ts +++ b/src/widget.ts @@ -20,9 +20,6 @@ import { MODULE_NAME, MODULE_VERSION } from './version'; import '../css/widget.css'; import { useGeographic } from 'ol/proj'; import Overlay from 'ol/Overlay'; -import ImageLayer from 'ol/layer/Image'; -import ImageSource from 'ol/source/Image'; -import ImageStatic from 'ol/source/ImageStatic'; const DEFAULT_LOCATION = [0.0, 0.0]; @@ -46,7 +43,7 @@ export class MapModel extends DOMWidgetModel { static serializers: ISerializers = { ...DOMWidgetModel.serializers, layers: { deserialize: unpack_models }, - over_layers: { deserialize: unpack_models }, + overlays: { deserialize: unpack_models }, // Add any extra serializers here }; @@ -67,15 +64,15 @@ export class MapView extends DOMWidgetView { this.mapContainer.style.height = '500px'; this.el.appendChild(this.mapContainer); - this.layer_views = new ViewList( - this.add_layer_model, - this.remove_layer_view, + this.layerViews = new ViewList( + this.addLayerModel, + this.removeLayerView, this, ); - this.Overlayer_views = new ViewList( - this.add_over_layer_model, - this.remove_over_layer_view, + this.overlayViews = new ViewList( + this.addOverlayModel, + this.removeOverlayView, this, ); @@ -92,52 +89,50 @@ export class MapView extends DOMWidgetView { ], }); - this.layers_changed(); - this.model.on('change:layers', this.layers_changed, this); - this.model.on('change:over_layers', this.OverLayers_changed, this); - //this.model.on('change:image_bounds', this.update_position_overlay, this); - this.model.on('change:zoom', this.zoom_changed, this); - this.model.on('change:center', this.center_changed, this); + this.layersChanged(); + this.model.on('change:layers', this.layersChanged, this); + this.model.on('change:overlays', this.overlayChanged, this); + this.model.on('change:zoom', this.zoomChanged, this); + this.model.on('change:center', this.centerChanged, this); } - layers_changed() { + layersChanged() { const layers = this.model.get('layers') as TileLayerModel[]; - this.layer_views.update(layers); + this.layerViews.update(layers); } - OverLayers_changed() { - const over_layers = this.model.get('over_layers') as ImageOverLayerModel[]; - this.Overlayer_views.update(over_layers); - console.log('OverLayers_changed'); + overlayChanged() { + const overlay = this.model.get('overlays') as BaseOverlayModel[]; + this.overlayViews.update(overlay); } - zoom_changed() { + zoomChanged() { const newZoom = this.model.get('zoom'); if (newZoom !== undefined && newZoom !== null) { this.map.getView().setZoom(newZoom); } } - center_changed() { + centerChanged() { const newCenter = this.model.get('center'); if (newCenter !== undefined && newCenter !== null) { this.map.getView().setCenter(newCenter); } } - remove_layer_view(child_view: TileLayerView) { + removeLayerView(child_view: TileLayerView) { this.map.removeLayer(child_view.tileLayer); child_view.remove(); } - remove_over_layer_view(child_view: ImageOverLayerView) { + removeOverlayView(child_view: BaseOverlayView) { if (child_view.overlay) { this.map.removeOverlay(child_view.overlay); } child_view.remove(); } - async add_layer_model(child_model: TileLayerModel) { + async addLayerModel(child_model: TileLayerModel) { const view = await this.create_child_view(child_model, { map_view: this, }); @@ -149,28 +144,22 @@ export class MapView extends DOMWidgetView { return view; } - async add_over_layer_model(child_model: ImageOverLayerModel) { - const view = await this.create_child_view(child_model, { + async addOverlayModel(child_model: BaseOverlayModel) { + const view = await this.create_child_view(child_model, { map_view: this, }); this.map.addOverlay(view.overlay); this.displayed.then(() => { view.trigger('displayed', this); }); - console.log('supposee added'); return view; } - /* - update_position_overlay(nv_image_bounds: number[]) { - if (nv_image_bounds !== undefined && nv_image_bounds !== null) { - this.overlay.setPosition(nv_image_bounds); - } - }*/ + imageElement: HTMLImageElement; mapContainer: HTMLDivElement; map: Map; - layer_views: ViewList; - Overlayer_views: ViewList; + layerViews: ViewList; + overlayViews: ViewList; } export class TileLayerModel extends WidgetModel { @@ -211,11 +200,11 @@ export class TileLayerView extends WidgetView { }), }); - this.url_changed(); - this.model.on('change:url', this.url_changed, this); + this.urlChanged(); + this.model.on('change:url', this.urlChanged, this); } - url_changed() { + urlChanged() { const newUrl = this.model.get('url'); if (newUrl) { const newSource = new XYZ({ @@ -228,16 +217,16 @@ export class TileLayerView extends WidgetView { tileLayer: TileLayer; } -export class ImageOverLayerModel extends DOMWidgetModel { +export class BaseOverlayModel extends DOMWidgetModel { defaults() { return { ...super.defaults(), - _model_name: ImageOverLayerModel.model_name, - _model_module: ImageOverLayerModel.model_module, - _model_module_version: ImageOverLayerModel.model_module_version, - _view_name: ImageOverLayerModel.view_name, - _view_module: ImageOverLayerModel.view_module, - _view_module_version: ImageOverLayerModel.view_module_version, + _model_name: BaseOverlayModel.model_name, + _model_module: BaseOverlayModel.model_module, + _model_module_version: BaseOverlayModel.model_module_version, + _view_name: BaseOverlayModel.view_name, + _view_module: BaseOverlayModel.view_module, + _view_module_version: BaseOverlayModel.view_module_version, value: 'Hello World', }; } @@ -247,90 +236,101 @@ export class ImageOverLayerModel extends DOMWidgetModel { // Ajoutez ici tous les sérialiseurs supplémentaires }; - static model_name = 'ImageOverLayerModel'; + static model_name = 'BaseOverlayModel'; static model_module = MODULE_NAME; static model_module_version = MODULE_VERSION; - static view_name = 'ImageOverLayerView'; + static view_name = 'BaseOverlayView'; static view_module = MODULE_NAME; static view_module_version = MODULE_VERSION; } -export class ImageOverLayerView extends DOMWidgetView { - imageLayer: ImageLayer; +export class BaseOverlayView extends DOMWidgetView { overlay: Overlay; - imageElement: HTMLImageElement; + element: HTMLElement; + videoElement: HTMLVideoElement; + render() { super.render(); - console.log('Render called'); - this.update_image_element(); + this.updateElement(); } initialize(parameters: WidgetView.IInitializeParameters) { super.initialize(parameters); - this.imageElement = document.createElement('img'); - this.create_image_layer(); - this.create_overlay(); + this.initializeElement(); + this.createOverlay(); this.model_events(); - console.log('Overlay created in initialize:', this.overlay); } - create_image_layer() { - this.imageLayer = new ImageLayer({ - source: new ImageStatic({ - url: this.model.get('image_url'), - imageExtent: this.model.get('image_bounds'), - }), - }); + initializeElement() { + const overlayType = this.model.get('overlay_type'); + + if (overlayType === 'image') { + this.element = document.createElement('img'); + this.updateImageElement(); + } else if (overlayType === 'video') { + this.element = document.createElement('div'); + this.videoElement = document.createElement('video'); + this.videoElement.controls = true; + this.videoElement.src = this.model.get('video_url'); + this.element.appendChild(this.videoElement); + this.updateVideoElement(); + } else if (overlayType === 'popup') { + this.element = document.createElement('div'); + this.updatePopupElement(); + } } - create_overlay() { - const imageExtent = this.model.get('image_bounds'); + + createOverlay() { + const position = this.model.get('position'); this.overlay = new Overlay({ - position: imageExtent, - element: this.imageElement, + position: position, + element: this.element, }); return this.overlay; } + model_events() { - this.listenTo(this.model, 'change:image_url', () => { - const url = this.model.get('image_url'); - console.log('hne'); - console.log(url); - if (url) { - const newSource = new ImageStatic({ - url: this.model.get('image_url'), - imageExtent: this.model.get('image_bounds'), - }); - this.imageLayer.setSource(newSource); - this.imageElement.src = url; - this.update_image_element(); - } - }); - this.update_image_element(); - this.listenTo(this.model, 'change:image_bounds', () => { - const nv_image_bounds = this.model.get('image_bounds'); - this.imageLayer.setExtent(nv_image_bounds); - this.trigger('image_bounds_changed', nv_image_bounds); - }); - this.on('image_bounds_changed', (nv_image_bounds: number[]) => { - this.update_position_overlay(nv_image_bounds); - }); + this.listenTo(this.model, 'change:overlay_type', this.initializeElement); + this.listenTo(this.model, 'change:image_url', this.updateImageElement); + this.listenTo(this.model, 'change:video_url', this.updateVideoElement); + this.listenTo(this.model, 'change:popup_content', this.updatePopupElement); + this.listenTo(this.model, 'change:position', this.updatePosition); + } + + updateElement() { + const overlayType = this.model.get('overlay_type'); + if (overlayType === 'image') { + this.updateImageElement(); + } else if (overlayType === 'video') { + this.updateVideoElement(); + } else if (overlayType === 'popup') { + this.updatePopupElement(); + } } - update_image_element() { - const imageSource = this.imageLayer.getSource() as ImageStatic; - if (imageSource) { - const imageUrl = imageSource.getUrl(); - if (imageUrl) { - this.imageElement.src = imageUrl; - console.log(this.imageElement); - console.log('imageURL'); - console.log(this.overlay.getElement); - } + + updateImageElement() { + const imageUrl = this.model.get('image_url'); + if (imageUrl) { + (this.element as HTMLImageElement).src = imageUrl; } - console.log('update_image_element'); } - update_position_overlay(nv_image_bounds: number[]) { - if (nv_image_bounds && this.overlay) { - this.overlay.setPosition(nv_image_bounds); + + updateVideoElement() { + const videoUrl = this.model.get('video_url'); + if (videoUrl) { + this.videoElement.src = this.model.get('video_url'); } } + + updatePopupElement() { + const popupContent = this.model.get('popup_content'); + if (popupContent) { + this.element.innerHTML = popupContent; + } + } + + updatePosition() { + const position = this.model.get('position'); + this.overlay.setPosition(position); + } } From 607ebf6e0239b64725301142ea6092fdfd612562 Mon Sep 17 00:00:00 2001 From: Nour-Cheour10 Date: Fri, 31 May 2024 15:27:30 +0200 Subject: [PATCH 5/6] error while separating files --- examples/introduction.ipynb | 114 +++++++++++++++++++++++++++++++----- ipyopenlayers/example.py | 2 +- src/index.ts | 4 +- src/tilelayer.ts | 62 ++++++++++++++++++++ src/widget.ts | 64 +++----------------- 5 files changed, 170 insertions(+), 76 deletions(-) create mode 100644 src/tilelayer.ts diff --git a/examples/introduction.ipynb b/examples/introduction.ipynb index 64c1eb2..c06f769 100644 --- a/examples/introduction.ipynb +++ b/examples/introduction.ipynb @@ -24,7 +24,7 @@ { "data": { "application/vnd.jupyter.widget-view+json": { - "model_id": "9eca96d547f3475589485750d72ce076", + "model_id": "26ca977cf97241c0b29d81cb48500b97", "version_major": 2, "version_minor": 0 }, @@ -50,12 +50,12 @@ { "data": { "application/vnd.jupyter.widget-view+json": { - "model_id": "4295b725b3ac45e4a5311db80d397a3d", + "model_id": "eca839e371ec41e5806221cd8bda94dd", "version_major": 2, "version_minor": 0 }, "text/plain": [ - "ImageOverlay(position=[0, 0])" + "TileLayer()" ] }, "execution_count": 3, @@ -63,6 +63,90 @@ "output_type": "execute_result" } ], + "source": [ + "layer=TileLayer()\n", + "layer" + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "metadata": {}, + "outputs": [], + "source": [ + "layer.url='https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'" + ] + }, + { + "cell_type": "code", + "execution_count": 5, + "metadata": {}, + "outputs": [ + { + "data": { + "text/plain": [ + "[]" + ] + }, + "execution_count": 5, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "m.layers" + ] + }, + { + "cell_type": "code", + "execution_count": 6, + "metadata": {}, + "outputs": [], + "source": [ + "m.add_layer(layer)" + ] + }, + { + "cell_type": "code", + "execution_count": 7, + "metadata": {}, + "outputs": [ + { + "data": { + "text/plain": [ + "[TileLayer(url='https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png')]" + ] + }, + "execution_count": 7, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "m.layers" + ] + }, + { + "cell_type": "code", + "execution_count": 8, + "metadata": {}, + "outputs": [ + { + "data": { + "application/vnd.jupyter.widget-view+json": { + "model_id": "6c598e65b1054e3d87e80d164ef8c5d0", + "version_major": 2, + "version_minor": 0 + }, + "text/plain": [ + "ImageOverlay(position=[0, 0])" + ] + }, + "execution_count": 8, + "metadata": {}, + "output_type": "execute_result" + } + ], "source": [ "image=ImageOverlay()\n", "image" @@ -70,7 +154,7 @@ }, { "cell_type": "code", - "execution_count": 4, + "execution_count": 11, "metadata": {}, "outputs": [], "source": [ @@ -79,7 +163,7 @@ }, { "cell_type": "code", - "execution_count": 5, + "execution_count": 10, "metadata": {}, "outputs": [], "source": [ @@ -88,7 +172,7 @@ }, { "cell_type": "code", - "execution_count": 5, + "execution_count": 12, "metadata": {}, "outputs": [], "source": [ @@ -97,7 +181,7 @@ }, { "cell_type": "code", - "execution_count": 6, + "execution_count": 22, "metadata": {}, "outputs": [], "source": [ @@ -126,7 +210,7 @@ }, { "cell_type": "code", - "execution_count": 10, + "execution_count": 23, "metadata": {}, "outputs": [], "source": [ @@ -145,7 +229,7 @@ }, { "cell_type": "code", - "execution_count": 8, + "execution_count": 13, "metadata": {}, "outputs": [], "source": [ @@ -154,13 +238,13 @@ }, { "cell_type": "code", - "execution_count": 9, + "execution_count": 25, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { - "model_id": "2c752a6a9f4740dc87b858c6907f58d8", + "model_id": "f7453e31240d4770986c2189b947d065", "version_major": 2, "version_minor": 0 }, @@ -168,7 +252,7 @@ "VideoOverlay(position=[0, 0])" ] }, - "execution_count": 9, + "execution_count": 25, "metadata": {}, "output_type": "execute_result" } @@ -180,7 +264,7 @@ }, { "cell_type": "code", - "execution_count": 10, + "execution_count": 26, "metadata": {}, "outputs": [], "source": [ @@ -189,7 +273,7 @@ }, { "cell_type": "code", - "execution_count": 6, + "execution_count": 28, "metadata": {}, "outputs": [], "source": [ @@ -198,7 +282,7 @@ }, { "cell_type": "code", - "execution_count": 11, + "execution_count": 27, "metadata": {}, "outputs": [], "source": [ diff --git a/ipyopenlayers/example.py b/ipyopenlayers/example.py index 5e252b7..1282f9a 100644 --- a/ipyopenlayers/example.py +++ b/ipyopenlayers/example.py @@ -60,12 +60,12 @@ class Map(DOMWidget): layers = List(Instance(TileLayer)).tag(sync=True, **widget_serialization) overlays=List(Instance(BaseOverlay)).tag(sync=True, **widget_serialization) + def __init__(self, center=None, zoom=None, **kwargs): super().__init__(**kwargs) if center is not None: self.center = center - if zoom is not None: self.zoom = zoom diff --git a/src/index.ts b/src/index.ts index ff44c97..ef0d215 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,5 @@ // Copyright (c) QuantStack // Distributed under the terms of the Modified BSD License. - export * from './version'; export * from './widget'; -//export * from './imageoverlay'; -//export * from './tilelayer'; +export * from './tilelayer'; diff --git a/src/tilelayer.ts b/src/tilelayer.ts new file mode 100644 index 0000000..a3bc72c --- /dev/null +++ b/src/tilelayer.ts @@ -0,0 +1,62 @@ +import { WidgetModel, WidgetView, ISerializers } from '@jupyter-widgets/base'; +import TileLayer from 'ol/layer/Tile'; +import XYZ from 'ol/source/XYZ'; +import OSM from 'ol/source/OSM'; +import { MODULE_NAME, MODULE_VERSION } from './version'; + +export class TileLayerModel extends WidgetModel { + defaults() { + return { + ...super.defaults(), + _model_name: TileLayerModel.model_name, + _model_module: TileLayerModel.model_module, + _model_module_version: TileLayerModel.model_module_version, + _view_name: TileLayerModel.view_name, + _view_module: TileLayerModel.view_module, + _view_module_version: TileLayerModel.view_module_version, + value: 'Hello World', + }; + } + + static serializers: ISerializers = { + ...WidgetModel.serializers, + // Add any extra serializers here + }; + + static model_name = 'TileLayerModel'; + static model_module = MODULE_NAME; + static model_module_version = MODULE_VERSION; + static view_name = 'TileLayerView'; + static view_module = MODULE_NAME; + static view_module_version = MODULE_VERSION; +} + +export class TileLayerView extends WidgetView { + render() { + super.render(); + console.log('test'); + const url = this.model.get('url'); + + this.tileLayer = new TileLayer({ + source: new XYZ({ + url: url, + }), + }); + + this.urlChanged(); + this.model.on('change:url', this.urlChanged, this); + } + + urlChanged() { + console.log('test2'); + const newUrl = this.model.get('url'); + if (newUrl) { + const newSource = new XYZ({ + url: newUrl, + }); + this.tileLayer.setSource(newSource); + } + } + + tileLayer: TileLayer; +} diff --git a/src/widget.ts b/src/widget.ts index 9672c75..23e3bf1 100644 --- a/src/widget.ts +++ b/src/widget.ts @@ -14,13 +14,15 @@ import { Map } from 'ol'; import OSM from 'ol/source/OSM'; import TileLayer from 'ol/layer/Tile'; import View from 'ol/View'; -import XYZ from 'ol/source/XYZ'; import 'ol/ol.css'; import { MODULE_NAME, MODULE_VERSION } from './version'; import '../css/widget.css'; import { useGeographic } from 'ol/proj'; import Overlay from 'ol/Overlay'; +export * from './tilelayer'; +import { TileLayerModel, TileLayerView } from './tilelayer'; + const DEFAULT_LOCATION = [0.0, 0.0]; export class MapModel extends DOMWidgetModel { @@ -75,7 +77,6 @@ export class MapView extends DOMWidgetView { this.removeOverlayView, this, ); - this.map = new Map({ target: this.mapContainer, view: new View({ @@ -92,6 +93,7 @@ export class MapView extends DOMWidgetView { this.layersChanged(); this.model.on('change:layers', this.layersChanged, this); this.model.on('change:overlays', this.overlayChanged, this); + //this.model.on('change:controls', this.controlChanged, this); this.model.on('change:zoom', this.zoomChanged, this); this.model.on('change:center', this.centerChanged, this); } @@ -136,7 +138,9 @@ export class MapView extends DOMWidgetView { const view = await this.create_child_view(child_model, { map_view: this, }); + console.log('add'); this.map.addLayer(view.tileLayer); + console.log('supp add'); this.displayed.then(() => { view.trigger('displayed', this); @@ -155,6 +159,7 @@ export class MapView extends DOMWidgetView { return view; } + imageElement: HTMLImageElement; mapContainer: HTMLDivElement; map: Map; @@ -162,61 +167,6 @@ export class MapView extends DOMWidgetView { overlayViews: ViewList; } -export class TileLayerModel extends WidgetModel { - defaults() { - return { - ...super.defaults(), - _model_name: TileLayerModel.model_name, - _model_module: TileLayerModel.model_module, - _model_module_version: TileLayerModel.model_module_version, - _view_name: TileLayerModel.view_name, - _view_module: TileLayerModel.view_module, - _view_module_version: TileLayerModel.view_module_version, - value: 'Hello World', - }; - } - - static serializers: ISerializers = { - ...WidgetModel.serializers, - // Add any extra serializers here - }; - - static model_name = 'TileLayerModel'; - static model_module = MODULE_NAME; - static model_module_version = MODULE_VERSION; - static view_name = 'TileLayerView'; - static view_module = MODULE_NAME; - static view_module_version = MODULE_VERSION; -} - -export class TileLayerView extends WidgetView { - render() { - super.render(); - const url = this.model.get('url'); - - this.tileLayer = new TileLayer({ - source: new XYZ({ - url: url, - }), - }); - - this.urlChanged(); - this.model.on('change:url', this.urlChanged, this); - } - - urlChanged() { - const newUrl = this.model.get('url'); - if (newUrl) { - const newSource = new XYZ({ - url: newUrl, - }); - this.tileLayer.setSource(newSource); - } - } - - tileLayer: TileLayer; -} - export class BaseOverlayModel extends DOMWidgetModel { defaults() { return { From acfdad51cc42a7aa92ca3071a990538248c008cb Mon Sep 17 00:00:00 2001 From: Nour Cheour <161816839+Nour-Cheour10@users.noreply.github.com> Date: Fri, 31 May 2024 15:31:58 +0200 Subject: [PATCH 6/6] Take off console logs --- src/tilelayer.ts | 2 -- src/widget.ts | 4 ---- 2 files changed, 6 deletions(-) diff --git a/src/tilelayer.ts b/src/tilelayer.ts index a3bc72c..daffb69 100644 --- a/src/tilelayer.ts +++ b/src/tilelayer.ts @@ -34,7 +34,6 @@ export class TileLayerModel extends WidgetModel { export class TileLayerView extends WidgetView { render() { super.render(); - console.log('test'); const url = this.model.get('url'); this.tileLayer = new TileLayer({ @@ -48,7 +47,6 @@ export class TileLayerView extends WidgetView { } urlChanged() { - console.log('test2'); const newUrl = this.model.get('url'); if (newUrl) { const newSource = new XYZ({ diff --git a/src/widget.ts b/src/widget.ts index 23e3bf1..a886270 100644 --- a/src/widget.ts +++ b/src/widget.ts @@ -93,7 +93,6 @@ export class MapView extends DOMWidgetView { this.layersChanged(); this.model.on('change:layers', this.layersChanged, this); this.model.on('change:overlays', this.overlayChanged, this); - //this.model.on('change:controls', this.controlChanged, this); this.model.on('change:zoom', this.zoomChanged, this); this.model.on('change:center', this.centerChanged, this); } @@ -138,10 +137,7 @@ export class MapView extends DOMWidgetView { const view = await this.create_child_view(child_model, { map_view: this, }); - console.log('add'); this.map.addLayer(view.tileLayer); - console.log('supp add'); - this.displayed.then(() => { view.trigger('displayed', this); });