Skip to content

add full-screen+location+slider-zoom+scale-line #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

add full-screen+location+slider-zoom+scale-line #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 64 additions & 55 deletions examples/introduction.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
},
{
Expand Down Expand Up @@ -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"
]
},
{
Expand Down
25 changes: 22 additions & 3 deletions ipyopenlayers/example.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand All @@ -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)

Expand All @@ -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


58 changes: 51 additions & 7 deletions src/widget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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({
Expand All @@ -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(){
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -189,4 +233,4 @@ export class TileLayerView extends WidgetView {

tileLayer: TileLayer<OSM>;

}
}
Loading