The avatar for @danieljdufour
Daniel J. Dufour
Conflict Resolution, GIS, Tacos
Published
Edited
Mar 13, 2022
2 stars
Insert cell
# Reproject a Map Tile using GeoWarp
with Sample Tile from [Stamen Maps](http://maps.stamen.com/#watercolor/12/37.7706/-122.3782)
Insert cell
z = 11
Insert cell
x = 327
Insert cell
y = 791
Insert cell
url = `https://stamen-tiles-c.a.ssl.fastly.net/watercolor/${z}/${x}/${y}.jpg`
Insert cell
loadImage = require("easy-image-loader@0.1.0")
Insert cell
Insert cell
readPixels = require("read-pixels@0.4.0")
Insert cell
pixels = readPixels({ data: img })
Insert cell
proj4 = require("proj4")
Insert cell
proj4js = "+proj=aea +lat_1=20 +lat_2=60 +lat_0=40 +lon_0=-96 +x_0=0 +y_0=0 +datum=NAD83 +units=m +no_defs "
Insert cell
proj4obj = proj4("EPSG:3857", proj4js)
Insert cell
inverse = proj4obj.inverse
Insert cell
forward = proj4obj.forward
Insert cell
geowarp = import("https://cdn.skypack.dev/geowarp@1.3.0").then(module => module.default)
Insert cell
tilebelt = import('https://cdn.skypack.dev/@mapbox/tilebelt@1.0.2?min')
Insert cell
reprojectBoundingBox = require("reproject-bbox")
Insert cell
bbox4326 = tilebelt.tileToBBOX([x, y, z]);
Insert cell
bbox3857 = reprojectBoundingBox({ bbox: bbox4326, from: 4326, to: 3857 });
Insert cell
out_bbox = reprojectBoundingBox({ bbox: bbox3857, from: 3857, to: proj4js })
Insert cell
typeof inverse
Insert cell
height = pixels.height
Insert cell
width = pixels.width
Insert cell
warped = geowarp({
in_bbox: bbox3857,
in_data: pixels.pixels,
in_height: height,
in_layout: "[row,column,band]",
in_pixel_depth: 4,
in_srs: 3857,
in_width: width,
out_height: height,
out_layout: "[row,column,band]",
out_no_data: 0,
out_srs: proj4js,
out_width: width,
round: true,
inverse,
forward
});
Insert cell
new Set(warped.data)
Insert cell
toCanvas = require("to-canvas@0.1.0")
Insert cell
toCanvas({ data: warped.data, height, width })
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more