examples/DrawControl.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "from __future__ import print_function\n",
    "\n",
    "from ipyleaflet import (\n",
    "    Map,\n",
    "    Marker,\n",
    "    TileLayer, ImageOverlay,\n",
    "    Polyline, Polygon, Rectangle, Circle, CircleMarker,\n",
    "    GeoJSON,\n",
    "    DrawControl\n",
    ")\n",
    "\n",
    "from traitlets import link"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "center = [34.6252978589571, -77.34580993652344]\n",
    "zoom = 10"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d66a41b7a6a84c429321288ffeb292e5"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "m = Map(center=center, zoom=zoom)\n",
    "m"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "10"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "m.zoom"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Now create the `DrawControl` and add it to the `Map` using `add_control`. We also register a handler for draw events. This will fire when a drawn path is created, edited or deleted (there are the actions). The  `geo_json` argument is the serialized geometry of the drawn path, along with its embedded style."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "dc = DrawControl()\n",
    "\n",
    "def handle_draw(self, action, geo_json):\n",
    "    print(action)\n",
    "    print(geo_json)\n",
    "\n",
    "dc.on_draw(handle_draw)\n",
    "m.add_control(dc)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "In addition, the `DrawControl` also has `last_action` and `last_draw` attributes that are created dynamicaly anytime a new drawn path arrives."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "u''"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dc.last_action"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "{'geometry': None, 'type': 'Feature'}"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "dc.last_draw"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Let's draw a second map and try to import this GeoJSON data into it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "d98f56f215c84a39b08ac51285356dca"
      }
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "m2 = Map(center=center, zoom=zoom, layout=dict(width='600px', height='400px'))\n",
    "m2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "We can use `link` to synchronize traitlets of the two maps:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "map_center_link = link((m, 'center'), (m2, 'center'))\n",
    "map_zoom_link = link((m, 'zoom'), (m2, 'zoom'))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "new_poly = GeoJSON(data=dc.last_draw)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "m2.add_layer(new_poly)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Note that the style is preserved! If you wanted to change the style, you could edit the `properties.style` dictionary of the GeoJSON data. Or, you could even style the original path in the `DrawControl` by setting the `polygon` dictionary of that object. See the code for details."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "Now let's add a `DrawControl` to this second map. For fun we will disable lines and enable circles as well and change the style a bit."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "dc2 = DrawControl(polygon={'shapeOptions': {'color': '#0000FF'}}, polyline={},\n",
    "                  circle={'shapeOptions': {'color': '#0000FF'}})\n",
    "m2.add_control(dc2)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.13"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {
     "478e6cef3593410a9fa665319769accd": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletDrawControlModel",
      "state": {
       "_model_module_version": "*",
       "_view_module_version": "*",
       "layer": "IPY_MODEL_f1a921cf57ac4d8582176b88850b6856",
       "msg_throttle": 1
      }
     },
     "607de2ce93564a4b88a57beb650afcf6": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.1.1",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.1.1",
       "_view_module_version": "~2.1.1",
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "7c478497d25a4851a4392aef22e51740": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletFeatureGroupModel",
      "state": {
       "_model_module_version": "*",
       "_view_module_version": "*",
       "msg_throttle": 1
      }
     },
     "abd4dea1189b42ea8a0e021a78d1da97": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletTileLayerModel",
      "state": {
       "_model_module_version": "*",
       "_view_module_version": "*",
       "msg_throttle": 1,
       "options": [
        "opacity",
        "attribution",
        "max_zoom",
        "detect_retina",
        "min_zoom",
        "tile_size"
       ]
      }
     },
     "ba4b6bd233184896adc1125666c45456": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletGeoJSONModel",
      "state": {
       "_model_module_version": "*",
       "_view_module_version": "*",
       "data": {
        "geometry": null,
        "type": "Feature"
       },
       "msg_throttle": 1
      }
     },
     "cc99e61fcd52492f822317111167e2b3": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletTileLayerModel",
      "state": {
       "_model_module_version": "*",
       "_view_module_version": "*",
       "msg_throttle": 1,
       "options": [
        "opacity",
        "attribution",
        "max_zoom",
        "detect_retina",
        "min_zoom",
        "tile_size"
       ]
      }
     },
     "d66a41b7a6a84c429321288ffeb292e5": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletMapModel",
      "state": {
       "_dom_classes": [],
       "_east": -76.7889404296875,
       "_model_module_version": "*",
       "_north": 34.85100201839405,
       "_south": 34.39897808891371,
       "_view_module_version": "*",
       "_west": -77.90130615234375,
       "center": [
        34.6252978589571,
        -77.34512329101562
       ],
       "controls": [
        "IPY_MODEL_478e6cef3593410a9fa665319769accd"
       ],
       "layers": [
        "IPY_MODEL_cc99e61fcd52492f822317111167e2b3"
       ],
       "layout": "IPY_MODEL_607de2ce93564a4b88a57beb650afcf6",
       "msg_throttle": 1,
       "options": [
        "keyboard_pan_offset",
        "tap",
        "attribution_control",
        "max_zoom",
        "min_zoom",
        "bounce_at_zoom_limits",
        "keyboard",
        "scroll_wheel_zoom",
        "dragging",
        "inertia_max_speed",
        "close_popup_on_click",
        "zoom_control",
        "box_zoom",
        "double_click_zoom",
        "tap_tolerance",
        "zoom_start",
        "keyboard_zoom_offset",
        "inertia_deceleration",
        "inertia",
        "center",
        "zoom",
        "world_copy_jump",
        "zoom_animation_threshold",
        "touch_zoom"
       ],
       "zoom": 10
      }
     },
     "d98f56f215c84a39b08ac51285356dca": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletMapModel",
      "state": {
       "_dom_classes": [],
       "_east": -76.7889404296875,
       "_model_module_version": "*",
       "_north": 34.85100201839405,
       "_south": 34.39897808891371,
       "_view_module_version": "*",
       "_west": -77.90130615234375,
       "center": [
        34.6252978589571,
        -77.34512329101562
       ],
       "controls": [
        "IPY_MODEL_f1c30e276b6a46a2abd08d964f548ed4"
       ],
       "layers": [
        "IPY_MODEL_abd4dea1189b42ea8a0e021a78d1da97",
        "IPY_MODEL_ba4b6bd233184896adc1125666c45456"
       ],
       "layout": "IPY_MODEL_ee6def09bba64935ab6ded53df6f97dd",
       "msg_throttle": 1,
       "options": [
        "keyboard_pan_offset",
        "tap",
        "attribution_control",
        "max_zoom",
        "min_zoom",
        "bounce_at_zoom_limits",
        "keyboard",
        "scroll_wheel_zoom",
        "dragging",
        "inertia_max_speed",
        "close_popup_on_click",
        "zoom_control",
        "box_zoom",
        "double_click_zoom",
        "tap_tolerance",
        "zoom_start",
        "keyboard_zoom_offset",
        "inertia_deceleration",
        "inertia",
        "center",
        "zoom",
        "world_copy_jump",
        "zoom_animation_threshold",
        "touch_zoom"
       ],
       "zoom": 10
      }
     },
     "ee6def09bba64935ab6ded53df6f97dd": {
      "model_module": "jupyter-js-widgets",
      "model_module_version": "~2.1.1",
      "model_name": "LayoutModel",
      "state": {
       "_model_module_version": "~2.1.1",
       "_view_module_version": "~2.1.1",
       "align_self": "stretch",
       "height": "400px"
      }
     },
     "f1a921cf57ac4d8582176b88850b6856": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletFeatureGroupModel",
      "state": {
       "_model_module_version": "*",
       "_view_module_version": "*",
       "msg_throttle": 1
      }
     },
     "f1c30e276b6a46a2abd08d964f548ed4": {
      "model_module": "jupyter-leaflet",
      "model_module_version": "*",
      "model_name": "LeafletDrawControlModel",
      "state": {
       "_model_module_version": "*",
       "_view_module_version": "*",
       "circle": {
        "shapeOptions": {
         "color": "#0000FF"
        }
       },
       "layer": "IPY_MODEL_7c478497d25a4851a4392aef22e51740",
       "msg_throttle": 1,
       "polygon": {
        "shapeOptions": {
         "color": "#0000FF"
        }
       },
       "polyline": {}
      }
     }
    },
    "version_major": 1,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}