Update the example notebook Subitems.ipynb.

examples/Subitems.ipynb

@@ -2,56 +2,159 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 5,
    "metadata": {},
    "outputs": [],
    "source": [
     "import ipyleaflet\n",
+    "from ipyleaflet import Map, Popup, Marker, Choropleth, MagnifyingGlass, ColormapControl\n",
+    "from ipywidgets import HTML\n",
     "import json\n",
     "import pandas as pd\n",
     "from ipywidgets import link, FloatSlider\n",
     "from branca.colormap import linear\n",
-    "import random\n",
-    "\n",
     "center = (43, -100)\n",
-    "zoom = 4\n",
+    "zoom = 4"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "## Example1 with Chropleth layer\n",
     "geo_json_data = json.load(open(\"us-states.json\"))\n",
-    "m = ipyleaflet.Map(center=center, zoom=zoom)\n",
+    "m1 = Map(center=center, zoom=zoom)\n",
     "unemployment = pd.read_csv(\"US_Unemployment_Oct2012.csv\")\n",
     "unemployment = dict(\n",
     "    zip(unemployment[\"State\"].tolist(), unemployment[\"Unemployment\"].tolist())\n",
     ")\n",
+    "message1 = HTML()\n",
+    "message1.value = \"Try clicking the marker!\"\n",
     "\n",
-    "marker = ipyleaflet.Marker(location=center, draggable=False)\n",
+    "popup1 = Popup(\n",
+    "    location=center,\n",
+    "    child=message1,\n",
+    "    close_button=False,\n",
+    "    auto_close=False,\n",
+    "    close_on_escape_key=False\n",
+    ")\n",
     "\n",
-    "layer = ipyleaflet.Choropleth(\n",
+    "layer1 = Choropleth(\n",
     "    geo_data=geo_json_data,\n",
     "    choro_data=unemployment,\n",
     "    colormap=linear.YlOrRd_04,\n",
     "    style={\"fillOpacity\": 0.8, \"dashArray\": \"5, 5\"},\n",
-    "    subitems= [marker]\n",
-    ")\n",
-    "\n",
-    "m.add(layer)"
+    "    subitems= (popup1,)\n",
+    ")"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 9,
    "metadata": {},
    "outputs": [],
    "source": [
-    "magnifying_glass = ipyleaflet.MagnifyingGlass(layers=[layer], zoom_offset=1)\n",
-    "colormap_control = ipyleaflet.ColormapControl(\n",
+    "magnifying_glass1 = ipyleaflet.MagnifyingGlass(layers=[layer1], zoom_offset=1)\n",
+    "colormap_control1 = ipyleaflet.ColormapControl(\n",
     "    caption='Unemployment rate',\n",
-    "    colormap=layer.colormap,\n",
-    "    value_min=layer.value_min,\n",
-    "    value_max=layer.value_max,\n",
+    "    colormap=layer1.colormap,\n",
+    "    value_min=layer1.value_min,\n",
+    "    value_max=layer1.value_max,\n",
     "    position='topright',\n",
     "    transparent_bg=True\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "layer1.subitems : 3\n"
+     ]
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "0171f2e132c34073b7612e245527a63d",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Map(center=[43, -100], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_t…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "layer1.subitems = layer1.subitems+(colormap_control1, magnifying_glass1)\n",
+    "print('layer1.subitems :', len(layer1.subitems))\n",
+    "m1.add(layer1)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 11,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "d7b60d8d1aae43f98b4c702d1392fd27",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Map(center=[40.73061, -73.935242], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title',…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "# Example2 with a basemap\n",
+    "from ipyleaflet import Map, Marker, AwesomeIcon, basemaps, basemap_to_tiles\n",
+    "center = (40.730610, -73.935242)\n",
+    "zoom =10\n",
+    "m2 = Map(center=center, zoom=zoom)\n",
+    "icon1 = AwesomeIcon(\n",
+    "    name='gear',\n",
+    "    marker_color='blue',\n",
+    "    icon_color='darkblue',\n",
+    "    spin=True\n",
     ")\n",
-    "layer.subitems = [magnifying_glass, colormap_control]\n",
-    "m"
+    "\n",
+    "marker1 = ipyleaflet.Marker(icon=icon1, location=(center[0], center[1] - 0.25))\n",
+    "\n",
+    "icon2 = ipyleaflet.AwesomeIcon(\n",
+    "    name='gear',\n",
+    "    marker_color='green',\n",
+    "    icon_color='darkgreen',\n",
+    "    spin=True\n",
+    ")\n",
+    "\n",
+    "marker2 = Marker(icon=icon2, location=(center[0], center[1] + 0.25))\n",
+    "\n",
+    "layer2 = basemap_to_tiles(basemaps.Strava.Water, subitems= (marker1, marker2))\n",
+    "m2.add(layer2)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "print('len(layer2.subitems):', len(layer2.subitems))"
    ]
   }
  ],