Icon Layer Example¶

This notebook demonstrates the DeckGL IconLayer for rendering custom marker icons on maps.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Icon Layer¶

In [ ]:

from anymap_ts import DeckGLMap

# POI locations around San Francisco
pois = [
    {
        "coordinates": [-122.4098, 37.7855],
        "name": "Restaurant A",
        "icon": "marker",
        "size": 40,
    },
    {
        "coordinates": [-122.4150, 37.7820],
        "name": "Restaurant B",
        "icon": "marker",
        "size": 35,
    },
    {
        "coordinates": [-122.4200, 37.7890],
        "name": "Hotel A",
        "icon": "marker",
        "size": 50,
    },
    {
        "coordinates": [-122.4180, 37.7920],
        "name": "Hotel B",
        "icon": "marker",
        "size": 55,
    },
    {
        "coordinates": [-122.4194, 37.7749],
        "name": "City Hall",
        "icon": "marker",
        "size": 60,
    },
    {
        "coordinates": [-122.4534, 37.8083],
        "name": "Fishermans Wharf",
        "icon": "marker",
        "size": 55,
    },
]

# Using a public icon atlas URL (Mapbox Maki icons)
icon_atlas = (
    "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png"
)
icon_mapping = {
    "marker": {
        "x": 0,
        "y": 0,
        "width": 128,
        "height": 128,
        "anchorY": 128,
        "mask": True,
    }
}

m = DeckGLMap(center=[-122.42, 37.79], zoom=13)
m.add_basemap("CartoDB.DarkMatter")
m.add_icon_layer(
    data=pois,
    name="icon-basic",
    get_position="coordinates",
    get_icon="icon",
    get_size="size",
    icon_atlas=icon_atlas,
    icon_mapping=icon_mapping,
    get_color=[255, 100, 100],
    size_min_pixels=20,
    size_max_pixels=80,
)
m

from anymap_ts import DeckGLMap # POI locations around San Francisco pois = [ { "coordinates": [-122.4098, 37.7855], "name": "Restaurant A", "icon": "marker", "size": 40, }, { "coordinates": [-122.4150, 37.7820], "name": "Restaurant B", "icon": "marker", "size": 35, }, { "coordinates": [-122.4200, 37.7890], "name": "Hotel A", "icon": "marker", "size": 50, }, { "coordinates": [-122.4180, 37.7920], "name": "Hotel B", "icon": "marker", "size": 55, }, { "coordinates": [-122.4194, 37.7749], "name": "City Hall", "icon": "marker", "size": 60, }, { "coordinates": [-122.4534, 37.8083], "name": "Fishermans Wharf", "icon": "marker", "size": 55, }, ] # Using a public icon atlas URL (Mapbox Maki icons) icon_atlas = ( "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png" ) icon_mapping = { "marker": { "x": 0, "y": 0, "width": 128, "height": 128, "anchorY": 128, "mask": True, } } m = DeckGLMap(center=[-122.42, 37.79], zoom=13) m.add_basemap("CartoDB.DarkMatter") m.add_icon_layer( data=pois, name="icon-basic", get_position="coordinates", get_icon="icon", get_size="size", icon_atlas=icon_atlas, icon_mapping=icon_mapping, get_color=[255, 100, 100], size_min_pixels=20, size_max_pixels=80, ) m

Icon Layer with Different Categories¶

In [ ]:

# POIs with category-based coloring
restaurants = [
    {
        "coordinates": [-122.4098, 37.7855],
        "name": "Restaurant A",
        "icon": "marker",
        "size": 40,
        "color": [255, 100, 100],
    },
    {
        "coordinates": [-122.4150, 37.7820],
        "name": "Restaurant B",
        "icon": "marker",
        "size": 35,
        "color": [255, 100, 100],
    },
    {
        "coordinates": [-122.4200, 37.7890],
        "name": "Restaurant C",
        "icon": "marker",
        "size": 45,
        "color": [255, 100, 100],
    },
]

hotels = [
    {
        "coordinates": [-122.4100, 37.7880],
        "name": "Hotel A",
        "icon": "marker",
        "size": 50,
        "color": [100, 150, 255],
    },
    {
        "coordinates": [-122.4180, 37.7920],
        "name": "Hotel B",
        "icon": "marker",
        "size": 55,
        "color": [100, 150, 255],
    },
]

attractions = [
    {
        "coordinates": [-122.4194, 37.7749],
        "name": "City Hall",
        "icon": "marker",
        "size": 60,
        "color": [100, 255, 150],
    },
    {
        "coordinates": [-122.4534, 37.8083],
        "name": "Fishermans Wharf",
        "icon": "marker",
        "size": 55,
        "color": [100, 255, 150],
    },
    {
        "coordinates": [-122.4862, 37.8199],
        "name": "Golden Gate View",
        "icon": "marker",
        "size": 65,
        "color": [100, 255, 150],
    },
]

all_pois = restaurants + hotels + attractions

