The avatar for @reyemtm
Malcolm Meyer
Data Analyst & Web Visualization Specialist with a passion for Web Maps. Experienced with Mapbox GL JS and Leaflet JS.
Published
Edited
Apr 11, 2022
Fork of Network efficient SQLite querying from static file hosting.
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
query = worker.db.exec(
`SELECT tile_data FROM tiles WHERE zoom_level = ${zoom} AND tile_column = ${col} AND tile_row = ${flippedY}`
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pbf = new Protobuf.default(query[0].values[0][0])
Insert cell
tile = new VectorTile.VectorTile(pbf)
Insert cell
layer = Object.keys(tile.layers)[0];
Insert cell
tile.layers[layer].feature(0).bbox()
Insert cell
geojson = tile.layers[layer].feature(0).toGeoJSON(col,row,zoom) //tile_col, tiole_row, zoom
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sqlite = require("sql.js-httpvfs")
Insert cell
// Magically this gets around same origin policy for running web workers.
workerUrl = URL.createObjectURL(
new Blob([await FileAttachment("sqlite.worker@1.js").text()], {
type: 'application/javascript'
})
)
Insert cell
wasmUrl = FileAttachment("sql-wasm@1.wasm").url()
Insert cell
Insert cell
VectorTile = import('https://cdn.skypack.dev/vector-tile@1.3.0')
Insert cell
Protobuf = import("https://cdn.skypack.dev/pbf@3.0.5")
Insert cell
Insert cell
gzip = import("https://cdn.skypack.dev/gzip-js")
Insert cell
d3 = require("d3@6")
Insert cell
Insert cell
Insert cell
// import { Table } from '@observablehq/inputs'
Insert cell
// configURL = 'https://storage.googleapis.com/o_endpointservices_mybucket11/public/world-development-indicators-sqlite/split-db/config.json'
Insert cell
// configJSON = {
// "serverMode": "chunked",
// "requestChunkSize": 1024,
// "databaseLengthBytes": 668751872,
// "serverChunkSize": 10485760,
// "urlPrefix": "db.sqlite3.",
// "suffixLength": 3
// }
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more