OSMIX

OpenStreetMap toolkit for the browser

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/core package with your package manager of choice.

$ bun add osmix

Examples

1. Load File and Get Stats

Load an OSM PBF file and extract basic statistics including node, way, and relation counts, plus the geographic bounding box.

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)

Select a file above to see results...

2. Display OSM on a Map

Render OSM data as raster tiles using a custom MapLibre protocol, overlaying the data on any base map style.

import { createRemote } from "osmix"
import maplibregl from "maplibre-gl"

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

maplibregl.addProtocol("osmix", async (req) => {
  const [, osmId, z, x, y] = req.url.match(
    /osmix:\\/\\/(.+)\\/(\\d+)\\/(\\d+)\\/(\\d+)/
  )
  const tile = await remote.getRasterTile(osmId, [+x, +y, +z])
  return { data: await tileToImageBuffer(tile) }
})

const map = new maplibregl.Map({
  container: "map",
  style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
})

map.on("load", () => {
  map.addSource("osmix", {
    type: "raster",
    tiles: [\`osmix://\${osmInfo.id}/{z}/{x}/{y}\`],
    tileSize: 256
  })
  map.addLayer({ id: "osmix", type: "raster", source: "osmix" })
})

Select a file above to see the map...

3. Search Tags

Query OSM elements by tag key and optional value, returning matching nodes, ways, and relations from the loaded dataset.

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)

Select a file and enter a search query...

Type ID Tags

4. Routing

Calculate routes between points on the road network. Click the map to set origin and destination, with automatic snapping to the nearest routable node.

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 }
)

Select a file above, then click on the map to set origin and destination...

Property Value

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.

Package Description
@osmix/core In-memory OSM index with typed arrays and spatial queries
@osmix/pbf Low-level PBF reading and writing
@osmix/json PBF to JSON entity conversion
@osmix/geojson GeoJSON import/export
@osmix/geoparquet GeoParquet import
@osmix/gtfs GTFS feed import
@osmix/shapefile Shapefile import
@osmix/change Changeset generation and merge workflows
@osmix/raster Raster tile rendering
@osmix/vt Vector tile encoding (MVT)
@osmix/shortbread Shortbread schema vector tiles
@osmix/router Pathfinding on OSM road networks
@osmix/shared Shared utilities and types