#!/usr/bin/env python
# coding: utf-8

# In[ ]:


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

from traitlets import link


# In[ ]:


center = [34.6252978589571, -77.34580993652344]
zoom = 10


# In[ ]:


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


# In[ ]:


m.zoom


# Now create the `DrawControl` and add it to the `Map` using `add`. 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[ ]:


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


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


dc.on_draw(handle_draw)
m.add(dc)


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

# In[ ]:


dc.last_action


# In[ ]:


dc.last_draw


# It's possible to remove all drawings from the map

# In[ ]:


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[ ]:


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[ ]:


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


# In[ ]:


new_poly = GeoJSON(data=dc.last_draw)


# In[ ]:


m2.add(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(dc2)