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 +}