OpenLayers Map Examples¶

This notebook demonstrates how to use the OpenLayersMap 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 OpenLayers Map¶

Create a basic OpenLayers map with default settings. Note that OpenLayers uses [longitude, latitude] coordinate order.

In [2]:

# Create a basic OpenLayers map
ol_map = anymap.OpenLayersMap(
    center=[-0.09, 51.505],  # [longitude, latitude] - London coordinates
    zoom=10,
    width="100%",
    height="400px",
)

ol_map

# Create a basic OpenLayers map ol_map = anymap.OpenLayersMap( center=[-0.09, 51.505], # [longitude, latitude] - London coordinates zoom=10, width="100%", height="400px", ) ol_map

Out[2]:

Different Tile Layers¶

OpenLayers supports various tile layer providers:

In [3]:

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

osm_map

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

Out[3]:

In [4]:

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

positron_map

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

Out[4]:

In [5]:

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

dark_map

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

Out[5]:

Adding Markers¶

Add markers to your map with popups and tooltips:

In [6]:

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

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

marker_map.add_marker(
    [-0.1246, 51.5007], popup="<b>Big Ben</b><br>Famous clock tower", tooltip="Big Ben"
)

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

marker_map

# Create a map with markers marker_map = anymap.OpenLayersMap( center=[-0.1278, 51.5074], zoom=12 # [longitude, latitude] - London ) # Add markers for famous London landmarks marker_map.add_marker( [-0.1278, 51.5074], popup="London
Capital of the United Kingdom", tooltip="London City Center", ) marker_map.add_marker( [-0.1246, 51.5007], popup="Big Ben
Famous clock tower", tooltip="Big Ben" ) marker_map.add_marker( [-0.1195, 51.5033], popup="London Eye
Giant Ferris wheel", tooltip="London Eye", ) marker_map

Out[6]:

Adding Shapes¶

Add various shapes like circles, polygons, and line strings:

In [7]:

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

# Add a circle around Central Park
shapes_map.add_circle(
    [-73.9654, 40.7829],  # [longitude, latitude] - Central Park
    radius=1000,  # 1km radius
    color="green",
    fillColor="lightgreen",
    fillOpacity=0.3,
)

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

shapes_map.add_polygon(
    manhattan_coords, color="blue", fillColor="lightblue", fillOpacity=0.2
)

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

shapes_map.add_linestring(broadway_coords, color="red", strokeWidth=5)

shapes_map

# Create a map with shapes shapes_map = anymap.OpenLayersMap( center=[-74.0060, 40.7128], zoom=11 # [longitude, latitude] - New York ) # Add a circle around Central Park shapes_map.add_circle( [-73.9654, 40.7829], # [longitude, latitude] - Central Park radius=1000, # 1km radius color="green", fillColor="lightgreen", fillOpacity=0.3, ) # Add a polygon for Manhattan (simplified) manhattan_coords = [ [ [-73.9712, 40.7831], [-73.9441, 40.7489], [-73.9969, 40.7061], [-74.0113, 40.7194], [-73.9712, 40.7831], ] ] shapes_map.add_polygon( manhattan_coords, color="blue", fillColor="lightblue", fillOpacity=0.2 ) # Add a line string for Broadway broadway_coords = [ [-73.9776, 40.7614], [-73.9851, 40.7589], [-73.9926, 40.7565], [-74.0014, 40.7505], ] shapes_map.add_linestring(broadway_coords, color="red", strokeWidth=5) shapes_map

Out[7]:

GeoJSON Data¶

Load and display GeoJSON data:

In [8]:

# 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.OpenLayersMap(center=[-80.0, 40.0], zoom=5)

geojson_map.add_geojson(
    geojson_data,
    style={"fill": {"color": "purple"}, "stroke": {"color": "purple", "width": 2}},
)

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.OpenLayersMap(center=[-80.0, 40.0], zoom=5) geojson_map.add_geojson( geojson_data, style={"fill": {"color": "purple"}, "stroke": {"color": "purple", "width": 2}}, ) geojson_map

Out[8]:

Map Controls and Interactions¶

Demonstrate various map control methods:

In [9]:

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

control_map

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

Out[9]:

In [10]:

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

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

In [11]:

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

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

In [12]:

# Fit extent to a specific area
# [minX, minY, maxX, maxY] in map projection coordinates
control_map.fit_extent([-80.3, 25.7, -80.1, 25.9])

# Fit extent to a specific area # [minX, minY, maxX, maxY] in map projection coordinates control_map.fit_extent([-80.3, 25.7, -80.1, 25.9])

Vector Layers¶

Create vector layers with custom features:

In [13]:

# Create a map with vector layers
vector_map = anymap.OpenLayersMap(
    center=[2.3522, 48.8566], zoom=12  # [longitude, latitude] - Paris
)

# Define features
features = [
    {
        "geometry": {"type": "Point", "coordinates": [2.3522, 48.8566]},
        "properties": {"name": "Paris", "type": "city"},
    },
    {
        "geometry": {"type": "Point", "coordinates": [2.2945, 48.8584]},
        "properties": {"name": "Eiffel Tower", "type": "landmark"},
    },
]

vector_map.add_vector_layer(
    features,
    style={
        "image": {
            "circle": {
                "radius": 8,
                "fill": {"color": "red"},
                "stroke": {"color": "white", "width": 2},
            }
        }
    },
)

vector_map

# Create a map with vector layers vector_map = anymap.OpenLayersMap( center=[2.3522, 48.8566], zoom=12 # [longitude, latitude] - Paris ) # Define features features = [ { "geometry": {"type": "Point", "coordinates": [2.3522, 48.8566]}, "properties": {"name": "Paris", "type": "city"}, }, { "geometry": {"type": "Point", "coordinates": [2.2945, 48.8584]}, "properties": {"name": "Eiffel Tower", "type": "landmark"}, }, ] vector_map.add_vector_layer( features, style={ "image": { "circle": { "radius": 8, "fill": {"color": "red"}, "stroke": {"color": "white", "width": 2}, } } }, ) vector_map

Out[13]:

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.OpenLayersMap(
    center=[2.3522, 48.8566], zoom=12  # [longitude, latitude] - Paris
)

# Add a custom tile layer
multi_layer_map.add_tile_layer(
    "https://stamen-tiles-{a-c}.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.OpenLayersMap( center=[2.3522, 48.8566], zoom=12 # [longitude, latitude] - Paris ) # Add a custom tile layer multi_layer_map.add_tile_layer( "https://stamen-tiles-{a-c}.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]:

Projections¶

OpenLayers supports different projections:

In [15]:

# Create a map with a different projection
projection_map = anymap.OpenLayersMap(
    center=[0, 0],  # [longitude, latitude]
    zoom=2,
    projection="EPSG:4326",  # WGS84 geographic projection
)

projection_map

# Create a map with a different projection projection_map = anymap.OpenLayersMap( center=[0, 0], # [longitude, latitude] zoom=2, projection="EPSG:4326", # WGS84 geographic projection ) projection_map

Out[15]:

Exporting to HTML¶

Export your map to a standalone HTML file:

In [16]:

# Create a map for export
export_map = anymap.OpenLayersMap(
    center=[139.6503, 35.6762],  # [longitude, latitude] - Tokyo
    zoom=10,
    tile_layer="OSM",
)

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

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

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

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

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

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

Map exported to tokyo_openlayers_map.html

Out[16]:

Layer Management¶

Demonstrate layer management capabilities:

In [17]:

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

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

circle_id = layer_map.add_circle(
    [13.4050, 52.5200],
    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.OpenLayersMap( center=[13.4050, 52.5200], zoom=11 # [longitude, latitude] - Berlin ) # Add several layers marker_id = layer_map.add_marker( [13.4050, 52.5200], popup="Berlin", tooltip="German Capital" ) circle_id = layer_map.add_circle( [13.4050, 52.5200], 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[17]:

In [18]:

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

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

# 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

OpenLayers vs Other Libraries¶

Key differences when using OpenLayers:

1. Coordinate Order: OpenLayers uses [longitude, latitude] (x, y) order, unlike Leaflet which uses [latitude, longitude]
2. Projections: Built-in support for multiple coordinate systems and projections
3. Vector Layers: Powerful vector layer capabilities with custom styling
4. Performance: Optimized for large datasets and complex geometries
5. Flexibility: Highly modular and customizable architecture

Conclusion¶

This notebook demonstrated the key features of the OpenLayersMap widget:

1. Basic map creation with different tile layers
2. Adding markers with popups and tooltips
3. Drawing shapes (circles, polygons, line strings)
4. Loading GeoJSON data
5. Vector layers with custom features
6. Map controls (fly to, set center/zoom, fit extent)
7. Layer management (add, remove, clear)
8. Projection support for different coordinate systems
9. HTML export for sharing standalone maps

The OpenLayersMap widget provides a powerful, flexible mapping solution that integrates seamlessly with Jupyter notebooks and supports OpenLayers' advanced geospatial capabilities.