Test t

.gitignore

@@ -148,6 +148,9 @@ $RECYCLE.BIN/
 **/node_modules/
 ipyopenlayers/nbextension/index.*
 
+#Ignore this file
+package-lock.json
+
 # Coverage data
 # -------------
 **/coverage/
@@ -156,4 +159,6 @@ ipyopenlayers/nbextension/index.*
 ipyopenlayers/labextension
 ipyopenlayers/nbextension
 
+!ipyopenlayers/nbextension/extensions.js
+
 .yarn

css/widget.css

@@ -1,3 +1,29 @@
 .custom-widget {
   padding: 0px 2px;
 }
+.ol-container {
+  height: 100%;
+  width: 100%;
+}
+
+.lm-Widget.lm-Panel.jp-OutputArea-child.jp-OutputArea-executeResult{
+  height: 100%;
+  overflow: hidden;
+  flex: 1 1 auto;
+}
+
+.lm-Widget.lm-Panel.jp-OutputArea-output {
+  height: 100%;
+  overflow: hidden;
+  flex: 1 1 auto;
+}
+
+.lm-Widget.custom-widget {
+  padding: 0px 2px;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 500px;
+}

examples/introduction.ipynb

@@ -33,7 +33,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "3265c9dce2864936a1f98ae5c591f899",
+       "model_id": "5da4fa87ae3a4510b192c084a26a17d8",
        "version_major": 2,
        "version_minor": 0
       },
@@ -51,6 +51,26 @@
     "m"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "4.0"
