

In [1]:

    
from __future__ import print_function

from ipyleaflet import (
    Map,
    Marker,
    TileLayer, ImageOverlay,
    Polyline, Polygon, Rectangle, Circle, CircleMarker,
    GeoJSON,
    DrawControl
)

from traitlets import link



In [2]:

    
center = [34.6252978589571, -77.34580993652344]
zoom = 10



In [3]:

    
m = Map(center=center, zoom=zoom)
m



In [ ]:

    
m.zoom

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.



In [4]:

    
dc = DrawControl(marker={'shapeOptions': {'color': '#0000FF'}},
                 rectangle={'shapeOptions': {'color': '#0000FF'}},
                 circle={'shapeOptions': {'color': '#0000FF'}},
                 circlemarker={},
                 )

def handle_draw(self, action, geo_json):
    print(action)
    print(geo_json)

dc.on_draw(handle_draw)
m.add_control(dc)

In addition, the DrawControl also has last_action and last_draw attributes that are created dynamicaly anytime a new drawn path arrives.



In [7]:

    
dc.last_action









    Out[7]:





'deleted'



In [8]:

    
dc.last_draw









    Out[8]:





{'type': 'Feature',
 'properties': {'style': {'stroke': True,
   'color': '#3388ff',
   'weight': 4,
   'opacity': 0.5,
   'fill': True,
   'fillColor': None,
   'fillOpacity': 0.2,
   'clickable': True}},
 'geometry': {'type': 'Polygon',
  'coordinates': [[[-77.40837, 34.68657],
    [-77.459867, 34.851906],
    [-77.637963, 34.768046],
    [-77.40837, 34.68657]]]}}

It's possible to remove all drawings from the map



In [9]:

    
dc.clear_circles()



In [ ]:

    
dc.clear_polylines()



In [ ]:

    
dc.clear_rectangles()



In [ ]:

    
dc.clear_markers()



In [ ]:

    
dc.clear_polygons()



In [ ]:

    
dc.clear()

Let's draw a second map and try to import this GeoJSON data into it.



In [10]:

    
m2 = Map(center=center, zoom=zoom, layout=dict(width='600px', height='400px'))
m2

We can use link to synchronize traitlets of the two maps:



In [11]:

    
map_center_link = link((m, 'center'), (m2, 'center'))
map_zoom_link = link((m, 'zoom'), (m2, 'zoom'))



In [12]:

    
new_poly = GeoJSON(data=dc.last_draw)



In [13]:

    
m2.add_layer(new_poly)

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.

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.



In [ ]:

    
dc2 = DrawControl(polygon={'shapeOptions': {'color': '#0000FF'}}, polyline={},
                  circle={'shapeOptions': {'color': '#0000FF'}})
m2.add_control(dc2)



In [ ]: