Arc Layer Example¶

This notebook demonstrates the DeckGL ArcLayer for visualizing origin-destination data.

Arc layers are ideal for:

• Flight routes and migration patterns
• Transportation networks
• Supply chain visualization
• Any origin-destination flow data

Basic Arc Layer with MapLibre¶

In [ ]:

from anymap_ts import MapLibreMap

# Sample flight data from San Francisco to major cities
flights = [
    {
        "source": [-122.4194, 37.7749],
        "target": [-73.9857, 40.7484],
        "name": "SF to NYC",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [-87.6298, 41.8781],
        "name": "SF to Chicago",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [-118.2437, 34.0522],
        "name": "SF to LA",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [-95.3698, 29.7604],
        "name": "SF to Houston",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [-80.1918, 25.7617],
        "name": "SF to Miami",
    },
]

m = MapLibreMap(center=[-98.5795, 39.8283], zoom=3, pitch=30)
m.add_basemap("CartoDB.DarkMatter")
m.add_arc_layer(
    data=flights,
    name="flights",
    get_source_color=[0, 128, 255, 255],
    get_target_color=[255, 128, 0, 255],
    get_width=2,
    opacity=0.8,
)
m

from anymap_ts import MapLibreMap # Sample flight data from San Francisco to major cities flights = [ { "source": [-122.4194, 37.7749], "target": [-73.9857, 40.7484], "name": "SF to NYC", }, { "source": [-122.4194, 37.7749], "target": [-87.6298, 41.8781], "name": "SF to Chicago", }, { "source": [-122.4194, 37.7749], "target": [-118.2437, 34.0522], "name": "SF to LA", }, { "source": [-122.4194, 37.7749], "target": [-95.3698, 29.7604], "name": "SF to Houston", }, { "source": [-122.4194, 37.7749], "target": [-80.1918, 25.7617], "name": "SF to Miami", }, ] m = MapLibreMap(center=[-98.5795, 39.8283], zoom=3, pitch=30) m.add_basemap("CartoDB.DarkMatter") m.add_arc_layer( data=flights, name="flights", get_source_color=[0, 128, 255, 255], get_target_color=[255, 128, 0, 255], get_width=2, opacity=0.8, ) m

Arc Layer with Great Circle Routing¶

In [ ]:

# International flights using great circle paths
international_flights = [
    {
        "source": [-122.4194, 37.7749],
        "target": [139.6917, 35.6895],
        "name": "SF to Tokyo",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [-0.1276, 51.5074],
        "name": "SF to London",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [2.3522, 48.8566],
        "name": "SF to Paris",
    },
    {
        "source": [-122.4194, 37.7749],
        "target": [151.2093, -33.8688],
        "name": "SF to Sydney",
    },
]

m2 = MapLibreMap(center=[-122.4, 20], zoom=1, pitch=20)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_arc_layer(
    data=international_flights,
    name="international",
    get_source_color=[255, 215, 0, 255],
    get_target_color=[255, 69, 0, 255],
    get_width=3,
    great_circle=True,
    get_height=1,
)
m2

# International flights using great circle paths international_flights = [ { "source": [-122.4194, 37.7749], "target": [139.6917, 35.6895], "name": "SF to Tokyo", }, { "source": [-122.4194, 37.7749], "target": [-0.1276, 51.5074], "name": "SF to London", }, { "source": [-122.4194, 37.7749], "target": [2.3522, 48.8566], "name": "SF to Paris", }, { "source": [-122.4194, 37.7749], "target": [151.2093, -33.8688], "name": "SF to Sydney", }, ] m2 = MapLibreMap(center=[-122.4, 20], zoom=1, pitch=20) m2.add_basemap("CartoDB.DarkMatter") m2.add_arc_layer( data=international_flights, name="international", get_source_color=[255, 215, 0, 255], get_target_color=[255, 69, 0, 255], get_width=3, great_circle=True, get_height=1, ) m2

Arc Layer with DeckGLMap¶

In [ ]:

from anymap_ts import DeckGLMap

# Bay Area commute patterns
commutes = [
    {"source": [-122.2712, 37.8044], "target": [-122.4194, 37.7749], "volume": 5000},
    {"source": [-122.0308, 37.3382], "target": [-122.4194, 37.7749], "volume": 3000},
    {"source": [-121.8853, 37.3387], "target": [-122.4194, 37.7749], "volume": 4000},
    {"source": [-122.4783, 37.8199], "target": [-122.4194, 37.7749], "volume": 2500},
    {"source": [-122.1561, 37.4419], "target": [-122.4194, 37.7749], "volume": 3500},
]

m3 = DeckGLMap(center=[-122.2, 37.6], zoom=9, pitch=45)
m3.add_basemap("CartoDB.DarkMatter")
m3.add_arc_layer(
    data=commutes,
    name="commutes",
    get_source_color=[51, 136, 255, 255],
    get_target_color=[255, 136, 51, 255],
    get_width=2,
    opacity=0.7,
)
m3

from anymap_ts import DeckGLMap # Bay Area commute patterns commutes = [ {"source": [-122.2712, 37.8044], "target": [-122.4194, 37.7749], "volume": 5000}, {"source": [-122.0308, 37.3382], "target": [-122.4194, 37.7749], "volume": 3000}, {"source": [-121.8853, 37.3387], "target": [-122.4194, 37.7749], "volume": 4000}, {"source": [-122.4783, 37.8199], "target": [-122.4194, 37.7749], "volume": 2500}, {"source": [-122.1561, 37.4419], "target": [-122.4194, 37.7749], "volume": 3500}, ] m3 = DeckGLMap(center=[-122.2, 37.6], zoom=9, pitch=45) m3.add_basemap("CartoDB.DarkMatter") m3.add_arc_layer( data=commutes, name="commutes", get_source_color=[51, 136, 255, 255], get_target_color=[255, 136, 51, 255], get_width=2, opacity=0.7, ) m3

Arc Layer with Layer Control¶

In [ ]:

# Multiple arc layers with layer control
m4 = MapLibreMap(center=[-98.5795, 39.8283], zoom=3)
m4.add_basemap("CartoDB.DarkMatter")

# Add domestic flights
m4.add_arc_layer(
    data=flights,
    name="arc-domestic",
    get_source_color=[0, 200, 100, 255],
    get_target_color=[100, 200, 0, 255],
    get_width=2,
)

# Add international flights
m4.add_arc_layer(
    data=international_flights,
    name="arc-international",
    get_source_color=[255, 100, 100, 255],
    get_target_color=[100, 100, 255, 255],
    get_width=2,
    great_circle=True,
)

# Add layer control to manage arc layers
m4.add_layer_control()
m4

# Multiple arc layers with layer control m4 = MapLibreMap(center=[-98.5795, 39.8283], zoom=3) m4.add_basemap("CartoDB.DarkMatter") # Add domestic flights m4.add_arc_layer( data=flights, name="arc-domestic", get_source_color=[0, 200, 100, 255], get_target_color=[100, 200, 0, 255], get_width=2, ) # Add international flights m4.add_arc_layer( data=international_flights, name="arc-international", get_source_color=[255, 100, 100, 255], get_target_color=[100, 100, 255, 255], get_width=2, great_circle=True, ) # Add layer control to manage arc layers m4.add_layer_control() m4

Remove Arc Layer¶

In [ ]:

# Remove a specific arc layer
m4.remove_arc_layer("arc-domestic")

# Remove a specific arc layer m4.remove_arc_layer("arc-domestic")

Export to HTML¶

In [ ]:

m.to_html("arc_layer_example.html")

m.to_html("arc_layer_example.html")