GeoJSON Layer Example¶

This notebook demonstrates the DeckGL GeoJsonLayer for rendering GeoJSON features with mixed geometry types (Points, LineStrings, Polygons).

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic GeoJSON Layer¶

In [ ]:

from anymap_ts import DeckGLMap

# GeoJSON FeatureCollection with mixed geometry types
geojson_data = {
    "type": "FeatureCollection",
    "features": [
        # Points - Landmarks
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
            "properties": {"name": "San Francisco City Hall", "type": "landmark"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4862, 37.8199]},
            "properties": {"name": "Golden Gate Bridge", "type": "landmark"},
        },
        # LineStrings - Routes
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.4194, 37.7749],
                    [-122.4100, 37.7855],
                    [-122.3894, 37.7866],
                ],
            },
            "properties": {"name": "Market Street Route", "type": "route"},
        },
        # Polygons - Neighborhoods
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-122.415, 37.795],
                        [-122.395, 37.795],
                        [-122.395, 37.780],
                        [-122.415, 37.780],
                        [-122.415, 37.795],
                    ]
                ],
            },
            "properties": {
                "name": "Downtown",
                "type": "neighborhood",
                "elevation": 500,
            },
        },
    ],
}

m = DeckGLMap(center=[-122.42, 37.79], zoom=12)
m.add_basemap("CartoDB.DarkMatter")
m.add_geojson_layer(
    data=geojson_data,
    name="geojson-basic",
    get_fill_color=[100, 150, 255, 150],
    get_line_color=[255, 255, 255, 200],
    point_radius_min_pixels=5,
)
m

from anymap_ts import DeckGLMap # GeoJSON FeatureCollection with mixed geometry types geojson_data = { "type": "FeatureCollection", "features": [ # Points - Landmarks { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": {"name": "San Francisco City Hall", "type": "landmark"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4862, 37.8199]}, "properties": {"name": "Golden Gate Bridge", "type": "landmark"}, }, # LineStrings - Routes { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-122.4194, 37.7749], [-122.4100, 37.7855], [-122.3894, 37.7866], ], }, "properties": {"name": "Market Street Route", "type": "route"}, }, # Polygons - Neighborhoods { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-122.415, 37.795], [-122.395, 37.795], [-122.395, 37.780], [-122.415, 37.780], [-122.415, 37.795], ] ], }, "properties": { "name": "Downtown", "type": "neighborhood", "elevation": 500, }, }, ], } m = DeckGLMap(center=[-122.42, 37.79], zoom=12) m.add_basemap("CartoDB.DarkMatter") m.add_geojson_layer( data=geojson_data, name="geojson-basic", get_fill_color=[100, 150, 255, 150], get_line_color=[255, 255, 255, 200], point_radius_min_pixels=5, ) m

GeoJSON with 3D Extrusion¶

In [ ]:

# More detailed GeoJSON with elevation data
geojson_3d = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-122.415, 37.795],
                        [-122.395, 37.795],
                        [-122.395, 37.780],
                        [-122.415, 37.780],
                        [-122.415, 37.795],
                    ]
                ],
            },
            "properties": {"name": "Downtown", "elevation": 500},
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-122.430, 37.780],
                        [-122.415, 37.780],
                        [-122.415, 37.765],
                        [-122.430, 37.765],
                        [-122.430, 37.780],
                    ]
                ],
            },
            "properties": {"name": "Mission", "elevation": 400},
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-122.420, 37.810],
                        [-122.405, 37.810],
                        [-122.405, 37.798],
                        [-122.420, 37.798],
                        [-122.420, 37.810],
                    ]
                ],
            },
            "properties": {"name": "North Beach", "elevation": 300},
        },
    ],
}

m2 = DeckGLMap(center=[-122.42, 37.79], zoom=12, pitch=45, bearing=-17)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_geojson_layer(
    data=geojson_3d,
    name="geojson-3d",
    get_fill_color=[255, 100, 100, 180],
    extruded=True,
    get_elevation="elevation",
)
m2

