In [ ]:
from __future__ import print_function

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

from ipywidgets import HTML

Map


In [ ]:
center = [34.6252978589571, -77.34580993652344]
zoom = 10

In [ ]:
m = Map(center=center, zoom=zoom)
m

In [ ]:
m.interact(zoom=(5,10,1))

In [ ]:
m.clear_layers()

In [ ]:
m.add_layer(basemaps.Esri.DeLorme)

In [ ]:
print(m.center)
print(m.zoom)

Marker


In [ ]:
mark = Marker(location=m.center)

In [ ]:
m += mark

In [ ]:
mark.interact(opacity=(0.0,1.0,0.01))

In [ ]:
html_widget = HTML(
    value="""
        <div>Some html with a list of items
        <ul class='list-group'>
            <li class='list-group-item'>Item A</li>
            <li class='list-group-item'>Item B</li>
            <li class='list-group-item'>Item C</li>
        </ul></div>""",
    placeholder='',
    description='',
)

In [ ]:
mark.popup = html_widget

Marker Cluster

When we have many markers on a map, it is helpful to cluster them together at high zoom levels. First, we create a small grid of markers.


In [ ]:
xscale = 5
yscale = 10

x = [m.center[0] + i * xscale * .05 for i in (-1,0,1)]
y = [m.center[1] + i * yscale * .05 for i in (-1,0,1)]

from itertools import product
locations = product(x, y)
markers = [Marker(location=loc) for loc in locations]

Then we add them all to a MarkerCluster, which automatically clusters them at appropriate zoom levels.


In [ ]:
marker_cluster = MarkerCluster(markers = markers)
m += marker_cluster

In [ ]:
m.remove_layer(marker_cluster)

Image Overlay


In [ ]:
io = ImageOverlay(url='http://ipython.org/_static/IPy_header.png', bounds=m.bounds)
m.add_layer(io)

In [ ]:
m.bounds

In [ ]:
m

In [ ]:
m.remove_layer(io)

Polyline


In [ ]:
pl = Polyline(locations=m.bounds_polygon)
m += pl

In [ ]:
pl.fill_color = '#F00'
pl.fill_opacity = 1.0

In [ ]:
m -= pl

Polygon


In [ ]:
pg = Polygon(locations=m.bounds_polygon, weight=3,
            color='#F00', opacity=0.8, fill_opacity=0.8,
            fill_color='#0F0')
m += pg

In [ ]:
m -= pg

Rectangle


In [ ]:
r = Rectangle(bounds=m.bounds, weight=10, fill_opacity=0.0)
m += r

In [ ]:
m -= r

Circle


In [ ]:
c = Circle(location=m.center)
m.add_layer(c)

In [ ]:
c.interact(weight=(0,10,1), opacity=(0.0,1.0,0.01))

In [ ]:
c.model_id

In [ ]:
m.remove_layer(c)

In [ ]:
c.close()

In [ ]:
m.layers

In [ ]:
c2 = Circle(location=m.center, radius=30, weight=1,
            color='#F00', opacity=1.0, fill_opacity=1.0,
            fill_color='#0F0')
m.add_layer(c2)

In [ ]:
c2.model_id

In [ ]:
m.remove_layer(c2)

In [ ]:
c2.close()

CircleMarker


In [ ]:
cm = CircleMarker(location=m.center, radius=30, weight=2,
                  color='#F00', opacity=1.0, fill_opacity=1.0,
                  fill_color='#0F0')
m.add_layer(cm)

In [ ]:
cm.model_id

In [ ]:
m.remove_layer(cm)

In [ ]:
cm.close()

Multiple Circles


In [ ]:
circles = []
for pos in m.bounds_polygon:
    c = Circle(location=pos, radius=1000)
    circles.append(c)
    m.add_layer(c)

In [ ]:
for c in circles:
    m.remove_layer(c)

In [ ]:


In [ ]: