Leaflet Map Examples¶

This notebook demonstrates how to use the LeafletMap widget from the anymap package.

Installation¶

First, make sure you have the anymap package installed:

pip install anymap

In [1]:

import anymap
import json

import anymap import json

Basic Leaflet Map¶

Create a basic Leaflet map with default settings:

In [2]:

# Create a basic Leaflet map
leaflet_map = anymap.LeafletMap(
    center=[51.505, -0.09], zoom=13, width="100%", height="600px"  # London coordinates
)

leaflet_map

# Create a basic Leaflet map leaflet_map = anymap.LeafletMap( center=[51.505, -0.09], zoom=13, width="100%", height="600px" # London coordinates ) leaflet_map

Out[2]:

Leaflet Map Options¶

Create a map with different leaflet map options (click here for a full list)

In [3]:

# Create a Leaflet map with advanced options
map_with_options = anymap.LeafletMap(
    height="400px",
    map_options={
        "zoomControl": False,
        "attributionControl": False,
        "scrollWheelZoom": False,
        "dragging": False,
        "doubleClickZoom": False,
        "boxZoom": False,
    },
)

map_with_options

# Create a Leaflet map with advanced options map_with_options = anymap.LeafletMap( height="400px", map_options={ "zoomControl": False, "attributionControl": False, "scrollWheelZoom": False, "dragging": False, "doubleClickZoom": False, "boxZoom": False, }, ) map_with_options

Out[3]:

Different Tile Layers¶

Leaflet supports various tile layer providers:

In [4]:

# OpenStreetMap (default)
osm_map = anymap.LeafletMap(
    center=[40.7128, -74.0060], zoom=10, tile_layer="OpenStreetMap"  # New York
)

osm_map

# OpenStreetMap (default) osm_map = anymap.LeafletMap( center=[40.7128, -74.0060], zoom=10, tile_layer="OpenStreetMap" # New York ) osm_map

Out[4]:

In [5]:

# CartoDB Positron (light theme)
positron_map = anymap.LeafletMap(
    center=[40.7128, -74.0060], zoom=10, tile_layer="CartoDB.Positron"
)

positron_map

# CartoDB Positron (light theme) positron_map = anymap.LeafletMap( center=[40.7128, -74.0060], zoom=10, tile_layer="CartoDB.Positron" ) positron_map

Out[5]:

In [6]:

# CartoDB Dark Matter (dark theme)
dark_map = anymap.LeafletMap(
    center=[40.7128, -74.0060], zoom=10, tile_layer="CartoDB.DarkMatter"
)

dark_map

# CartoDB Dark Matter (dark theme) dark_map = anymap.LeafletMap( center=[40.7128, -74.0060], zoom=10, tile_layer="CartoDB.DarkMatter" ) dark_map

Out[6]:

Adding Markers¶

Add markers to your map with popups and tooltips:

In [7]:

# Create a map with markers
marker_map = anymap.LeafletMap(center=[51.5074, -0.1278], zoom=12)  # London

# Add markers for famous London landmarks
marker_map.add_marker(
    [51.5074, -0.1278],
    popup="<b>London</b><br>Capital of the United Kingdom",
    tooltip="London City Center",
)

marker_map.add_marker(
    [51.5007, -0.1246],
    popup="<b>Big Ben</b><br>Famous clock tower",
    tooltip="Big Ben's permanent tooltip",
    # https://leafletjs.com/reference.html#tooltip-option
    tooltip_options=dict(permanent=True, direction="right", opacity=0.7),
)

marker_map.add_marker(
    [51.5033, -0.1195],
    popup="<b>London Eye</b><br>Giant Ferris wheel",
    tooltip="London Eye",
)

marker_map

# Create a map with markers marker_map = anymap.LeafletMap(center=[51.5074, -0.1278], zoom=12) # London # Add markers for famous London landmarks marker_map.add_marker( [51.5074, -0.1278], popup="London
Capital of the United Kingdom", tooltip="London City Center", ) marker_map.add_marker( [51.5007, -0.1246], popup="Big Ben
Famous clock tower", tooltip="Big Ben's permanent tooltip", # https://leafletjs.com/reference.html#tooltip-option tooltip_options=dict(permanent=True, direction="right", opacity=0.7), ) marker_map.add_marker( [51.5033, -0.1195], popup="London Eye
Giant Ferris wheel", tooltip="London Eye", ) marker_map

Out[7]:

Adding Shapes¶

Add various shapes like circles, polygons, and polylines:

In [8]:

# Create a map with shapes
shapes_map = anymap.LeafletMap(center=[40.7128, -74.0060], zoom=11)  # New York

