A declarative map SDK for streaming, 3D, and app-native experiences — one API instead of a hand-built stack.
Fastest way in
Install the library, wire up your editor, and hand the OnlyMap skill to any agent that supports skills — it writes OnlyMap manifests straightaway. No build step? Load esm.sh/@nika-js/onlymap straight into an HTML file.
Install the library — free for non-commercial use
Wire up VS Code — IntelliSense + manifest snippets
Teach your coding agent — Claude Code, Cursor, Codex
Our manifesto
OnlyMap abstracts away the WebGL and state-management barrier of map libraries. The declarative manifest, globe, popup, and widget you write are exactly what renders. No shader code, no imperative glue, no technical experience required.
<om-widget type="legend"
title="Magnitude">
</om-widget><om-layer id="quakes"
filter-field="magnitude"
filter-range="[4, 10]">
</om-layer><om-layer id="quakes"
type="ScatterplotLayer"
data="./quakes.json"
get-position="[$lon, $lat]"
pickable>
</om-layer><om-widget type="vega-lite"
layer="quakes">
</om-widget><om-widget type="legend"
position="top-right"
title="Magnitude">
</om-widget><om-layer id="quakes"
filter-field="magnitude"
filter-range="[4, 10]">
</om-layer>
<om-widget type="filter" layer="quakes">
</om-widget><om-widget type="vega-lite"
layer="quakes"
watch="viewport data:quakes">
<script type="application/json">
{ "mark": "bar" }
</script>
</om-widget><om-layer id="quakes"
type="ScatterplotLayer"
data="./quakes.json"
get-position="[$lon, $lat]"
pickable>
</om-layer><om-overlay id="detail" anchor-from="selection">
<b>{{place}}</b> - M {{magnitude}}
</om-overlay>OnlyMap JS features
OnlyMap JS gives developers the pieces that normally require separate renderers, plugins, widgets, and custom state code. Each feature below shows the rendered preview beside the manifest that drives it. See more in the documentation .
Build fly-throughs, route traces, camera moves, and timed scenes as HTML steps instead of hand-written animation controllers.
<om-story autoplay loop>
<om-step trace layer="route"
duration="3s"></om-step>
<om-step action="fly-to"
center="[-122.42, 37.78]"
zoom="14" curve></om-step>
</om-story>The manifest is the state. Change an attribute, bind a filter, or swap data and the rendered map follows without imperative glue.
<om-layer id="risk" data="./risk.json"
get-fill-color="scale($score,
sequential, ['#fee','#b00'],
domain=[0, 100])">
</om-layer>
<om-widget type="filter" layer="risk"
field="score"></om-widget>Terrain, 3D tiles, globe views, and glTF models share one declarative camera so 2D and 3D layers feel like one map.
<om-layer id="city" type="Tile3DLayer"
data="./tileset.json"></om-layer>
<om-layer id="tower" type="ScenegraphLayer"
scenegraph="./tower.glb"
get-orientation="[0, $heading, 90]">
</om-layer>Legends, filters, overlays, and your own controls mount beside the map and stay wired to layers through declarative behaviors.
<om-widget type="filter" layer="risk">
</om-widget>
<om-behavior on="click" layer="risk"
action="show-overlay"
target="detail"></om-behavior>Selection, overlays, hover state, and camera actions are authored where the layer is defined, so the UI stays readable.
<om-layer id="sites" pickable>
</om-layer>
<om-overlay id="detail"
anchor-from="selection">
{{name}} · {{score}}
</om-overlay>Sketch, edit, and persist geometries without bolting on a separate drawing library or managing tool state yourself.
<om-widget type="draw" target="zones"
modes="point line polygon"
save="both">
</om-widget>
<om-layer id="zones" type="GeoJsonLayer"
data="draw:zones"></om-layer>Scatter, path, polygon, MVT, heatmap, hexbin, trips, terrain, 3D tiles, and more use the same element model.
<om-layer type="HexagonLayer" ...></om-layer>
<om-layer type="TripsLayer" ...></om-layer>
<om-layer type="MVTLayer" ...></om-layer>Prototype straight from a script tag, then grow into a framework app when you need it. The first integration stays compact.
<script type="module" src="onlymapjs">
</script>
<om-map center="[-122.42,37.78]"
basemap="positron"></om-map>Every layer, ready today
The examples rotate through common OnlyMap layer families. Click any layer to pause the loop and inspect the OnlyMap preview beside the exact manifest shape.
<om-layer id="ais-vessels" type="ScatterplotLayer"
data="wss://stream.example.com/ais"
key="mmsi" flush="250ms"
label="Live vessels"
get-position="[$lon, $lat]"
radius="4" radius-units="pixels"
pickable>
</om-layer>Example Maps
These public NIKA Studio examples show the kind of map applications teams can assemble with OnlyMap-style components, data layers, dashboards, and generated UI.
