Mapbox GL JS Example¶

This notebook demonstrates the Mapbox GL JS integration in anymap-ts.

Note: You need a Mapbox access token to use Mapbox. Set the MAPBOX_TOKEN environment variable or pass access_token to the constructor.

In [ ]:

import os
from anymap_ts import MapboxMap

# Create a Mapbox map (uses MAPBOX_TOKEN env var)
m = MapboxMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("OpenStreetMap")
m

import os from anymap_ts import MapboxMap # Create a Mapbox map (uses MAPBOX_TOKEN env var) m = MapboxMap(center=[-122.4, 37.8], zoom=10) m.add_basemap("OpenStreetMap") m

In [ ]:

# Add GeoJSON data
geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
            "properties": {"name": "San Francisco"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.2712, 37.8044]},
            "properties": {"name": "Oakland"},
        },
    ],
}

m.add_geojson(geojson, name="cities")

# Add GeoJSON data geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": {"name": "San Francisco"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.2712, 37.8044]}, "properties": {"name": "Oakland"}, }, ], } m.add_geojson(geojson, name="cities")

In [ ]:

# Fly to a location
m.fly_to(-122.4194, 37.7749, zoom=12)

# Fly to a location m.fly_to(-122.4194, 37.7749, zoom=12)

In [ ]:

# Export to HTML
m.to_html("mapbox_example.html")

# Export to HTML m.to_html("mapbox_example.html")