Markers Example¶

This notebook demonstrates how to add markers to a MapLibre map using the add_marker and add_markers methods.

Features¶

• popup: HTML content shown when clicking the marker
• tooltip: HTML content shown when hovering over the marker
• scale: Marker size multiplier (default 1.0, range 0.1-3.0)
• popup_max_width: Maximum width of popup (CSS value, default "240px")
• tooltip_max_width: Maximum width of tooltip (CSS value, default "240px")
• draggable: Whether the marker can be dragged

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Add a Single Marker with Popup and Tooltip¶

In [ ]:

from anymap_ts import Map

m = Map(center=[-122.4, 37.8], zoom=10)
m.add_marker(
    -122.4,
    37.8,
    popup="<b>San Francisco</b><br>Click to see this popup!",
    tooltip="Hover over me!",
)
m

from anymap_ts import Map m = Map(center=[-122.4, 37.8], zoom=10) m.add_marker( -122.4, 37.8, popup="San Francisco
Click to see this popup!", tooltip="Hover over me!", ) m

Add Multiple Markers with Tooltips¶

In [ ]:

m2 = Map(center=[-100, 40], zoom=4)

cities = [
    {
        "name": "San Francisco",
        "info": "Population: 884,363",
        "lng": -122.4,
        "lat": 37.8,
    },
    {"name": "New York", "info": "Population: 8,336,817", "lng": -74.0, "lat": 40.7},
    {"name": "Chicago", "info": "Population: 2,693,976", "lng": -87.6, "lat": 41.9},
    {
        "name": "Los Angeles",
        "info": "Population: 3,979,576",
        "lng": -118.2,
        "lat": 34.1,
    },
    {"name": "Seattle", "info": "Population: 737,015", "lng": -122.3, "lat": 47.6},
]

# Use popup_column for click content and tooltip_column for hover content
m2.add_markers(cities, popup_column="name", tooltip_column="info", color="#ff6600")
m2

m2 = Map(center=[-100, 40], zoom=4) cities = [ { "name": "San Francisco", "info": "Population: 884,363", "lng": -122.4, "lat": 37.8, }, {"name": "New York", "info": "Population: 8,336,817", "lng": -74.0, "lat": 40.7}, {"name": "Chicago", "info": "Population: 2,693,976", "lng": -87.6, "lat": 41.9}, { "name": "Los Angeles", "info": "Population: 3,979,576", "lng": -118.2, "lat": 34.1, }, {"name": "Seattle", "info": "Population: 737,015", "lng": -122.3, "lat": 47.6}, ] # Use popup_column for click content and tooltip_column for hover content m2.add_markers(cities, popup_column="name", tooltip_column="info", color="#ff6600") m2

Add Markers from GeoJSON¶

In [ ]:

geojson_data = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]},
            "properties": {"city": "San Francisco", "population": 884363},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-74.0, 40.7]},
            "properties": {"city": "New York", "population": 8336817},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-87.6, 41.9]},
            "properties": {"city": "Chicago", "population": 2693976},
        },
    ],
}

m3 = Map(center=[-100, 40], zoom=4)
m3.add_markers(geojson_data, popup_column="city", color="#3388ff")
m3

geojson_data = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]}, "properties": {"city": "San Francisco", "population": 884363}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-74.0, 40.7]}, "properties": {"city": "New York", "population": 8336817}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-87.6, 41.9]}, "properties": {"city": "Chicago", "population": 2693976}, }, ], } m3 = Map(center=[-100, 40], zoom=4) m3.add_markers(geojson_data, popup_column="city", color="#3388ff") m3

Marker Scale¶

Adjust marker sizes using the scale parameter (default 1.0, range 0.1-3.0).

In [ ]:

m_scale = Map(center=[-122.4, 37.8], zoom=12)

# Small marker (scale 0.5)
m_scale.add_marker(
    -122.45,
    37.78,
    popup="Small marker",
    tooltip="Scale: 0.5",
    scale=0.5,
    color="#ff0000",
)

# Default marker (scale 1.0)
m_scale.add_marker(
    -122.40,
    37.80,
    popup="Default marker",
    tooltip="Scale: 1.0",
    scale=1.0,
    color="#00ff00",
)

# Large marker (scale 1.5)
m_scale.add_marker(
    -122.35,
    37.82,
    popup="Large marker",
    tooltip="Scale: 1.5",
    scale=1.5,
    color="#0000ff",
)

# Extra large marker (scale 2.0)
m_scale.add_marker(
    -122.38,
    37.76,
    popup="Extra large marker",
    tooltip="Scale: 2.0",
    scale=2.0,
    color="#ff00ff",
)

m_scale

