A declarative map SDK for streaming, 3D, and app-native experiences — one API instead of a hand-built stack.
Fastest way in
Drop it into Claude Code, Cursor, or any agent that supports skills — it can write OnlyMap manifests straightaway.
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.
<nika-widget type="legend"
title="Magnitude">
</nika-widget><nika-layer id="quakes"
filter-field="magnitude"
filter-range="[4, 10]">
</nika-layer><nika-layer id="quakes"
type="ScatterplotLayer"
data="./quakes.json"
globe-view>
</nika-layer><nika-widget type="vega-lite"
layer="quakes">
</nika-widget><nika-widget type="legend"
position="top-right"
title="Magnitude">
</nika-widget><nika-layer id="quakes"
filter-field="magnitude"
filter-range="[4, 10]">
</nika-layer>
<nika-widget type="filter" layer="quakes">
</nika-widget><nika-widget type="vega-lite"
layer="quakes"
watch="viewport data:quakes">
<script type="application/json">
{ "mark": "bar" }
</script>
</nika-widget><nika-layer id="quakes"
type="ScatterplotLayer"
data="./quakes.json"
get-position="[$lon, $lat]"
globe-view
pickable>
</nika-layer><nika-overlay id="detail" anchor-from="selection">
<b>{{place}}</b> - M {{magnitude}}
</nika-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.
<nika-story autoplay loop>
<nika-step trace layer="route"
duration="3s"></nika-step>
<nika-step action="fly-to"
center="[-122.42, 37.78]"
zoom="14" curve></nika-step>
</nika-story>The manifest is the state. Change an attribute, bind a filter, or swap data and the rendered map follows without imperative glue.
<nika-layer id="risk" data="./risk.json"
get-fill-color="scale($score,
sequential, ['#fee','#b00'])">
</nika-layer>
<nika-widget type="filter" layer="risk" />Terrain, 3D tiles, globe views, and glTF models share one declarative camera so 2D and 3D layers feel like one map.
<nika-layer type="Tile3DLayer"
data="./tileset.json"></nika-layer>
<nika-layer type="ScenegraphLayer"
scenegraph="./tower.glb"
lighting="pbr"></nika-layer>Legends, filters, overlays, and your own controls mount beside the map and stay wired to layers through declarative behaviors.
<nika-widget type="filter" layer="risk">
</nika-widget>
<nika-behavior on="click" layer="risk"
action="show-overlay"
target="detail"></nika-behavior>Selection, overlays, hover state, and camera actions are authored where the layer is defined, so the UI stays readable.
<nika-layer id="sites" pickable>
</nika-layer>
<nika-overlay id="detail"
anchor-from="selection">
{{name}} · {{score}}
</nika-overlay>Sketch, edit, and persist geometries without bolting on a separate drawing library or managing tool state yourself.
<nika-widget type="draw" layer="zones"
modes="polygon, edit">
</nika-widget>
<nika-layer id="zones" editable />Scatter, path, polygon, MVT, heatmap, hexbin, trips, terrain, 3D tiles, and more use the same element model.
<nika-layer type="HexagonLayer" ...></nika-layer>
<nika-layer type="TripsLayer" ...></nika-layer>
<nika-layer type="MVTLayer" ...></nika-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>
<nika-map center="[-122.42,37.78]"
basemap="positron"></nika-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.
<nika-layer id="ais-vessels" type="StreamingLayer"
data="wss://stream.example.com/ais"
protocol="websocket"
get-position="[$lon, $lat]"
get-orientation="$heading"
get-icon="'ship'"
update-key="$mmsi">
</nika-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.