# Add a circle around Central Park
shapes_map.add_circle(
    [40.7829, -73.9654],  # Central Park
    radius=1000,  # 1km radius
    color="green",
    fillColor="lightgreen",
    fillOpacity=0.3,
    tooltip="Central Park🌳<br />Permanent tooltip",
    tooltip_options=dict(permanent=True, direction="top"),
)

# Add a polygon for Manhattan (simplified)
manhattan_coords = [
    [40.7831, -73.9712],
    [40.7489, -73.9441],
    [40.7061, -73.9969],
    [40.7194, -74.0113],
    [40.7831, -73.9712],
]

shapes_map.add_polygon(
    manhattan_coords,
    color="blue",
    fillColor="lightblue",
    fillOpacity=0.2,
    tooltip="Sticky tooltip (stays with mouse)",
    tooltip_options=dict(sticky=True),
)

# Add a polyline for Broadway
broadway_coords = [
    [40.7614, -73.9776],
    [40.7589, -73.9851],
    [40.7565, -73.9926],
    [40.7505, -74.0014],
]

shapes_map.add_polyline(broadway_coords, color="red", weight=5)

shapes_map

# Create a map with shapes shapes_map = anymap.LeafletMap(center=[40.7128, -74.0060], zoom=11) # New York # Add a circle around Central Park shapes_map.add_circle( [40.7829, -73.9654], # Central Park radius=1000, # 1km radius color="green", fillColor="lightgreen", fillOpacity=0.3, tooltip="Central Park🌳
Permanent tooltip", tooltip_options=dict(permanent=True, direction="top"), ) # Add a polygon for Manhattan (simplified) manhattan_coords = [ [40.7831, -73.9712], [40.7489, -73.9441], [40.7061, -73.9969], [40.7194, -74.0113], [40.7831, -73.9712], ] shapes_map.add_polygon( manhattan_coords, color="blue", fillColor="lightblue", fillOpacity=0.2, tooltip="Sticky tooltip (stays with mouse)", tooltip_options=dict(sticky=True), ) # Add a polyline for Broadway broadway_coords = [ [40.7614, -73.9776], [40.7589, -73.9851], [40.7565, -73.9926], [40.7505, -74.0014], ] shapes_map.add_polyline(broadway_coords, color="red", weight=5) shapes_map

Out[8]:

GeoJSON Data¶

Load and display GeoJSON data:

In [9]:

# Sample GeoJSON data
geojson_data = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-74.0060, 40.7128]},
            "properties": {"name": "New York City", "population": 8175133},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-87.6298, 41.8781]},
            "properties": {"name": "Chicago", "population": 2693976},
        },
    ],
}

# Create map with GeoJSON data
geojson_map = anymap.LeafletMap(center=[40.0, -80.0], zoom=5)

geojson_map.add_geojson(
    geojson_data, style={"color": "purple", "weight": 2, "fillOpacity": 0.7}
)

geojson_map

# Sample GeoJSON data geojson_data = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-74.0060, 40.7128]}, "properties": {"name": "New York City", "population": 8175133}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-87.6298, 41.8781]}, "properties": {"name": "Chicago", "population": 2693976}, }, ], } # Create map with GeoJSON data geojson_map = anymap.LeafletMap(center=[40.0, -80.0], zoom=5) geojson_map.add_geojson( geojson_data, style={"color": "purple", "weight": 2, "fillOpacity": 0.7} ) geojson_map

Out[9]:

Map Controls and Interactions¶

Demonstrate various map control methods:

In [10]:

# Create a map for demonstrations
control_map = anymap.LeafletMap(center=[37.7749, -122.4194], zoom=10)  # San Francisco

control_map

# Create a map for demonstrations control_map = anymap.LeafletMap(center=[37.7749, -122.4194], zoom=10) # San Francisco control_map

Out[10]:

In [11]:

# Fly to a different location
control_map.fly_to(34.0522, -118.2437, 12)  # Los Angeles

# Fly to a different location control_map.fly_to(34.0522, -118.2437, 12) # Los Angeles

In [12]:

# Set center and zoom
control_map.set_center(25.7617, -80.1918)  # Miami
control_map.set_zoom(11)

# Set center and zoom control_map.set_center(25.7617, -80.1918) # Miami control_map.set_zoom(11)

In [13]:

# Fit bounds to a specific area
# Southwest and Northeast corners of the bounding box
control_map.fit_bounds([[25.7617, -80.1918], [25.7907, -80.1310]])

# Fit bounds to a specific area # Southwest and Northeast corners of the bounding box control_map.fit_bounds([[25.7617, -80.1918], [25.7907, -80.1310]])

Adding Multiple Tile Layers¶

You can add multiple tile layers to the same map:

In [14]:

# Create a map with multiple tile layers
multi_layer_map = anymap.LeafletMap(center=[48.8566, 2.3522], zoom=12)  # Paris