m2 = DeckGLMap(center=[-122.42, 37.79], zoom=12)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_icon_layer(
    data=all_pois,
    name="icon-colored",
    get_position="coordinates",
    get_icon="icon",
    get_size="size",
    icon_atlas=icon_atlas,
    icon_mapping=icon_mapping,
    get_color="color",
    size_min_pixels=20,
)
m2

# POIs with category-based coloring restaurants = [ { "coordinates": [-122.4098, 37.7855], "name": "Restaurant A", "icon": "marker", "size": 40, "color": [255, 100, 100], }, { "coordinates": [-122.4150, 37.7820], "name": "Restaurant B", "icon": "marker", "size": 35, "color": [255, 100, 100], }, { "coordinates": [-122.4200, 37.7890], "name": "Restaurant C", "icon": "marker", "size": 45, "color": [255, 100, 100], }, ] hotels = [ { "coordinates": [-122.4100, 37.7880], "name": "Hotel A", "icon": "marker", "size": 50, "color": [100, 150, 255], }, { "coordinates": [-122.4180, 37.7920], "name": "Hotel B", "icon": "marker", "size": 55, "color": [100, 150, 255], }, ] attractions = [ { "coordinates": [-122.4194, 37.7749], "name": "City Hall", "icon": "marker", "size": 60, "color": [100, 255, 150], }, { "coordinates": [-122.4534, 37.8083], "name": "Fishermans Wharf", "icon": "marker", "size": 55, "color": [100, 255, 150], }, { "coordinates": [-122.4862, 37.8199], "name": "Golden Gate View", "icon": "marker", "size": 65, "color": [100, 255, 150], }, ] all_pois = restaurants + hotels + attractions m2 = DeckGLMap(center=[-122.42, 37.79], zoom=12) m2.add_basemap("CartoDB.DarkMatter") m2.add_icon_layer( data=all_pois, name="icon-colored", get_position="coordinates", get_icon="icon", get_size="size", icon_atlas=icon_atlas, icon_mapping=icon_mapping, get_color="color", size_min_pixels=20, ) m2

Multiple Icon Layers with Layer Control¶

In [ ]:

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

m3.add_icon_layer(
    data=restaurants,
    name="icon-restaurants",
    get_position="coordinates",
    get_icon="icon",
    get_size="size",
    icon_atlas=icon_atlas,
    icon_mapping=icon_mapping,
    get_color=[255, 100, 100],
)

m3.add_icon_layer(
    data=hotels,
    name="icon-hotels",
    get_position="coordinates",
    get_icon="icon",
    get_size="size",
    icon_atlas=icon_atlas,
    icon_mapping=icon_mapping,
    get_color=[100, 150, 255],
)

m3.add_icon_layer(
    data=attractions,
    name="icon-attractions",
    get_position="coordinates",
    get_icon="icon",
    get_size="size",
    icon_atlas=icon_atlas,
    icon_mapping=icon_mapping,
    get_color=[100, 255, 150],
)

m3.add_layer_control()
m3

m3 = DeckGLMap(center=[-122.42, 37.79], zoom=12) m3.add_basemap("CartoDB.DarkMatter") m3.add_icon_layer( data=restaurants, name="icon-restaurants", get_position="coordinates", get_icon="icon", get_size="size", icon_atlas=icon_atlas, icon_mapping=icon_mapping, get_color=[255, 100, 100], ) m3.add_icon_layer( data=hotels, name="icon-hotels", get_position="coordinates", get_icon="icon", get_size="size", icon_atlas=icon_atlas, icon_mapping=icon_mapping, get_color=[100, 150, 255], ) m3.add_icon_layer( data=attractions, name="icon-attractions", get_position="coordinates", get_icon="icon", get_size="size", icon_atlas=icon_atlas, icon_mapping=icon_mapping, get_color=[100, 255, 150], ) m3.add_layer_control() m3

Using the Generic add_deckgl_layer Method¶

In [ ]:

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

m4.add_deckgl_layer(
    layer_type="IconLayer",
    data=pois,
    name="icon-generic",
    getPosition="coordinates",
    getIcon="icon",
    getSize="size",
    iconAtlas=icon_atlas,
    iconMapping=icon_mapping,
    getColor=[138, 43, 226],
    sizeMinPixels=20,
    sizeMaxPixels=80,
    pickable=True,
)
m4

m4 = DeckGLMap(center=[-122.42, 37.79], zoom=13) m4.add_basemap("CartoDB.DarkMatter") m4.add_deckgl_layer( layer_type="IconLayer", data=pois, name="icon-generic", getPosition="coordinates", getIcon="icon", getSize="size", iconAtlas=icon_atlas, iconMapping=icon_mapping, getColor=[138, 43, 226], sizeMinPixels=20, sizeMaxPixels=80, pickable=True, ) m4

Export to HTML¶

In [ ]:

m3.to_html("icon_layer_example.html")

m3.to_html("icon_layer_example.html")