Update mapping example (clear map before drawing tiles)

Signed-off-by: martinRenou <[email protected]>

Author: martinRenou

examples/mapping.ipynb

@@ -7,10 +7,12 @@
    "outputs": [],
    "source": [
     "from math import pow, cos, pi, radians, degrees, atan, tan, sinh, log\n",
-    "from ipywidgets import Image, Output, IntSlider\n",
-    "from ipycanvas import Canvas, MultiCanvas\n",
+    "\n",
+    "from ipywidgets import Image, IntSlider\n",
+    "\n",
     "from ipyevents import Event\n",
-    "import asyncio"
+    "\n",
+    "from ipycanvas import Canvas, MultiCanvas, hold_canvas"
    ]
   },
   {
@@ -19,6 +21,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "import asyncio\n",
+    "\n",
     "class Timer:\n",
     "    def __init__(self, timeout, callback):\n",
     "        self._timeout = timeout\n",
@@ -34,17 +38,17 @@
     "\n",
     "def debounce(wait):\n",
     "    \"\"\" Decorator that will postpone a function's\n",
-    "        execution until after wait seconds\n",
+    "        execution until after `wait` seconds\n",
     "        have elapsed since the last time it was invoked. \"\"\"\n",
     "    def decorator(fn):\n",
+    "        timer = None\n",
     "        def debounced(*args, **kwargs):\n",
+    "            nonlocal timer\n",
     "            def call_it():\n",
     "                fn(*args, **kwargs)\n",
-    "            try:\n",
-    "                debounced.t.cancel()\n",
-    "            except(AttributeError):\n",
-    "                pass\n",
-    "            debounced.t = Timer(wait, call_it)\n",
+    "            if timer is not None:\n",
+    "                timer.cancel()\n",
+    "            timer = Timer(wait, call_it)\n",
     "        return debounced\n",
     "    return decorator"
    ]
@@ -150,15 +154,6 @@
     "    return {'pix': xys, 'tile': xyn}"
    ]
   },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "out = Output(layout={'border': '1px solid black'})"
-   ]
-  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -184,22 +179,27 @@
     "        self[1].on_mouse_move(self.mouse_move_handler)\n",
     "        self[1].on_mouse_up(self.mouse_up_handler)\n",
     "        self[1].on_mouse_out(self.mouse_out_handler)\n",
-    "    \n",
-    "    #@out.capture()\n",
+    "\n",
     "    def show(self, lat=None, lon=None):\n",
     "        if lat is None:\n",
     "            lat = self.lat\n",
     "        if lon is None:\n",
     "            lon = self.lon\n",
     "        x, y = latlon2xy(lat, lon, self.z)\n",
     "        grid = get_tile_grid(x, y, self.width, self.height, self.tile_nb)\n",
-    "        for i, row in enumerate(grid['pix']):\n",
-    "            for j, col in enumerate(row):\n",
-    "                dx, dy = col\n",
-    "                x, y = grid['tile'][i][j]\n",
-    "                url = f'https://tile.openstreetmap.org/{self.z}/{x}/{y}.png'\n",
-    "                tile = Image.from_url(url)\n",
-    "                self[0].draw_image(tile, dx, dy)\n",
+    "        \n",
+    "        with hold_canvas(self):\n",
+    "            self[0].fill_style = '#aad3df'\n",
+    "            self[0].fill_rect(0, 0, self.size[0], self.size[1])\n",
+    "\n",
+    "            for i, row in enumerate(grid['pix']):\n",
+    "                for j, col in enumerate(row):\n",
+    "                    dx, dy = col\n",
+    "                    x, y = grid['tile'][i][j]\n",
+    "                    url = f'https://tile.openstreetmap.org/{self.z}/{x}/{y}.png'\n",
+    "                    tile = Image.from_url(url)\n",
+    "                    self[0].draw_image(tile, dx, dy)\n",
+    "\n",
     "    def mouse_down_handler(self, pixel_x, pixel_y):\n",
     "        self.dragging = True\n",
     "        self.x_mouse = pixel_x\n",
@@ -237,36 +237,6 @@
     "m = Map(788, 788, 7, 49, 2)\n",
     "m"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "d = Event(source=m, watched_events=['wheel'])\n",
-    "\n",
-    "@out.capture()\n",
-    "def zoom(event):\n",
-    "    m.z -= event['deltaY'] // 3\n",
-    "    m.z = max(m.z, 1)\n",
-    "    m.z = min(m.z, 19)\n",
-    "    print(m.z)\n",
-    "    m.tile_nb = numTiles(m.z)\n",
-    "    m.x, m.y = latlon2xy(m.lat, m.lon, m.z)\n",
-    "    m.show()\n",
-    "\n",
-    "d.on_dom_event(zoom)"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "out"
-   ]
   }
  ],
  "metadata": {