MapLibre Geocoder Control Example¶

This notebook demonstrates how to use the geocoder control with MapLibre GL JS maps in AnyMap.

In [1]:

from anymap import MapLibreMap

from anymap import MapLibreMap

Basic Geocoder Control (Collapsed Mode)¶

Create a map with a collapsed geocoder control that shows only a search icon initially. Click the icon to expand the search input:

In [2]:

# Create a MapLibre map
m = MapLibreMap(
    center=[-87.61694, 41.86625], zoom=10, style="positron", height="600px"  # Chicago
)

# Add a collapsed geocoder control (default behavior)
m.add_geocoder_control(position="top-left", collapsed=True)

m

# Create a MapLibre map m = MapLibreMap( center=[-87.61694, 41.86625], zoom=10, style="positron", height="600px" # Chicago ) # Add a collapsed geocoder control (default behavior) m.add_geocoder_control(position="top-left", collapsed=True) m

Out[2]:

Custom Geocoder Configuration¶

You can customize the geocoder with different settings:

In [3]:

# Create a map with expanded geocoder
m_expanded = MapLibreMap(
    center=[2.3522, 48.8566], zoom=11, style="positron", height="600px"  # Paris
)

# Add an expanded geocoder control
m_expanded.add_geocoder_control(position="top-left", collapsed=False)

m_expanded

# Create a map with expanded geocoder m_expanded = MapLibreMap( center=[2.3522, 48.8566], zoom=11, style="positron", height="600px" # Paris ) # Add an expanded geocoder control m_expanded.add_geocoder_control(position="top-left", collapsed=False) m_expanded

Out[3]:

Expanded Geocoder Control¶

You can also create a geocoder that shows the input box immediately without requiring a click:

In [4]:

# Create a map with custom geocoder settings
m2 = MapLibreMap(center=[0, 0], zoom=2, style="dark-matter", height="600px")

# Add geocoder with custom API configuration
custom_api_config = {
    "forwardGeocode": True,
    "reverseGeocode": False,
    "placeholder": "Search for cities, countries...",
    "limit": 10,
    "api_url": "https://nominatim.openstreetmap.org/search",
}

m2.add_geocoder_control(position="top-right", api_config=custom_api_config)

m2

# Create a map with custom geocoder settings m2 = MapLibreMap(center=[0, 0], zoom=2, style="dark-matter", height="600px") # Add geocoder with custom API configuration custom_api_config = { "forwardGeocode": True, "reverseGeocode": False, "placeholder": "Search for cities, countries...", "limit": 10, "api_url": "https://nominatim.openstreetmap.org/search", } m2.add_geocoder_control(position="top-right", api_config=custom_api_config) m2

Out[4]:

Export to HTML¶

The geocoder control is also preserved when exporting to HTML:

In [5]:

# Export the map with geocoder to HTML
m.to_html("geocoder_map.html")
print("Map with geocoder control exported to geocoder_map.html")

# Export the map with geocoder to HTML m.to_html("geocoder_map.html") print("Map with geocoder control exported to geocoder_map.html")

Map with geocoder control exported to geocoder_map.html

Combining with Other Controls¶

The geocoder control works well with other map controls:

In [6]:

# Create a comprehensive map with multiple controls
m3 = MapLibreMap(
    center=[-74.0059, 40.7128],  # New York City
    zoom=12,
    style="liberty",
    height="600px",
)

# Add various controls
m3.add_geocoder_control(position="top-left")
m3.add_control("navigation", "top-right")
m3.add_control("fullscreen", "top-right")
m3.add_control("scale", "bottom-left")
m3.add_layer_control(position="top-right")

# Add a basemap for more visual context
m3.add_basemap("OpenStreetMap.Mapnik")

m3

# Create a comprehensive map with multiple controls m3 = MapLibreMap( center=[-74.0059, 40.7128], # New York City zoom=12, style="liberty", height="600px", ) # Add various controls m3.add_geocoder_control(position="top-left") m3.add_control("navigation", "top-right") m3.add_control("fullscreen", "top-right") m3.add_control("scale", "bottom-left") m3.add_layer_control(position="top-right") # Add a basemap for more visual context m3.add_basemap("OpenStreetMap.Mapnik") m3

Out[6]: