Shapes: Circles, Polylines, Polygons & Rectangles¶

This notebook shows how to add various geometric shapes to a Leaflet map, including:

• Circle markers (fixed pixel radius)
• Geographic circles (radius in meters)
• Polylines (with dashed lines)
• Polygons
• Rectangles

All shapes support popups, tooltips, and custom styling.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import LeafletMap

from anymap_ts import LeafletMap

Circle markers vs. geographic circles¶

• Circle markers have a fixed pixel radius (they stay the same size at all zoom levels)
• Geographic circles have a radius in meters (they scale with the map)

In [ ]:

m = LeafletMap(center=[-73.95, 40.73], zoom=11, controls={})
m.add_basemap("CartoDB.Positron")
m.add_control("zoom", position="topleft")

m.add_circle_marker(
    -73.9857,
    40.7484,
    radius=12,
    name="empire-state",
    color="#e74c3c",
    fill_color="#e74c3c",
    fill_opacity=0.8,
    popup="<b>Empire State Building</b><br>Circle Marker (12px radius)",
    tooltip="Empire State Building",
)

m.add_circle(
    -73.9712,
    40.7831,
    radius=2000,
    name="central-park-area",
    color="#2ecc71",
    fill_color="#2ecc71",
    fill_opacity=0.15,
    popup="<b>Central Park Area</b><br>Geographic circle (2km radius)",
    tooltip="Central Park vicinity",
)

m.add_circle(
    -74.0060,
    40.7128,
    radius=1500,
    name="downtown",
    color="#3498db",
    fill_color="#3498db",
    fill_opacity=0.2,
    popup="<b>Downtown Manhattan</b><br>1.5km radius",
)

m

m = LeafletMap(center=[-73.95, 40.73], zoom=11, controls={}) m.add_basemap("CartoDB.Positron") m.add_control("zoom", position="topleft") m.add_circle_marker( -73.9857, 40.7484, radius=12, name="empire-state", color="#e74c3c", fill_color="#e74c3c", fill_opacity=0.8, popup="Empire State Building
Circle Marker (12px radius)", tooltip="Empire State Building", ) m.add_circle( -73.9712, 40.7831, radius=2000, name="central-park-area", color="#2ecc71", fill_color="#2ecc71", fill_opacity=0.15, popup="Central Park Area
Geographic circle (2km radius)", tooltip="Central Park vicinity", ) m.add_circle( -74.0060, 40.7128, radius=1500, name="downtown", color="#3498db", fill_color="#3498db", fill_opacity=0.2, popup="Downtown Manhattan
1.5km radius", ) m

Polylines¶

Add polylines for routes and paths. Supports dashed lines and custom colors.

In [ ]:

m2 = LeafletMap(center=[-122.43, 37.77], zoom=13, controls={})
m2.add_basemap("OpenStreetMap")
m2.add_control("zoom", position="topleft")

# Solid route
route = [
    [-122.4194, 37.7749],
    [-122.4089, 37.7856],
    [-122.4058, 37.7898],
    [-122.4120, 37.8024],
    [-122.4178, 37.8085],
]
m2.add_polyline(
    route,
    name="route-solid",
    color="#e74c3c",
    weight=4,
    popup="Main Route",
)

# Dashed alternate route
alt_route = [
    [-122.4194, 37.7749],
    [-122.4310, 37.7820],
    [-122.4380, 37.7950],
    [-122.4300, 37.8050],
    [-122.4178, 37.8085],
]
m2.add_polyline(
    alt_route,
    name="route-dashed",
    color="#3498db",
    weight=3,
    dash_array="10 6",
    popup="Alternate Route",
)

m2.add_marker(route[0][0], route[0][1], popup="Start", tooltip="Start")
m2.add_marker(route[-1][0], route[-1][1], popup="End", tooltip="End")

m2

m2 = LeafletMap(center=[-122.43, 37.77], zoom=13, controls={}) m2.add_basemap("OpenStreetMap") m2.add_control("zoom", position="topleft") # Solid route route = [ [-122.4194, 37.7749], [-122.4089, 37.7856], [-122.4058, 37.7898], [-122.4120, 37.8024], [-122.4178, 37.8085], ] m2.add_polyline( route, name="route-solid", color="#e74c3c", weight=4, popup="Main Route", ) # Dashed alternate route alt_route = [ [-122.4194, 37.7749], [-122.4310, 37.7820], [-122.4380, 37.7950], [-122.4300, 37.8050], [-122.4178, 37.8085], ] m2.add_polyline( alt_route, name="route-dashed", color="#3498db", weight=3, dash_array="10 6", popup="Alternate Route", ) m2.add_marker(route[0][0], route[0][1], popup="Start", tooltip="Start") m2.add_marker(route[-1][0], route[-1][1], popup="End", tooltip="End") m2

Polygons and Rectangles¶

In [ ]:

m3 = LeafletMap(center=[0.1, 51.5], zoom=12, controls={})
m3.add_basemap("CartoDB.Positron")
m3.add_control("zoom", position="topleft")

# A polygon outlining an area
m3.add_polygon(
    [
        [-0.09, 51.51],
        [-0.06, 51.51],
        [-0.04, 51.52],
        [-0.06, 51.53],
        [-0.09, 51.52],
    ],
    name="area-polygon",
    color="#9b59b6",
    fill_color="#9b59b6",
    fill_opacity=0.3,
    popup="Custom Polygon",
    tooltip="A polygon",
)

# A rectangle bounding box
m3.add_rectangle(
    bounds=(-0.15, 51.49, -0.10, 51.52),
    name="bounding-box",
    color="#e67e22",
    fill_color="#f39c12",
    fill_opacity=0.15,
    popup="Bounding Rectangle",
    tooltip="Rectangle",
)

m3

m3 = LeafletMap(center=[0.1, 51.5], zoom=12, controls={}) m3.add_basemap("CartoDB.Positron") m3.add_control("zoom", position="topleft") # A polygon outlining an area m3.add_polygon( [ [-0.09, 51.51], [-0.06, 51.51], [-0.04, 51.52], [-0.06, 51.53], [-0.09, 51.52], ], name="area-polygon", color="#9b59b6", fill_color="#9b59b6", fill_opacity=0.3, popup="Custom Polygon", tooltip="A polygon", ) # A rectangle bounding box m3.add_rectangle( bounds=(-0.15, 51.49, -0.10, 51.52), name="bounding-box", color="#e67e22", fill_color="#f39c12", fill_opacity=0.15, popup="Bounding Rectangle", tooltip="Rectangle", ) m3

Add a legend¶

In [ ]:

m3.add_legend(
    items=[
        {"color": "#9b59b6", "label": "Custom Polygon"},
        {"color": "#e67e22", "label": "Bounding Rectangle"},
    ],
    title="Shapes",
    position="bottomright",
)

m3.add_legend( items=[ {"color": "#9b59b6", "label": "Custom Polygon"}, {"color": "#e67e22", "label": "Bounding Rectangle"}, ], title="Shapes", position="bottomright", )