Markers with Custom Icons¶

This notebook demonstrates how to use custom marker icons and bulk marker operations, inspired by the Leaflet Custom Icons Tutorial.

Features covered:

• Default markers with popups and tooltips
• Custom icon images
• Draggable markers
• Bulk markers with add_markers()
• Circle markers as alternatives

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import LeafletMap

from anymap_ts import LeafletMap

Default markers with rich popups¶

In [ ]:

m = LeafletMap(center=[2.35, 48.86], zoom=13, controls={})
m.add_basemap("OpenStreetMap")
m.add_control("zoom", position="topleft")

m.add_marker(
    2.2945,
    48.8584,
    popup="<h3>Eiffel Tower</h3><p>Built in 1889 for the World's Fair.</p>",
    tooltip="Eiffel Tower",
)

m.add_marker(
    2.3522,
    48.8606,
    popup="<h3>Louvre Museum</h3><p>World's largest art museum.</p>",
    tooltip="Louvre",
)

m.add_marker(
    2.3499,
    48.8530,
    popup="<h3>Notre-Dame</h3><p>Medieval Catholic cathedral.</p>",
    tooltip="Notre-Dame",
)

m

m = LeafletMap(center=[2.35, 48.86], zoom=13, controls={}) m.add_basemap("OpenStreetMap") m.add_control("zoom", position="topleft") m.add_marker( 2.2945, 48.8584, popup="

Eiffel Tower

Built in 1889 for the World's Fair.

", tooltip="Eiffel Tower", ) m.add_marker( 2.3522, 48.8606, popup="

Louvre Museum

World's largest art museum.

", tooltip="Louvre", ) m.add_marker( 2.3499, 48.8530, popup="

Notre-Dame

Medieval Catholic cathedral.

", tooltip="Notre-Dame", ) m

Custom icon markers¶

Use icon_url to set a custom marker image. You can also specify icon_size and icon_anchor.

In [ ]:

m2 = LeafletMap(center=[-122.4, 37.78], zoom=13, controls={})
m2.add_basemap("CartoDB.Positron")
m2.add_control("zoom", position="topleft")

green_icon = "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png"
red_icon = "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png"
blue_icon = "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png"

m2.add_marker(
    -122.4194,
    37.7749,
    popup="<b>City Hall</b>",
    tooltip="City Hall",
    icon_url=green_icon,
    icon_size=(25, 41),
    icon_anchor=(12, 41),
)

m2.add_marker(
    -122.3999,
    37.7955,
    popup="<b>Chinatown</b>",
    tooltip="Chinatown",
    icon_url=red_icon,
    icon_size=(25, 41),
    icon_anchor=(12, 41),
)

m2.add_marker(
    -122.4098,
    37.7855,
    popup="<b>Union Square</b>",
    tooltip="Union Square",
    icon_url=blue_icon,
    icon_size=(25, 41),
    icon_anchor=(12, 41),
)

m2

m2 = LeafletMap(center=[-122.4, 37.78], zoom=13, controls={}) m2.add_basemap("CartoDB.Positron") m2.add_control("zoom", position="topleft") green_icon = "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png" red_icon = "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png" blue_icon = "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png" m2.add_marker( -122.4194, 37.7749, popup="City Hall", tooltip="City Hall", icon_url=green_icon, icon_size=(25, 41), icon_anchor=(12, 41), ) m2.add_marker( -122.3999, 37.7955, popup="Chinatown", tooltip="Chinatown", icon_url=red_icon, icon_size=(25, 41), icon_anchor=(12, 41), ) m2.add_marker( -122.4098, 37.7855, popup="Union Square", tooltip="Union Square", icon_url=blue_icon, icon_size=(25, 41), icon_anchor=(12, 41), ) m2

Bulk markers with add_markers()¶

Add many markers at once as a layer group. Each marker can have its own popup, tooltip, and optional custom icon.

In [ ]:

m3 = LeafletMap(center=[0, 51.5], zoom=12, controls={})
m3.add_basemap("CartoDB.Positron")
m3.add_control("zoom", position="topleft")

london_landmarks = [
    {
        "lng": -0.1276,
        "lat": 51.5074,
        "popup": "<b>Trafalgar Square</b>",
        "tooltip": "Trafalgar Square",
    },
    {
        "lng": -0.0762,
        "lat": 51.5081,
        "popup": "<b>Tower of London</b>",
        "tooltip": "Tower of London",
    },
    {
        "lng": -0.1416,
        "lat": 51.5014,
        "popup": "<b>Buckingham Palace</b>",
        "tooltip": "Buckingham Palace",
    },
    {
        "lng": -0.1198,
        "lat": 51.5101,
        "popup": "<b>Covent Garden</b>",
        "tooltip": "Covent Garden",
    },
    {
        "lng": -0.0983,
        "lat": 51.5085,
        "popup": "<b>St. Paul's Cathedral</b>",
        "tooltip": "St. Paul's",
    },
    {
        "lng": -0.1535,
        "lat": 51.5178,
        "popup": "<b>Regent's Park</b>",
        "tooltip": "Regent's Park",
    },
    {
        "lng": -0.1015,
        "lat": 51.5033,
        "popup": "<b>Tate Modern</b>",
        "tooltip": "Tate Modern",
    },
    {"lng": -0.1246, "lat": 51.5007, "popup": "<b>Big Ben</b>", "tooltip": "Big Ben"},
]

m3.add_markers(london_landmarks, name="London Landmarks")
m3.add_layer_control(position="topright")
m3

m3 = LeafletMap(center=[0, 51.5], zoom=12, controls={}) m3.add_basemap("CartoDB.Positron") m3.add_control("zoom", position="topleft") london_landmarks = [ { "lng": -0.1276, "lat": 51.5074, "popup": "Trafalgar Square", "tooltip": "Trafalgar Square", }, { "lng": -0.0762, "lat": 51.5081, "popup": "Tower of London", "tooltip": "Tower of London", }, { "lng": -0.1416, "lat": 51.5014, "popup": "Buckingham Palace", "tooltip": "Buckingham Palace", }, { "lng": -0.1198, "lat": 51.5101, "popup": "Covent Garden", "tooltip": "Covent Garden", }, { "lng": -0.0983, "lat": 51.5085, "popup": "St. Paul's Cathedral", "tooltip": "St. Paul's", }, { "lng": -0.1535, "lat": 51.5178, "popup": "Regent's Park", "tooltip": "Regent's Park", }, { "lng": -0.1015, "lat": 51.5033, "popup": "Tate Modern", "tooltip": "Tate Modern", }, {"lng": -0.1246, "lat": 51.5007, "popup": "Big Ben", "tooltip": "Big Ben"}, ] m3.add_markers(london_landmarks, name="London Landmarks") m3.add_layer_control(position="topright") m3

Draggable markers¶

Set draggable=True to allow users to move a marker by dragging.

In [ ]:

m4 = LeafletMap(center=[0, 51.5], zoom=13, controls={})
m4.add_basemap("OpenStreetMap")
m4.add_control("zoom", position="topleft")

m4.add_marker(
    0,
    51.5,
    popup="Drag me!",
    tooltip="Draggable marker",
    draggable=True,
    marker_id="draggable-1",
)

m4

m4 = LeafletMap(center=[0, 51.5], zoom=13, controls={}) m4.add_basemap("OpenStreetMap") m4.add_control("zoom", position="topleft") m4.add_marker( 0, 51.5, popup="Drag me!", tooltip="Draggable marker", draggable=True, marker_id="draggable-1", ) m4