Overlay

examples/introduction.ipynb

@@ -9,229 +9,148 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 26,
    "metadata": {},
    "outputs": [],
    "source": [
-    "from ipyopenlayers import Map, TileLayer"
+    "from ipyopenlayers import Map, TileLayer, ImageOverlay"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 27,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "757d5de3cec24c4e83d186b710dcfa59",
+       "model_id": "b5ca1d6e4568477b9b74c923a0be1262",
        "version_major": 2,
        "version_minor": 0
       },
       "text/plain": [
        "Map(center=[0.0, 0.0])"
       ]
      },
-     "execution_count": 2,
+     "execution_count": 27,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
-    "m = Map()\n",
+    "m = Map(center=[0.0, 0.0], zoom=2)\n",
     "m"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "m.zoom=4\n",
-    "\n"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 3,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "m.center=[10.0,5.0]"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 6,
-   "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": 7,
-   "metadata": {
-    "scrolled": true
-   },
-   "outputs": [],
-   "source": [
-    "m.add_layer(layere)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": 8,
+   "execution_count": 28,
    "metadata": {},
    "outputs": [
     {
      "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "2bf7058855764a519a4ff61ea74324a7",
+       "version_major": 2,
+       "version_minor": 0
+      },
       "text/plain": [
-       "[TileLayer(url='https://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png')]"
+       "ImageOverLayer(image_bounds=[0, 0])"
       ]
      },
-     "execution_count": 8,
+     "execution_count": 28,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
-    "m.layers"
+    "image=ImageOverlay()\n",
+    "image"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 9,
+   "execution_count": 29,
    "metadata": {},
    "outputs": [],
    "source": [
-    "m.remove_layer(layere)"
+    "image.image_url=\"https://i.imgur.com/06Q1fSz.png\""
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 10,
+   "execution_count": 30,
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "[]"
-      ]
-     },
-     "execution_count": 10,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
-    "m.layers"
+    "image.image_url=\"\""
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
+   "execution_count": 31,
    "metadata": {},
    "outputs": [],
    "source": [
-    "m.clear_layers()"
+    "m.add_overlay(image)"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 28,
+   "execution_count": 32,
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "[]"
-      ]
-     },
-     "execution_count": 28,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
-    "m.layers"
+    "image.image_bounds=[-70,70]"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 12,
+   "execution_count": null,
    "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])"
+       "[ImageOverLayer(image_bounds=[-70, 70])]"
       ]
      },
-     "execution_count": 12,
+     "execution_count": 33,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
-    "m1 = Map(center=[0.0, 0.0], zoom=2)\n",
-    "m1"
+    "m.overlays"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 13,
+   "execution_count": 34,
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "2.0"
-      ]
-     },
-     "execution_count": 13,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
-    "m1.zoom\n"
+    "imaget=ImageOverlay()\n",
+    "imaget.image_url=\"https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg\"\n"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 14,
+   "execution_count": 35,
    "metadata": {},
-   "outputs": [
-    {
-     "data": {
-      "text/plain": [
-       "[0.0, 0.0]"
-      ]
-     },
-     "execution_count": 14,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
+   "outputs": [],
    "source": [
-    "m1.center"
+    "m.add_overlay(imaget)"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 36,
    "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "m.remove_overlay(image)"
+   ]
   }
  ],
  "metadata": {

ipyopenlayers/example.py

@@ -8,9 +8,10 @@
 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
+
 def_loc = [0.0, 0.0]
 
 class TileLayer(Widget):
@@ -22,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 ImageOverlay (DOMWidget):
+
+   _model_name = Unicode('ImageOverlayModel').tag(sync=True)
+   _model_module = Unicode(module_name).tag(sync=True)
+   _model_module_version = Unicode(module_version).tag(sync=True)
+   _view_name = Unicode('ImageOverlayView').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)
@@ -36,6 +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)
+    overlays=List(Instance(ImageOverlay)).tag(sync=True, **widget_serialization)
 
     def __init__(self, center=None, zoom=None, **kwargs):
         super().__init__(**kwargs)
@@ -49,10 +63,14 @@ def __init__(self, center=None, zoom=None, **kwargs):
     def add_layer(self, layer):
         self.layers = self.layers + [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_overlay(self, overlay):
+        self.overlays = [x for x in self.overlays if x != overlay]
 
     def clear_layers(self):
-        self.layers = []
-
-
+        self.layers = []

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<any> {
     if (moduleName === '@jupyter-widgets/base') {
       if ((widgets as any)[className]) {
@@ -106,7 +106,7 @@ export interface Constructor<T> {
 
 export function createTestModel<T extends widgets.WidgetModel>(
   constructor: Constructor<T>,
-  attributes?: any
+  attributes?: any,
 ): T {
   const id = widgets.uuid();
   const widget_manager = new DummyManager();

src/plugin.ts

@@ -32,7 +32,7 @@ export default examplePlugin;
  */
 function activateWidgetExtension(
   app: Application<Widget>,
-  registry: IJupyterWidgetRegistry
+  registry: IJupyterWidgetRegistry,
 ): void {
   registry.registerWidget({
     name: MODULE_NAME,