OpenLayers Image Overlay & Select¶

This notebook demonstrates georeferenced image overlays, vector tile layers, and the select interaction.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import OpenLayersMap

from anymap_ts import OpenLayersMap

Georeferenced Image Overlay¶

Overlay a static image on the map at a specific geographic extent.

In [ ]:

m = OpenLayersMap(center=[-122.15, 37.45], zoom=10, height="600px")
m.add_basemap("OpenStreetMap")

m.add_image_layer(
    url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Over_London_by_Rail.jpg/1280px-Over_London_by_Rail.jpg",
    bounds=[-122.4, 37.3, -121.9, 37.6],
    name="historical-image",
    opacity=0.7,
)
m

m = OpenLayersMap(center=[-122.15, 37.45], zoom=10, height="600px") m.add_basemap("OpenStreetMap") m.add_image_layer( url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Over_London_by_Rail.jpg/1280px-Over_London_by_Rail.jpg", bounds=[-122.4, 37.3, -121.9, 37.6], name="historical-image", opacity=0.7, ) m

Adjust Image Opacity¶

In [ ]:

m.set_opacity("historical-image", 0.4)

m.set_opacity("historical-image", 0.4)

Select Interaction¶

Click on features to select them. Selected features are highlighted and their properties are captured.

In [ ]:

import json
import urllib.request

url = "https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json"
with urllib.request.urlopen(url) as response:
    us_states = json.loads(response.read())

m = OpenLayersMap(center=[-98, 38], zoom=4, height="600px")
m.add_basemap("CartoDB.Positron")
m.add_geojson(
    us_states,
    name="states",
    style={
        "fillColor": "rgba(51, 136, 255, 0.4)",
        "strokeColor": "#3388ff",
        "strokeWidth": 1,
    },
)
m.add_select_interaction()
m

import json import urllib.request url = "https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json" with urllib.request.urlopen(url) as response: us_states = json.loads(response.read()) m = OpenLayersMap(center=[-98, 38], zoom=4, height="600px") m.add_basemap("CartoDB.Positron") m.add_geojson( us_states, name="states", style={ "fillColor": "rgba(51, 136, 255, 0.4)", "strokeColor": "#3388ff", "strokeWidth": 1, }, ) m.add_select_interaction() m

Show Popup on Feature Click¶

In [ ]:

m2 = OpenLayersMap(center=[-98, 38], zoom=4, height="600px")
m2.add_basemap("CartoDB.Positron")
m2.add_geojson(
    us_states,
    name="states-popup",
    style={
        "fillColor": "rgba(46, 204, 113, 0.4)",
        "strokeColor": "#27ae60",
        "strokeWidth": 1,
    },
    popup="<b>{name}</b><br>Density: {density}",
)
m2

m2 = OpenLayersMap(center=[-98, 38], zoom=4, height="600px") m2.add_basemap("CartoDB.Positron") m2.add_geojson( us_states, name="states-popup", style={ "fillColor": "rgba(46, 204, 113, 0.4)", "strokeColor": "#27ae60", "strokeWidth": 1, }, popup="{name}
Density: {density}", ) m2

Popup with Property Table¶

In [ ]:

m3 = OpenLayersMap(center=[-98, 38], zoom=4, height="600px")
m3.add_basemap("CartoDB.Positron")
m3.add_geojson(
    us_states,
    name="states-table",
    style={
        "fillColor": "rgba(155, 89, 182, 0.4)",
        "strokeColor": "#8e44ad",
        "strokeWidth": 1,
    },
    popup_properties=["name", "density"],
)
m3

m3 = OpenLayersMap(center=[-98, 38], zoom=4, height="600px") m3.add_basemap("CartoDB.Positron") m3.add_geojson( us_states, name="states-table", style={ "fillColor": "rgba(155, 89, 182, 0.4)", "strokeColor": "#8e44ad", "strokeWidth": 1, }, popup_properties=["name", "density"], ) m3