pbogden / framework-map

How to put a satellite image on MapLibre in Observable Framework

framework-map

How to put a satellite image on MapLibre with Observable Framework

image processing

Convert from GeoTIFF to PNG using GDAL. (Note: if you installed geopandas from conda-forge, then you have gdal.) The final projection must be Web Mercator.

Our demo file is transverse Mercator

gdalinfo data/vt.tif

Convert to Web Mercator

gdalwarp -t_srs EPSG:3857 -r near data/vt.tif data/webmap.tif

Get corner coordinates in decimal degrees from "wgs84Extent" in the JSON output

gdalinfo -json data/webmap.tif

Convert to PNG

gdal_translate data/webmap.tif data/webmap.png

Observable notebook

• Vermont

Observable Framework

Framework has great documentation. See: getting started. The ./hello-framework directory is a barebones project that created with

yarn create @observablehq

Copy the PNG into the data directory of the Framework project. For example:

cp data/webmap.png hello-framework/docs/data

hello-framework/docs/map.md has a Framework version of the Observable notebook: Vermont.

Deploy on github pages, in this case served from ./docs

mkdir docs
touch docs/.nojekyll
cd hello-framework
yarn build
cp -r dist/* ../docs

The site is here: https://pbogden.github.io/framework-map/

See also...

• MapLibre GL -- Fil demo
• mcclare.blog
• observable-framework-maps -- github
  • demo

Map tiles

The solution above creates a single image. This approach creates raster map tiles, which are also available on the github-pages demo. Create the tiles with:

gdal2tiles.py data/webmap.tif docs/webmap

hello-framework/docs/tiles.md has a Framework version of the observable notebook: Vermont tiles.