# More detailed GeoJSON with elevation data geojson_3d = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-122.415, 37.795], [-122.395, 37.795], [-122.395, 37.780], [-122.415, 37.780], [-122.415, 37.795], ] ], }, "properties": {"name": "Downtown", "elevation": 500}, }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-122.430, 37.780], [-122.415, 37.780], [-122.415, 37.765], [-122.430, 37.765], [-122.430, 37.780], ] ], }, "properties": {"name": "Mission", "elevation": 400}, }, { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-122.420, 37.810], [-122.405, 37.810], [-122.405, 37.798], [-122.420, 37.798], [-122.420, 37.810], ] ], }, "properties": {"name": "North Beach", "elevation": 300}, }, ], } m2 = DeckGLMap(center=[-122.42, 37.79], zoom=12, pitch=45, bearing=-17) m2.add_basemap("CartoDB.DarkMatter") m2.add_geojson_layer( data=geojson_3d, name="geojson-3d", get_fill_color=[255, 100, 100, 180], extruded=True, get_elevation="elevation", ) m2

Multiple GeoJSON Layers with Layer Control¶

In [ ]:

# Separate GeoJSON for points and polygons
points_geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
            "properties": {"name": "City Hall"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4862, 37.8199]},
            "properties": {"name": "Golden Gate"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4534, 37.8083]},
            "properties": {"name": "Alcatraz"},
        },
    ],
}

lines_geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.4194, 37.7749],
                    [-122.4100, 37.7855],
                    [-122.3894, 37.7866],
                ],
            },
            "properties": {"name": "Route 1"},
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.4862, 37.8199],
                    [-122.4700, 37.8080],
                    [-122.4534, 37.8083],
                ],
            },
            "properties": {"name": "Route 2"},
        },
    ],
}

m3 = DeckGLMap(center=[-122.42, 37.79], zoom=12)
m3.add_basemap("CartoDB.DarkMatter")

m3.add_geojson_layer(
    data=points_geojson,
    name="geojson-points",
    get_fill_color=[255, 100, 100, 255],
    point_radius_min_pixels=8,
)

m3.add_geojson_layer(
    data=lines_geojson,
    name="geojson-lines",
    get_line_color=[100, 200, 255, 255],
    line_width_min_pixels=3,
)

m3.add_geojson_layer(
    data=geojson_3d,
    name="geojson-polygons",
    get_fill_color=[100, 255, 150, 150],
)

m3.add_layer_control()
m3

# Separate GeoJSON for points and polygons points_geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": {"name": "City Hall"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4862, 37.8199]}, "properties": {"name": "Golden Gate"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4534, 37.8083]}, "properties": {"name": "Alcatraz"}, }, ], } lines_geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-122.4194, 37.7749], [-122.4100, 37.7855], [-122.3894, 37.7866], ], }, "properties": {"name": "Route 1"}, }, { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-122.4862, 37.8199], [-122.4700, 37.8080], [-122.4534, 37.8083], ], }, "properties": {"name": "Route 2"}, }, ], } m3 = DeckGLMap(center=[-122.42, 37.79], zoom=12) m3.add_basemap("CartoDB.DarkMatter") m3.add_geojson_layer( data=points_geojson, name="geojson-points", get_fill_color=[255, 100, 100, 255], point_radius_min_pixels=8, ) m3.add_geojson_layer( data=lines_geojson, name="geojson-lines", get_line_color=[100, 200, 255, 255], line_width_min_pixels=3, ) m3.add_geojson_layer( data=geojson_3d, name="geojson-polygons", get_fill_color=[100, 255, 150, 150], ) m3.add_layer_control() m3

Using the Generic add_deckgl_layer Method¶

In [ ]:

m4 = DeckGLMap(center=[-122.42, 37.79], zoom=12, pitch=30)
m4.add_basemap("CartoDB.DarkMatter")

m4.add_deckgl_layer(
    layer_type="GeoJsonLayer",
    data=geojson_data,
    name="geojson-generic",
    getFillColor=[138, 43, 226, 180],
    getLineColor=[255, 255, 255, 200],
    pointRadiusMinPixels=5,
    lineWidthMinPixels=2,
    stroked=True,
    filled=True,
    pickable=True,
)
m4

m4 = DeckGLMap(center=[-122.42, 37.79], zoom=12, pitch=30) m4.add_basemap("CartoDB.DarkMatter") m4.add_deckgl_layer( layer_type="GeoJsonLayer", data=geojson_data, name="geojson-generic", getFillColor=[138, 43, 226, 180], getLineColor=[255, 255, 255, 200], pointRadiusMinPixels=5, lineWidthMinPixels=2, stroked=True, filled=True, pickable=True, ) m4

Export to HTML¶

In [ ]:

m3.to_html("geojson_layer_example.html")

m3.to_html("geojson_layer_example.html")