Tooltip & Coordinates Control¶

This notebook demonstrates:

• Tooltips: Show formatted information on feature hover
• Coordinates Control: Display cursor lat/lng position

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Tooltip with Template¶

Use {property} placeholders to format tooltip content.

In [ ]:

from anymap_ts import Map

geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]},
            "properties": {"name": "San Francisco", "pop": 870000, "state": "CA"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-118.2, 34.1]},
            "properties": {"name": "Los Angeles", "pop": 3900000, "state": "CA"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-73.9, 40.7]},
            "properties": {"name": "New York", "pop": 8300000, "state": "NY"},
        },
    ],
}

m = Map(center=[-98, 38], zoom=3)
m.add_geojson(geojson, name="cities", circle_radius=8, circle_color="#ff6600")
m.add_tooltip("cities", template="<b>{name}</b><br>Population: {pop}<br>State: {state}")
m

from anymap_ts import Map geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4, 37.8]}, "properties": {"name": "San Francisco", "pop": 870000, "state": "CA"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-118.2, 34.1]}, "properties": {"name": "Los Angeles", "pop": 3900000, "state": "CA"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-73.9, 40.7]}, "properties": {"name": "New York", "pop": 8300000, "state": "NY"}, }, ], } m = Map(center=[-98, 38], zoom=3) m.add_geojson(geojson, name="cities", circle_radius=8, circle_color="#ff6600") m.add_tooltip("cities", template="{name}
Population: {pop}
State: {state}") m

Tooltip with Selected Properties¶

Show only specific properties in the tooltip.

In [ ]:

m2 = Map(center=[-98, 38], zoom=3)
m2.add_geojson(geojson, name="cities", circle_radius=8, circle_color="#0088ff")
m2.add_tooltip("cities", properties=["name", "pop"])
m2

m2 = Map(center=[-98, 38], zoom=3) m2.add_geojson(geojson, name="cities", circle_radius=8, circle_color="#0088ff") m2.add_tooltip("cities", properties=["name", "pop"]) m2

Tooltip Showing All Properties¶

When no template or properties are specified, all feature properties are displayed.

In [ ]:

m3 = Map(center=[-98, 38], zoom=3)
m3.add_geojson(geojson, name="cities", circle_radius=8, circle_color="#00cc66")
m3.add_tooltip("cities")
m3

m3 = Map(center=[-98, 38], zoom=3) m3.add_geojson(geojson, name="cities", circle_radius=8, circle_color="#00cc66") m3.add_tooltip("cities") m3

Remove Tooltip¶

In [ ]:

m3.remove_tooltip("cities")

m3.remove_tooltip("cities")

Coordinates Control¶

Display the cursor's latitude and longitude as you move the mouse.

In [ ]:

m4 = Map(center=[-122.4, 37.8], zoom=10)
m4.add_basemap("OpenStreetMap")
m4.add_coordinates_control(position="bottom-left", precision=4)
m4

m4 = Map(center=[-122.4, 37.8], zoom=10) m4.add_basemap("OpenStreetMap") m4.add_coordinates_control(position="bottom-left", precision=4) m4

High-Precision Coordinates¶

In [ ]:

m5 = Map(center=[-122.4, 37.8], zoom=15)
m5.add_basemap("OpenStreetMap")
m5.add_coordinates_control(position="bottom-right", precision=6)
m5

m5 = Map(center=[-122.4, 37.8], zoom=15) m5.add_basemap("OpenStreetMap") m5.add_coordinates_control(position="bottom-right", precision=6) m5

Remove Coordinates Control¶

In [ ]:

m5.remove_coordinates_control()

m5.remove_coordinates_control()