# Add a custom tile layer
multi_layer_map.add_tile_layer(
    "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",
    attribution="Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
    layer_id="watercolor",
)

multi_layer_map

# Create a map with multiple tile layers multi_layer_map = anymap.LeafletMap(center=[48.8566, 2.3522], zoom=12) # Paris # Add a custom tile layer multi_layer_map.add_tile_layer( "https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg", attribution="Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.", layer_id="watercolor", ) multi_layer_map

Out[14]:

Exporting to HTML¶

Export your map to a standalone HTML file:

In [15]:

# Create a map for export
export_map = anymap.LeafletMap(
    center=[35.6762, 139.6503], zoom=10, tile_layer="CartoDB.Positron"  # Tokyo
)

# Add some markers
export_map.add_marker(
    [35.6762, 139.6503], popup="<b>Tokyo</b><br>Capital of Japan", tooltip="Tokyo"
)

export_map.add_circle(
    [35.6762, 139.6503], radius=5000, color="red", fillColor="pink", fillOpacity=0.3
)

# Export to HTML
html_content = export_map.to_html(
    title="Tokyo Map - Leaflet Example", width="100%", height="600px"
)

# Save to file
with open("tokyo_map.html", "w") as f:
    f.write(html_content)

print("Map exported to tokyo_map.html")
export_map

# Create a map for export export_map = anymap.LeafletMap( center=[35.6762, 139.6503], zoom=10, tile_layer="CartoDB.Positron" # Tokyo ) # Add some markers export_map.add_marker( [35.6762, 139.6503], popup="Tokyo
Capital of Japan", tooltip="Tokyo" ) export_map.add_circle( [35.6762, 139.6503], radius=5000, color="red", fillColor="pink", fillOpacity=0.3 ) # Export to HTML html_content = export_map.to_html( title="Tokyo Map - Leaflet Example", width="100%", height="600px" ) # Save to file with open("tokyo_map.html", "w") as f: f.write(html_content) print("Map exported to tokyo_map.html") export_map

Map exported to tokyo_map.html

Out[15]:

Layer Management¶

Demonstrate layer management capabilities:

In [16]:

# Create a map for layer management
layer_map = anymap.LeafletMap(center=[52.5200, 13.4050], zoom=11)  # Berlin

# Add several layers
marker_id = layer_map.add_marker(
    [52.5200, 13.4050], popup="Berlin", tooltip="German Capital"
)

circle_id = layer_map.add_circle(
    [52.5200, 13.4050],
    radius=3000,
    color="blue",
    fillColor="lightblue",
    fillOpacity=0.2,
)

print(f"Added marker with ID: {marker_id}")
print(f"Added circle with ID: {circle_id}")

layer_map

# Create a map for layer management layer_map = anymap.LeafletMap(center=[52.5200, 13.4050], zoom=11) # Berlin # Add several layers marker_id = layer_map.add_marker( [52.5200, 13.4050], popup="Berlin", tooltip="German Capital" ) circle_id = layer_map.add_circle( [52.5200, 13.4050], radius=3000, color="blue", fillColor="lightblue", fillOpacity=0.2, ) print(f"Added marker with ID: {marker_id}") print(f"Added circle with ID: {circle_id}") layer_map

Added marker with ID: marker_0
Added circle with ID: circle_1

Out[16]:

In [17]:

# Get current layers
layers = layer_map.get_layers()
print("Current layers:")
for layer_id, layer_config in layers.items():
    print(f"  {layer_id}: {layer_config['type']}")

# Get current layers layers = layer_map.get_layers() print("Current layers:") for layer_id, layer_config in layers.items(): print(f" {layer_id}: {layer_config['type']}")

Current layers:
  marker_0: marker
  circle_1: circle

In [18]:

# Remove a layer
layer_map.remove_layer(circle_id)
print(f"Removed circle layer: {circle_id}")

# Remove a layer layer_map.remove_layer(circle_id) print(f"Removed circle layer: {circle_id}")

Removed circle layer: circle_1

In [19]:

# Clear all layers
layer_map.clear_layers()
print("All layers cleared")

# Clear all layers layer_map.clear_layers() print("All layers cleared")

All layers cleared

Conclusion¶

This notebook demonstrated the key features of the LeafletMap widget:

1. Basic map creation with different tile layers
2. Adding markers with popups and tooltips
3. Drawing shapes (circles, polygons, polylines)
4. Loading GeoJSON data
5. Map controls (fly to, set center/zoom, fit bounds)
6. Layer management (add, remove, clear)
7. HTML export for sharing standalone maps

The LeafletMap widget provides a lightweight, flexible mapping solution that integrates seamlessly with Jupyter notebooks and supports the full Leaflet ecosystem.