Text Layer Example¶

This notebook demonstrates the DeckGL TextLayer for rendering dynamic text labels on maps.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Basic Text Layer¶

In [ ]:

from anymap_ts import DeckGLMap

# Bay Area city labels
cities = [
    {"coordinates": [-122.4194, 37.7749], "text": "San Francisco", "size": 24},
    {"coordinates": [-122.2711, 37.8044], "text": "Oakland", "size": 20},
    {"coordinates": [-122.2727, 37.8716], "text": "Berkeley", "size": 18},
    {"coordinates": [-122.0322, 37.3688], "text": "San Jose", "size": 20},
    {"coordinates": [-122.1430, 37.4419], "text": "Palo Alto", "size": 16},
    {"coordinates": [-122.0096, 37.5485], "text": "Fremont", "size": 16},
]

m = DeckGLMap(center=[-122.3, 37.6], zoom=9)
m.add_basemap("CartoDB.DarkMatter")
m.add_text_layer(
    data=cities,
    name="text-basic",
    get_position="coordinates",
    get_text="text",
    get_size="size",
    get_color=[255, 255, 255, 255],
)
m

from anymap_ts import DeckGLMap # Bay Area city labels cities = [ {"coordinates": [-122.4194, 37.7749], "text": "San Francisco", "size": 24}, {"coordinates": [-122.2711, 37.8044], "text": "Oakland", "size": 20}, {"coordinates": [-122.2727, 37.8716], "text": "Berkeley", "size": 18}, {"coordinates": [-122.0322, 37.3688], "text": "San Jose", "size": 20}, {"coordinates": [-122.1430, 37.4419], "text": "Palo Alto", "size": 16}, {"coordinates": [-122.0096, 37.5485], "text": "Fremont", "size": 16}, ] m = DeckGLMap(center=[-122.3, 37.6], zoom=9) m.add_basemap("CartoDB.DarkMatter") m.add_text_layer( data=cities, name="text-basic", get_position="coordinates", get_text="text", get_size="size", get_color=[255, 255, 255, 255], ) m

Text Layer with Outline and Styling¶

In [ ]:

# Landmarks with colors
landmarks = [
    {
        "coordinates": [-122.4862, 37.8199],
        "text": "Golden Gate Bridge",
        "size": 16,
        "color": [255, 200, 100],
    },
    {
        "coordinates": [-122.4534, 37.8083],
        "text": "Alcatraz",
        "size": 14,
        "color": [255, 150, 150],
    },
    {
        "coordinates": [-122.3894, 37.6213],
        "text": "SFO Airport",
        "size": 14,
        "color": [100, 200, 255],
    },
    {
        "coordinates": [-122.4783, 37.8199],
        "text": "Sausalito",
        "size": 14,
        "color": [200, 255, 200],
    },
    {
        "coordinates": [-122.3894, 37.7866],
        "text": "Ferry Building",
        "size": 14,
        "color": [255, 180, 100],
    },
]

m2 = DeckGLMap(center=[-122.42, 37.79], zoom=11)
m2.add_basemap("CartoDB.DarkMatter")
m2.add_text_layer(
    data=landmarks,
    name="text-styled",
    get_position="coordinates",
    get_text="text",
    get_size="size",
    get_color="color",
    font_family="Arial",
    font_weight="bold",
    outline_width=2,
    outline_color=[0, 0, 0, 200],
    size_min_pixels=10,
    size_max_pixels=32,
)
m2

# Landmarks with colors landmarks = [ { "coordinates": [-122.4862, 37.8199], "text": "Golden Gate Bridge", "size": 16, "color": [255, 200, 100], }, { "coordinates": [-122.4534, 37.8083], "text": "Alcatraz", "size": 14, "color": [255, 150, 150], }, { "coordinates": [-122.3894, 37.6213], "text": "SFO Airport", "size": 14, "color": [100, 200, 255], }, { "coordinates": [-122.4783, 37.8199], "text": "Sausalito", "size": 14, "color": [200, 255, 200], }, { "coordinates": [-122.3894, 37.7866], "text": "Ferry Building", "size": 14, "color": [255, 180, 100], }, ] m2 = DeckGLMap(center=[-122.42, 37.79], zoom=11) m2.add_basemap("CartoDB.DarkMatter") m2.add_text_layer( data=landmarks, name="text-styled", get_position="coordinates", get_text="text", get_size="size", get_color="color", font_family="Arial", font_weight="bold", outline_width=2, outline_color=[0, 0, 0, 200], size_min_pixels=10, size_max_pixels=32, ) m2

Multiple Text Layers with Layer Control¶

In [ ]:

m3 = DeckGLMap(center=[-122.35, 37.7], zoom=10)
m3.add_basemap("CartoDB.DarkMatter")

m3.add_text_layer(
    data=cities,
    name="text-cities",
    get_position="coordinates",
    get_text="text",
    get_size="size",
    get_color=[255, 255, 255, 255],
)

m3.add_text_layer(
    data=landmarks,
    name="text-landmarks",
    get_position="coordinates",
    get_text="text",
    get_size="size",
    get_color="color",
    outline_width=2,
    outline_color=[0, 0, 0, 200],
)

m3.add_layer_control()
m3

m3 = DeckGLMap(center=[-122.35, 37.7], zoom=10) m3.add_basemap("CartoDB.DarkMatter") m3.add_text_layer( data=cities, name="text-cities", get_position="coordinates", get_text="text", get_size="size", get_color=[255, 255, 255, 255], ) m3.add_text_layer( data=landmarks, name="text-landmarks", get_position="coordinates", get_text="text", get_size="size", get_color="color", outline_width=2, outline_color=[0, 0, 0, 200], ) m3.add_layer_control() m3

Using the Generic add_deckgl_layer Method¶

In [ ]:

m4 = DeckGLMap(center=[-122.3, 37.6], zoom=9)
m4.add_basemap("CartoDB.DarkMatter")

m4.add_deckgl_layer(
    layer_type="TextLayer",
    data=cities,
    name="text-generic",
    getPosition="coordinates",
    getText="text",
    getSize="size",
    getColor=[255, 200, 100, 255],
    fontFamily="Arial",
    fontWeight="bold",
    outlineWidth=2,
    outlineColor=[0, 0, 0, 200],
    billboard=True,
)
m4

m4 = DeckGLMap(center=[-122.3, 37.6], zoom=9) m4.add_basemap("CartoDB.DarkMatter") m4.add_deckgl_layer( layer_type="TextLayer", data=cities, name="text-generic", getPosition="coordinates", getText="text", getSize="size", getColor=[255, 200, 100, 255], fontFamily="Arial", fontWeight="bold", outlineWidth=2, outlineColor=[0, 0, 0, 200], billboard=True, ) m4

Export to HTML¶

In [ ]:

m.to_html("text_layer_example.html")

m.to_html("text_layer_example.html")