AnyMap Basic Usage Examples¶

This notebook demonstrates the basic usage of the AnyMap package for creating interactive maps with MapLibre GL JS.

In [1]:

# Import the required modules
from anymap import MapLibreMap
import json

# Import the required modules from anymap import MapLibreMap import json

Creating a Basic Map¶

Let's start by creating a simple map centered on San Francisco.

In [2]:

# Create a basic map
m = MapLibreMap(
    center=[37.7749, -122.4194],  # San Francisco coordinates [lat, lng]
    zoom=12,
    height="500px",
)
m

# Create a basic map m = MapLibreMap( center=[37.7749, -122.4194], # San Francisco coordinates [lat, lng] zoom=12, height="500px", ) m

Out[2]:

Changing Map Properties¶

You can dynamically change map properties after creation:

In [3]:

# Change the center and zoom
m.set_center(40.7128, -74.0060)  # New York City
m.set_zoom(10)

# Change the center and zoom m.set_center(40.7128, -74.0060) # New York City m.set_zoom(10)

In [4]:

# Use fly_to for smooth animation
m.fly_to(51.5074, -0.1278, zoom=14)  # London

# Use fly_to for smooth animation m.fly_to(51.5074, -0.1278, zoom=14) # London

In [5]:

m

m

Out[5]:

Adding Markers¶

You can add markers to the map with optional popups:

In [6]:

# Add a marker with popup
m.add_marker(
    lat=51.5074,
    lng=-0.1278,
    popup="<h3>London</h3><p>Capital of the United Kingdom</p>",
)

# Add a marker with popup m.add_marker( lat=51.5074, lng=-0.1278, popup="

London

Capital of the United Kingdom

", )

Working with GeoJSON Data¶

Let's add some GeoJSON data to the map:

In [7]:

# Sample GeoJSON data
geojson_data = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-0.1278, 51.5074]},
            "properties": {"name": "London", "population": 8900000},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [2.3522, 48.8566]},
            "properties": {"name": "Paris", "population": 2141000},
        },
    ],
}

# Add GeoJSON layer
m.add_geojson_layer(
    layer_id="cities",
    geojson_data=geojson_data,
    layer_type="circle",
    paint={
        "circle-radius": 8,
        "circle-color": "#ff0000",
        "circle-stroke-width": 2,
        "circle-stroke-color": "#ffffff",
    },
)

# Sample GeoJSON data geojson_data = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-0.1278, 51.5074]}, "properties": {"name": "London", "population": 8900000}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [2.3522, 48.8566]}, "properties": {"name": "Paris", "population": 2141000}, }, ], } # Add GeoJSON layer m.add_geojson_layer( layer_id="cities", geojson_data=geojson_data, layer_type="circle", paint={ "circle-radius": 8, "circle-color": "#ff0000", "circle-stroke-width": 2, "circle-stroke-color": "#ffffff", }, )

Event Handling¶

You can register event handlers for map interactions:

In [8]:

# Define event handler
def on_map_click(event):
    lat, lng = event["lngLat"]
    print(f"Map clicked at: {lat:.4f}, {lng:.4f}")


# Register the event handler
m.on_map_event("click", on_map_click)

# Define event handler def on_map_click(event): lat, lng = event["lngLat"] print(f"Map clicked at: {lat:.4f}, {lng:.4f}") # Register the event handler m.on_map_event("click", on_map_click)

Multi-cell Rendering Test¶

Let's test that the same map can be displayed in multiple cells without issues:

In [9]:

# Display the same map instance again
m

# Display the same map instance again m

Out[9]:

In [10]:

# Create a new map instance
m2 = MapLibreMap(
    center=[35.6762, 139.6503],  # Tokyo
    zoom=10,
    height="600px",
    map_style="https://demotiles.maplibre.org/style.json",
)
m2

# Create a new map instance m2 = MapLibreMap( center=[35.6762, 139.6503], # Tokyo zoom=10, height="600px", map_style="https://demotiles.maplibre.org/style.json", ) m2

Out[10]:

In [11]:

# Both maps should work independently
m2.add_marker(35.6762, 139.6503, popup="Tokyo, Japan")

# Both maps should work independently m2.add_marker(35.6762, 139.6503, popup="Tokyo, Japan")

Changing Map Styles¶

You can change the map style dynamically:

In [12]:

# Change to a different style
m2.set_style("https://demotiles.maplibre.org/style.json")

# Change to a different style m2.set_style("https://demotiles.maplibre.org/style.json")

Calling JavaScript Methods¶

You can call any MapLibre GL JS methods directly:

In [13]:

# Set bearing and pitch for 3D effect
m2.set_bearing(45)
m2.set_pitch(60)

# Set bearing and pitch for 3D effect m2.set_bearing(45) m2.set_pitch(60)

In [14]:

# Reset to default view
m2.set_bearing(0)
m2.set_pitch(0)

# Reset to default view m2.set_bearing(0) m2.set_pitch(0)

In [ ]:

In [ ]: