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

import anymap
import json

import anymap import json

Basic Leaflet Map with GeoTIFF¶

Create a basic Leaflet map with a GeoTIFF layer using the corrected implementation:

In [ ]:

# Create a basic Leaflet map
leaflet_map = anymap.LeafletMap(
    center=[29.5, -95.9], zoom=12, width="100%", height="600px"
)
url = "https://huggingface.co/datasets/giswqs/geospatial/resolve/main/las_vegas_train_naip.tif"
leaflet_map.add_geotiff(url, resolution=128, nodata=0)
leaflet_map

# Create a basic Leaflet map leaflet_map = anymap.LeafletMap( center=[29.5, -95.9], zoom=12, width="100%", height="600px" ) url = "https://huggingface.co/datasets/giswqs/geospatial/resolve/main/las_vegas_train_naip.tif" leaflet_map.add_geotiff(url, resolution=128, nodata=0) leaflet_map

In [ ]:

import anymap
import json

import anymap import json

Basic Leaflet Map¶

Create a basic Leaflet map with default settings:

In [ ]:

# Create a basic Leaflet map
leaflet_map = anymap.LeafletMap(
    center=[0, 0], zoom=12, width="100%", height="600px"  # London coordinates
)
url = "https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/20170831_172754_101c_3b_Visual.tif"
# url = "https://huggingface.co/datasets/giswqs/geospatial/resolve/main/las_vegas_train_naip.tif"
leaflet_map.add_geotiff(
    url,
    resolution=128,
    # resampleMethod='bilinear',
    # noDataValue=0,
    # opacity=1.0
)
leaflet_map

# Create a basic Leaflet map leaflet_map = anymap.LeafletMap( center=[0, 0], zoom=12, width="100%", height="600px" # London coordinates ) url = "https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/20170831_172754_101c_3b_Visual.tif" # url = "https://huggingface.co/datasets/giswqs/geospatial/resolve/main/las_vegas_train_naip.tif" leaflet_map.add_geotiff( url, resolution=128, # resampleMethod='bilinear', # noDataValue=0, # opacity=1.0 ) leaflet_map

In [ ]:

html_content = leaflet_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)

html_content = leaflet_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)

Leaflet Map Options¶

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

In [ ]:

# 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

Different Tile Layers¶

Leaflet supports various tile layer providers:

In [ ]:

# 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

In [ ]:

# 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

In [ ]:

# 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

Adding Markers¶

Add markers to your map with popups and tooltips:

In [ ]:

# 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

Adding Shapes¶

Add various shapes like circles, polygons, and polylines:

In [ ]:

# 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

GeoJSON Data¶

Load and display GeoJSON data:

In [ ]:

# 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

Map Controls and Interactions¶

Demonstrate various map control methods:

In [ ]:

# 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

In [ ]:

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

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

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

# 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

Exporting to HTML¶

Export your map to a standalone HTML file:

In [ ]:

# 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

Layer Management¶

Demonstrate layer management capabilities:

In [ ]:

# 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

In [ ]:

# 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']}")

In [ ]:

# 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}")

In [ ]:

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

# Clear all layers layer_map.clear_layers() print("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.