Skip to main content

Leaflet

Display responsive Tile maps in Jupyter Notebooks with the ipyleaflet library.

alt text

1. Create UDF in Workbennch​

Create a signed HTTP endpoint for a raster Tile UDF.

2. Create a Leaflet map​

Raster Tile layers​

Modify the HTTP endpoint to introduce templatized XYZ Tile parameters ({{z}}/{{x}}/{{y}}) as well as query strings for other UDF-specific parameters (?crop_type={crop_type}), and pass it to the TileLayer.

import ipyleaflet

crop_type = "almond"
m = ipyleaflet.Map(
    center=(37.316, -120.69),
    zoom=10,
    basemap=ipyleaflet.basemaps.CartoDB.PositronOnlyLabels,
)
l = ipyleaflet.TileLayer(
    url=f"https://www.fused.io/server/v1/realtime-shared/8110ef6e0c66f07f0c73f39843db27ece3960f98f268f38ef2f79f3623faae01/run/tiles/{{z}}/{{x}}/{{y}}?crop_type={crop_type}",
    tile_size=512,
    zoom_offset=-1,
    cross_origin=True,
    show_loading=True,
)
m.add_layer(l)
m

Vector Tile layers​

Similarly, Vector Tiles are rendered by passing the HTTP endpoint to a VectorTileLayer.

import ipyleaflet

m = ipyleaflet.Map(center=(37.7749, -122.4194), zoom=17)

l = ipyleaflet.VectorTileLayer(
    url="https://www.fused.io/server/v1/realtime-shared/fsh_5M8jCBuswIF8PcFvZBP9k9/run/tiles/{z}/{x}/{y}?dtype_out_vector=mvt"
)
m.add_layer(l)
m
note

If on Colab, Enable the ipyleaflet widget (might require restarting the kernel).

# !pip install ipywidgets==7.7.1 -q
# from google.colab import output
# output.enable_custom_widget_manager()