Center the map on a clicked symbol

This source code of this example is adapted from the MapLibre GL JS example - Center the map on a clicked symbol.

Uncomment the following line to install leafmap if needed.

In [1]:

# %pip install "leafmap[maplibre]"

# %pip install "leafmap[maplibre]"

In [2]:

import leafmap.maplibregl as leafmap
import ipywidgets as widgets

import leafmap.maplibregl as leafmap import ipywidgets as widgets

To run this notebook, you will need an API key from MapTiler. Once you have the API key, you can uncomment the following code block and replace YOUR_API_KEY with your actual API key. Then, run the code block code to set the API key as an environment variable.

In [3]:

# import os
# os.environ["MAPTILER_KEY"] = "YOUR_API_KEY"

# import os # os.environ["MAPTILER_KEY"] = "YOUR_API_KEY"

In [4]:

m = leafmap.Map(center=[-90.96, -0.47], zoom=7.5, style="streets")
image = "https://maplibre.org/maplibre-gl-js/docs/assets/custom_marker.png"
m.add_image("custom-marker", image)
source = {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Point",
                    "coordinates": [-91.395263671875, -0.9145729757782163],
                },
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Point",
                    "coordinates": [-90.32958984375, -0.6344474832838974],
                },
            },
            {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Point",
                    "coordinates": [-91.34033203125, 0.01647949196029245],
                },
            },
        ],
    },
}
m.add_source("points", source)
layer = {
    "id": "symbols",
    "type": "symbol",
    "source": "points",
    "layout": {"icon-image": "custom-marker"},
}
m.add_layer(layer)
m

m = leafmap.Map(center=[-90.96, -0.47], zoom=7.5, style="streets") image = "https://maplibre.org/maplibre-gl-js/docs/assets/custom_marker.png" m.add_image("custom-marker", image) source = { "type": "geojson", "data": { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [-91.395263671875, -0.9145729757782163], }, }, { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [-90.32958984375, -0.6344474832838974], }, }, { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [-91.34033203125, 0.01647949196029245], }, }, ], }, } m.add_source("points", source) layer = { "id": "symbols", "type": "symbol", "source": "points", "layout": {"icon-image": "custom-marker"}, } m.add_layer(layer) m

Failed to retrieve the MapTiler style. Defaulting to 'dark-matter' style.

In [5]:

output = widgets.Output()


def log_lng_lat(lng_lat):
    with output:
        output.clear_output()
        print(lng_lat.new)
        m.fly_to(lng_lat.new["lng"], lng_lat.new["lat"])


m.observe(log_lng_lat, "clicked")
output

output = widgets.Output() def log_lng_lat(lng_lat): with output: output.clear_output() print(lng_lat.new) m.fly_to(lng_lat.new["lng"], lng_lat.new["lat"]) m.observe(log_lng_lat, "clicked") output