OSMIX

About

Osmix is a high-level toolkit for loading, manipulating, and exporting OpenStreetMap data in the browser. It provides streaming PBF parsing, memory-efficient indexing, raster/vector tile generation, routing, and merge workflows - all running off the main thread via Web Workers.

Installation

Install the osmix package with your package manager of choice.

$ bun add osmix

Examples

import { createRemote } from "osmix"

const remote = await createRemote()
const osmInfo = await remote.fromPbf(pbfFile)

console.log("Nodes:", osmInfo.stats.nodes)
console.log("Ways:", osmInfo.stats.ways)
console.log("Relations:", osmInfo.stats.relations)
console.log("Bbox:", osmInfo.bbox)

import { createRemote } from "osmix"

const remote = await createRemote()
const osmInfo = await remote.fromPbf(pbfFile)

const zoom = 14
const tileSize = 256
const [minX, minY, maxX, maxY] = bboxToTileRange(osmInfo.bbox, zoom)
const canvas = document.getElementById("map-canvas") as HTMLCanvasElement
const ctx = canvas.getContext("2d")

for (const [x, y] of listTiles(minX, minY, maxX, maxY)) {
  const tile = await remote.getRasterTile(osmInfo.id, [x, y, zoom], tileSize)
  const image = new ImageData(tile, tileSize, tileSize)
  ctx.putImageData(image, (x - minX) * tileSize, (y - minY) * tileSize)
}

import { createRemote } from "osmix"

const remote = await createRemote()
const osmInfo = await remote.fromPbf(pbfFile)

const results = await remote.search(osmInfo.id, "amenity", "restaurant")

console.log("Nodes:", results.nodes.length)
console.log("Ways:", results.ways.length)
console.log("Relations:", results.relations.length)

import { createRemote } from "osmix"

const remote = await createRemote()
const osmInfo = await remote.fromPbf(pbfFile)

// Click on map to set origin and destination
map.on('click', async (e) => {
	const point = [e.lngLat.lng, e.lngLat.lat]
	const snapped = await remote.findNearestRoutableNode(
	osmInfo.id, point, 500
	)
	if (snapped) {
	// Use snapped.nodeIndex for routing
	}
})

// Calculate route between two snapped nodes
const result = await remote.route(
	osmInfo.id, fromNode.nodeIndex, toNode.nodeIndex,
	{ includeStats: true, includePathInfo: true }
)

Packages

Osmix is a collection of packages that work together to provide a complete toolkit for working with OpenStreetMap data. You can use each package individually or together to build your own workflow.