To HTML¶

This notebook demonstrates the to_html() method, which renders the map as an HTML file.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

All Default Controls¶

Add all 26 controls with a single call. The grid dimensions are auto-calculated.

In [ ]:

from anymap_ts import MapLibreMap

m = MapLibreMap(center=[-98, 38.5], zoom=4)
m.add_basemap("Esri.WorldImagery")
geojson_data = {
    "type": "FeatureCollection",
    "features": [
        # Points - Landmarks
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
            "properties": {"name": "San Francisco City Hall", "type": "landmark"},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4862, 37.8199]},
            "properties": {"name": "Golden Gate Bridge", "type": "landmark"},
        },
        # LineStrings - Routes
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-122.4194, 37.7749],
                    [-122.4100, 37.7855],
                    [-122.3894, 37.7866],
                ],
            },
            "properties": {"name": "Market Street Route", "type": "route"},
        },
        # Polygons - Neighborhoods
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-122.415, 37.795],
                        [-122.395, 37.795],
                        [-122.395, 37.780],
                        [-122.415, 37.780],
                        [-122.415, 37.795],
                    ]
                ],
            },
            "properties": {
                "name": "Downtown",
                "type": "neighborhood",
                "elevation": 500,
            },
        },
    ],
}
m.add_geojson(geojson_data)
m.to_html("map.html")
m

from anymap_ts import MapLibreMap m = MapLibreMap(center=[-98, 38.5], zoom=4) m.add_basemap("Esri.WorldImagery") geojson_data = { "type": "FeatureCollection", "features": [ # Points - Landmarks { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": {"name": "San Francisco City Hall", "type": "landmark"}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4862, 37.8199]}, "properties": {"name": "Golden Gate Bridge", "type": "landmark"}, }, # LineStrings - Routes { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-122.4194, 37.7749], [-122.4100, 37.7855], [-122.3894, 37.7866], ], }, "properties": {"name": "Market Street Route", "type": "route"}, }, # Polygons - Neighborhoods { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ [-122.415, 37.795], [-122.395, 37.795], [-122.395, 37.780], [-122.415, 37.780], [-122.415, 37.795], ] ], }, "properties": { "name": "Downtown", "type": "neighborhood", "elevation": 500, }, }, ], } m.add_geojson(geojson_data) m.to_html("map.html") m

Markers and Legend¶

Add multiple markers and a legend to the map, then export to HTML.

In [ ]:

from anymap_ts import Map

m = Map(center=[-98, 38.5], zoom=4)

# Add a single marker with popup and tooltip
m.add_marker(-122.4, 37.8, popup="San Francisco", tooltip="Hover me!", color="#0000ff")

# Add multiple markers from a list of dictionaries
cities = [
    {"name": "New York", "lng": -74.0, "lat": 40.7},
    {"name": "Chicago", "lng": -87.6, "lat": 41.9},
    {"name": "Los Angeles", "lng": -118.2, "lat": 34.1},
    {"name": "Seattle", "lng": -122.3, "lat": 47.6},
]
m.add_markers(cities, popup_column="name", color="#ff6600")

# Add a legend
m.add_legend(
    title="Land Cover",
    labels=["Forest", "Water", "Urban"],
    colors=["#228822", "#0000FF", "#808080"],
    position="bottom-right",
)

# Export to HTML - markers and legend will be preserved
m.to_html("markers_legend.html")
m

from anymap_ts import Map m = Map(center=[-98, 38.5], zoom=4) # Add a single marker with popup and tooltip m.add_marker(-122.4, 37.8, popup="San Francisco", tooltip="Hover me!", color="#0000ff") # Add multiple markers from a list of dictionaries cities = [ {"name": "New York", "lng": -74.0, "lat": 40.7}, {"name": "Chicago", "lng": -87.6, "lat": 41.9}, {"name": "Los Angeles", "lng": -118.2, "lat": 34.1}, {"name": "Seattle", "lng": -122.3, "lat": 47.6}, ] m.add_markers(cities, popup_column="name", color="#ff6600") # Add a legend m.add_legend( title="Land Cover", labels=["Forest", "Water", "Urban"], colors=["#228822", "#0000FF", "#808080"], position="bottom-right", ) # Export to HTML - markers and legend will be preserved m.to_html("markers_legend.html") m