m_scale = Map(center=[-122.4, 37.8], zoom=12) # Small marker (scale 0.5) m_scale.add_marker( -122.45, 37.78, popup="Small marker", tooltip="Scale: 0.5", scale=0.5, color="#ff0000", ) # Default marker (scale 1.0) m_scale.add_marker( -122.40, 37.80, popup="Default marker", tooltip="Scale: 1.0", scale=1.0, color="#00ff00", ) # Large marker (scale 1.5) m_scale.add_marker( -122.35, 37.82, popup="Large marker", tooltip="Scale: 1.5", scale=1.5, color="#0000ff", ) # Extra large marker (scale 2.0) m_scale.add_marker( -122.38, 37.76, popup="Extra large marker", tooltip="Scale: 2.0", scale=2.0, color="#ff00ff", ) m_scale

Popup and Tooltip Max Width¶

Control the maximum width of popups and tooltips using CSS values.

In [ ]:

m_width = Map(center=[-122.4, 37.8], zoom=11)

# Marker with wide popup (400px) containing longer content
long_content = """
<h3>San Francisco</h3>
<p>San Francisco is a city in California known for the Golden Gate Bridge, 
cable cars, and Victorian architecture. It's a major tech hub and cultural center.</p>
"""

m_width.add_marker(
    -122.42,
    37.78,
    popup=long_content,
    tooltip="Wide popup (400px)",
    popup_max_width="400px",
    tooltip_max_width="150px",
    color="#9c27b0",
)

# Marker with narrow popup (150px)
m_width.add_marker(
    -122.38,
    37.80,
    popup="<b>Narrow popup</b><br>Max width: 150px",
    tooltip="Narrow popup example",
    popup_max_width="150px",
    color="#ff9800",
)

m_width

m_width = Map(center=[-122.4, 37.8], zoom=11) # Marker with wide popup (400px) containing longer content long_content = """

San Francisco

San Francisco is a city in California known for the Golden Gate Bridge, cable cars, and Victorian architecture. It's a major tech hub and cultural center.

""" m_width.add_marker( -122.42, 37.78, popup=long_content, tooltip="Wide popup (400px)", popup_max_width="400px", tooltip_max_width="150px", color="#9c27b0", ) # Marker with narrow popup (150px) m_width.add_marker( -122.38, 37.80, popup="Narrow popup
Max width: 150px", tooltip="Narrow popup example", popup_max_width="150px", color="#ff9800", ) m_width

Custom Marker Colors¶

In [ ]:

m4 = Map(center=[-122.4, 37.8], zoom=11)

# Add markers with different colors and tooltips
m4.add_marker(-122.42, 37.78, popup="Red marker", tooltip="I'm red!", color="#ff0000")
m4.add_marker(
    -122.40, 37.80, popup="Green marker", tooltip="I'm green!", color="#00ff00"
)
m4.add_marker(-122.38, 37.82, popup="Blue marker", tooltip="I'm blue!", color="#0000ff")
m4

m4 = Map(center=[-122.4, 37.8], zoom=11) # Add markers with different colors and tooltips m4.add_marker(-122.42, 37.78, popup="Red marker", tooltip="I'm red!", color="#ff0000") m4.add_marker( -122.40, 37.80, popup="Green marker", tooltip="I'm green!", color="#00ff00" ) m4.add_marker(-122.38, 37.82, popup="Blue marker", tooltip="I'm blue!", color="#0000ff") m4

Multiple Markers with Scale¶

Apply scale to all markers in add_markers.

In [ ]:

m5 = Map(center=[-100, 40], zoom=4)

landmarks = [
    {
        "name": "Golden Gate Bridge",
        "desc": "Famous suspension bridge",
        "lng": -122.4783,
        "lat": 37.8199,
    },
    {
        "name": "Statue of Liberty",
        "desc": "Iconic NYC landmark",
        "lng": -74.0445,
        "lat": 40.6892,
    },
    {
        "name": "Space Needle",
        "desc": "Seattle observation tower",
        "lng": -122.3493,
        "lat": 47.6205,
    },
    {
        "name": "Willis Tower",
        "desc": "Chicago skyscraper",
        "lng": -87.6359,
        "lat": 41.8789,
    },
]

# All markers scaled to 1.5x with tooltips
m5.add_markers(
    landmarks,
    popup_column="name",
    tooltip_column="desc",
    color="#e91e63",
    scale=1.5,
    popup_max_width="300px",
)
m5

m5 = Map(center=[-100, 40], zoom=4) landmarks = [ { "name": "Golden Gate Bridge", "desc": "Famous suspension bridge", "lng": -122.4783, "lat": 37.8199, }, { "name": "Statue of Liberty", "desc": "Iconic NYC landmark", "lng": -74.0445, "lat": 40.6892, }, { "name": "Space Needle", "desc": "Seattle observation tower", "lng": -122.3493, "lat": 47.6205, }, { "name": "Willis Tower", "desc": "Chicago skyscraper", "lng": -87.6359, "lat": 41.8789, }, ] # All markers scaled to 1.5x with tooltips m5.add_markers( landmarks, popup_column="name", tooltip_column="desc", color="#e91e63", scale=1.5, popup_max_width="300px", ) m5

Export to HTML¶

In [ ]:

m4.to_html("markers_example.html")

m4.to_html("markers_example.html")