+      ]
+     },
+     "execution_count": 4,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m.zoom"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": 5,
@@ -324,7 +344,12 @@
   {
    "cell_type": "code",
    "execution_count": 30,
-   "metadata": {},
+   "metadata": {
+    "collapsed": true,
+    "jupyter": {
+     "outputs_hidden": true
+    }
+   },
    "outputs": [
     {
      "data": {
@@ -346,8 +371,12 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 31,
-   "metadata": {},
+   "execution_count": 13,
+   "metadata": {
+    "jupyter": {
+     "source_hidden": true
+    }
+   },
    "outputs": [],
    "source": [
     "import matplotlib as mpl\n",
@@ -369,7 +398,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 32,
+   "execution_count": 14,
    "metadata": {
     "jupyter": {
      "source_hidden": true
@@ -385,7 +414,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 33,
+   "execution_count": 15,
    "metadata": {
     "jupyter": {
      "source_hidden": true
@@ -408,8 +437,14 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 34,
-   "metadata": {},
+   "execution_count": 16,
+   "metadata": {
+    "collapsed": true,
+    "jupyter": {
+     "outputs_hidden": true
+    },
+    "scrolled": true
+   },
    "outputs": [
     {
      "data": {
@@ -436,7 +471,7 @@
        " '#08306b']"
       ]
      },
-     "execution_count": 34,
+     "execution_count": 16,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -447,7 +482,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 35,
+   "execution_count": 17,
    "metadata": {
     "jupyter": {
      "source_hidden": true
@@ -466,7 +501,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 36,
+   "execution_count": 18,
    "metadata": {
     "jupyter": {
      "source_hidden": true
@@ -508,7 +543,7 @@
        "   'fillOpacity': 0.5}}}"
       ]
      },
-     "execution_count": 36,
+     "execution_count": 18,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -519,7 +554,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 38,
+   "execution_count": 19,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -528,13 +563,53 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 39,
+   "execution_count": 20,
    "metadata": {},
    "outputs": [],
    "source": [
     "m.add_layer(g)"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": 21,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "[-77.2459537494385, 34.50600347821039]"
+      ]
+     },
+     "execution_count": 21,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m.center"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 22,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/plain": [
+       "9.685469905241503"
+      ]
+     },
+     "execution_count": 22,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m.zoom"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": 40,

ipyopenlayers/Map.py

@@ -9,7 +9,7 @@
 """
 
 from ipywidgets import DOMWidget, Widget, widget_serialization, CallbackDispatcher
-from traitlets import Unicode, List, Instance, CFloat, Bool, Dict, Any
+from traitlets import Unicode, List, Instance, Float, Bool, Dict, Any
 from ._frontend import module_name, module_version
 
 def_loc = [0.0, 0.0]
@@ -102,7 +102,7 @@ class Map(DOMWidget):
     _view_module_version = Unicode(module_version).tag(sync=True)
 
     center = List(def_loc).tag(sync=True, o=True)
-    zoom = CFloat(2).tag(sync=True, o=True)
+    zoom = Float(2).tag(sync=True, o=True)
     layers = List(Instance(Layer)).tag(sync=True, **widget_serialization)
     overlays=List(Instance(BaseOverlay)).tag(sync=True, **widget_serialization)
     controls=List(Instance(BaseControl)).tag(sync=True, **widget_serialization)

ipyopenlayers/nbextension/extension.js

@@ -0,0 +1,17 @@
+// Entry point for the notebook bundle containing custom model definitions.
+//
+define(function() {
+    "use strict";
+
+    window['requirejs'].config({
+        map: {
+            '*': {
+                'ipyopenlayers': 'nbextensions/ipyopenlayers/index',
+            },
+        }
+    });
+    // Export the required load_ipython_extension function
+    return {
+        load_ipython_extension : function() {}
+    };
+});

src/widget.ts

@@ -7,9 +7,10 @@ import {
   unpack_models,
   ViewList,
 } from '@jupyter-widgets/base';
-import { TileLayerModel, TileLayerView } from './tilelayer';
+import { LayerModel, LayerView } from './layer';
 import { BaseOverlayModel, BaseOverlayView } from './baseoverlay';
 import { BaseControlModel, BaseControlView } from './basecontrol';
+import { ViewObjectEventTypes } from 'ol/View';
 
 import { Map } from 'ol';
 import TileLayer from 'ol/layer/Tile';
@@ -18,7 +19,7 @@ import 'ol/ol.css';
 import { MODULE_NAME, MODULE_VERSION } from './version';
 import '../css/widget.css';
 import { useGeographic } from 'ol/proj';
-
+import { ObjectEvent } from 'ol/Object';
 export * from './imageoverlay';
 export * from './geojson';
 export * from './video_overlay';
@@ -70,10 +71,8 @@ export class MapView extends DOMWidgetView {
   render() {
     useGeographic();
     this.el.classList.add('custom-widget');
-
     this.mapContainer = document.createElement('div');
-    this.mapContainer.style.height = '500px';
-    this.mapContainer.style.width = '100%';
+    this.mapContainer.className = 'ol-container';
     this.el.appendChild(this.mapContainer);
 
     this.layerViews = new ViewList(
@@ -102,6 +101,18 @@ export class MapView extends DOMWidgetView {
       layers: [new TileLayer()],
     });
 
+    this.map.getView().on('change:center', () => {
+      this.model.set('center', this.map.getView().getCenter());
+      this.model.save_changes();
+    });
+
+    this.map
+      .getView()
+      .on('change:resolution' as ViewObjectEventTypes, (event: ObjectEvent) => {
+        this.model.set('zoom', this.map.getView().getZoom());
+        this.model.save_changes();
+      });
+
     this.layersChanged();
     this.overlayChanged();
     this.controlChanged();
@@ -113,7 +124,7 @@ export class MapView extends DOMWidgetView {
   }
 
   layersChanged() {
-    const layers = this.model.get('layers') as TileLayerModel[];
+    const layers = this.model.get('layers') as LayerModel[];
     this.layerViews.update(layers);
   }
 
@@ -141,7 +152,7 @@ export class MapView extends DOMWidgetView {
     }
   }
 
-  removeLayerView(child_view: TileLayerView) {
+  removeLayerView(child_view: LayerView) {
     this.map.removeLayer(child_view.obj);
     child_view.remove();
   }
@@ -158,8 +169,8 @@ export class MapView extends DOMWidgetView {
     child_view.remove();
   }
 
-  async addLayerModel(child_model: TileLayerModel) {
-    const view = await this.create_child_view<TileLayerView>(child_model, {
+  async addLayerModel(child_model: LayerModel) {
+    const view = await this.create_child_view<LayerView>(child_model, {
       map_view: this,
     });
     this.map.addLayer(view.obj);
@@ -198,7 +209,7 @@ export class MapView extends DOMWidgetView {
   imageElement: HTMLImageElement;
   mapContainer: HTMLDivElement;
   map: Map;
-  layerViews: ViewList<TileLayerView>;
+  layerViews: ViewList<LayerView>;
   overlayViews: ViewList<BaseOverlayView>;
   controlViews: ViewList<BaseControlView>;
 }