@nika-js/onlymap 0.5.2 → 0.5.6

package/onlymapjs.html-data.json

@@ -339,7 +339,7 @@
         },
         {
           "name": "data",
-          "description": "Data URL (JSON, GeoJSON, CSV/TSV, Arrow/GeoArrow IPC, Shapefile .shp, KML) or wss:// stream; omit for inline <script type=\"application/json\">."
+          "description": "Data URL (JSON, GeoJSON, CSV/TSV, Arrow/GeoArrow IPC, Shapefile .shp, KML, GPX, FlatGeobuf .fgb, GeoParquet .parquet, CityJSON) or wss:// stream; omit for inline <script type=\"application/json\">."
         },
         {
           "name": "label",
@@ -430,19 +430,19 @@
         },
         {
           "name": "get-position",
-          "description": "Accessor for deck.gl getPosition — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getPosition — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-fill-color",
-          "description": "Accessor for deck.gl getFillColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getFillColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-line-color",
-          "description": "Accessor for deck.gl getLineColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getLineColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-radius",
-          "description": "Accessor for deck.gl getRadius — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getRadius — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "radius",
@@ -526,7 +526,7 @@
         },
         {
           "name": "highlight-color",
-          "description": "Accessor for deck.gl highlightColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl highlightColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "radius-scale",
@@ -558,15 +558,15 @@
         },
         {
           "name": "get-line-width",
-          "description": "Accessor for deck.gl getLineWidth — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getLineWidth — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-pixel-offset",
-          "description": "Accessor for deck.gl getPixelOffset — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getPixelOffset — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-point-radius",
-          "description": "Accessor for deck.gl getPointRadius — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getPointRadius — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "point-radius-units",
@@ -578,7 +578,7 @@
         },
         {
           "name": "get-elevation",
-          "description": "Accessor for deck.gl getElevation — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getElevation — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "extruded",
@@ -638,23 +638,23 @@
         },
         {
           "name": "get-icon",
-          "description": "Accessor for deck.gl getIcon — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getIcon — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-icon-angle",
-          "description": "Accessor for deck.gl getIconAngle — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getIconAngle — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-icon-color",
-          "description": "Accessor for deck.gl getIconColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getIconColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-icon-pixel-offset",
-          "description": "Accessor for deck.gl getIconPixelOffset — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getIconPixelOffset — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-icon-size",
-          "description": "Accessor for deck.gl getIconSize — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getIconSize — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "text-size-max-pixels",
@@ -722,43 +722,43 @@
         },
         {
           "name": "get-text",
-          "description": "Accessor for deck.gl getText — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getText — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-angle",
-          "description": "Accessor for deck.gl getTextAngle — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextAngle — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-color",
-          "description": "Accessor for deck.gl getTextColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-pixel-offset",
-          "description": "Accessor for deck.gl getTextPixelOffset — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextPixelOffset — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-size",
-          "description": "Accessor for deck.gl getTextSize — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextSize — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-anchor",
-          "description": "Accessor for deck.gl getTextAnchor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextAnchor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-alignment-baseline",
-          "description": "Accessor for deck.gl getTextAlignmentBaseline — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextAlignmentBaseline — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-background-color",
-          "description": "Accessor for deck.gl getTextBackgroundColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextBackgroundColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-border-color",
-          "description": "Accessor for deck.gl getTextBorderColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextBorderColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-text-border-width",
-          "description": "Accessor for deck.gl getTextBorderWidth — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTextBorderWidth — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "line-joint-rounded",
@@ -790,7 +790,7 @@
         },
         {
           "name": "get-polygon",
-          "description": "Accessor for deck.gl getPolygon — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getPolygon — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "full3d",
@@ -798,15 +798,15 @@
         },
         {
           "name": "get-subtext",
-          "description": "Accessor for deck.gl getSubtext — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getSubtext — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-color",
-          "description": "Accessor for deck.gl getColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-size",
-          "description": "Accessor for deck.gl getSize — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getSize — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "layout",
@@ -826,15 +826,15 @@
         },
         {
           "name": "get-orientation",
-          "description": "Accessor for deck.gl getOrientation — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getOrientation — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-scale",
-          "description": "Accessor for deck.gl getScale — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getScale — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-translation",
-          "description": "Accessor for deck.gl getTranslation — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTranslation — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "size-scale",
@@ -854,7 +854,7 @@
         },
         {
           "name": "get-transform-matrix",
-          "description": "Accessor for deck.gl getTransformMatrix — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTransformMatrix — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "tileset",
@@ -878,7 +878,7 @@
         },
         {
           "name": "get-point-color",
-          "description": "Accessor for deck.gl getPointColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getPointColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "loader",
@@ -906,31 +906,31 @@
         },
         {
           "name": "get-source-position",
-          "description": "Accessor for deck.gl getSourcePosition — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getSourcePosition — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-target-position",
-          "description": "Accessor for deck.gl getTargetPosition — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTargetPosition — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-source-color",
-          "description": "Accessor for deck.gl getSourceColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getSourceColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-target-color",
-          "description": "Accessor for deck.gl getTargetColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTargetColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-width",
-          "description": "Accessor for deck.gl getWidth — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getWidth — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-height",
-          "description": "Accessor for deck.gl getHeight — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getHeight — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-tilt",
-          "description": "Accessor for deck.gl getTilt — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTilt — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "great-circle",
@@ -1026,7 +1026,7 @@
         },
         {
           "name": "get-angle",
-          "description": "Accessor for deck.gl getAngle — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getAngle — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "joint-rounded",
@@ -1046,11 +1046,11 @@
         },
         {
           "name": "get-path",
-          "description": "Accessor for deck.gl getPath — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getPath — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-normal",
-          "description": "Accessor for deck.gl getNormal — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getNormal — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "_normalize",
@@ -1066,15 +1066,15 @@
         },
         {
           "name": "get-background-color",
-          "description": "Accessor for deck.gl getBackgroundColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getBackgroundColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-border-color",
-          "description": "Accessor for deck.gl getBorderColor — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getBorderColor — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-border-width",
-          "description": "Accessor for deck.gl getBorderWidth — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getBorderWidth — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "background-border-radius",
@@ -1134,23 +1134,23 @@
         },
         {
           "name": "get-alignment-baseline",
-          "description": "Accessor for deck.gl getAlignmentBaseline — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getAlignmentBaseline — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-content-box",
-          "description": "Accessor for deck.gl getContentBox — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getContentBox — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-pentagon",
-          "description": "Accessor for deck.gl getPentagon — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getPentagon — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-geohash",
-          "description": "Accessor for deck.gl getGeohash — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getGeohash — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-hexagons",
-          "description": "Accessor for deck.gl getHexagons — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getHexagons — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "high-precision",
@@ -1162,7 +1162,7 @@
         },
         {
           "name": "get-hexagon",
-          "description": "Accessor for deck.gl getHexagon — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getHexagon — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "extent",
@@ -1226,11 +1226,11 @@
         },
         {
           "name": "get-quadkey",
-          "description": "Accessor for deck.gl getQuadkey — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getQuadkey — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-s2-token",
-          "description": "Accessor for deck.gl getS2Token — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getS2Token — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "elevation-data",
@@ -1266,7 +1266,7 @@
         },
         {
           "name": "get-timestamps",
-          "description": "Accessor for deck.gl getTimestamps — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getTimestamps — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "grid-origin",
@@ -1274,7 +1274,7 @@
         },
         {
           "name": "get-weight",
-          "description": "Accessor for deck.gl getWeight — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getWeight — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "gpu-aggregation",
@@ -1302,11 +1302,11 @@
         },
         {
           "name": "get-color-value",
-          "description": "Accessor for deck.gl getColorValue — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getColorValue — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-color-weight",
-          "description": "Accessor for deck.gl getColorWeight — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getColorWeight — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "color-aggregation",
@@ -1334,11 +1334,11 @@
         },
         {
           "name": "get-elevation-value",
-          "description": "Accessor for deck.gl getElevationValue — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getElevationValue — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "get-elevation-weight",
-          "description": "Accessor for deck.gl getElevationWeight — expression language: $field, scale(), arithmetic."
+          "description": "Accessor for deck.gl getElevationWeight — expression language: $field, scale(), formatDate(), arithmetic."
         },
         {
           "name": "elevation-aggregation",
@@ -1599,6 +1599,15 @@
             {
               "name": "draw-save"
             },
+            {
+              "name": "measure-mode"
+            },
+            {
+              "name": "measure-clear"
+            },
+            {
+              "name": "measure-units"
+            },
             {
               "name": "set-basemap"
             },
@@ -1664,6 +1673,9 @@
             {
               "name": "draw"
             },
+            {
+              "name": "measure"
+            },
             {
               "name": "basemap-switcher"
             },
@@ -1757,6 +1769,40 @@
           "name": "field",
           "description": "Data field (filter / vega-lite widgets)."
         },
+        {
+          "name": "format",
+          "description": "Filter value-label format. Use date for epoch-millisecond fields; default number.",
+          "values": [
+            {
+              "name": "number"
+            },
+            {
+              "name": "date"
+            }
+          ]
+        },
+        {
+          "name": "date-style",
+          "description": "Filter date label style when format=\"date\".",
+          "values": [
+            {
+              "name": "date"
+            },
+            {
+              "name": "datetime"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "iso"
+            }
+          ]
+        },
+        {
+          "name": "time-zone",
+          "description": "Filter date label time zone when format=\"date\": UTC (default), local, or an IANA zone such as Asia/Singapore."
+        },
         {
           "name": "story",
           "description": "Story id (player widget)."
@@ -1767,7 +1813,7 @@
         },
         {
           "name": "modes",
-          "description": "Draw widget: space-separated tools to show.",
+          "description": "Draw widget: space-separated tools (point line polygon). Measure widget: space-separated modes (distance area).",
           "values": [
             {
               "name": "point line polygon"
@@ -1780,6 +1826,15 @@
             },
             {
               "name": "polygon"
+            },
+            {
+              "name": "distance area"
+            },
+            {
+              "name": "distance"
+            },
+            {
+              "name": "area"
             }
           ]
         },
@@ -1802,6 +1857,21 @@
           "name": "autosave",
           "description": "Draw widget: localStorage key — mirrors the sketch and restores it on reload."
         },
+        {
+          "name": "units",
+          "description": "Measure / scale-bar widget: unit system for length and area.",
+          "values": [
+            {
+              "name": "metric"
+            },
+            {
+              "name": "imperial"
+            },
+            {
+              "name": "nautical"
+            }
+          ]
+        },
         {
           "name": "options",
           "description": "Basemap-switcher: space-separated preset names to offer (default: every keyless registered preset)."
@@ -1937,6 +2007,15 @@
             {
               "name": "draw-save"
             },
+            {
+              "name": "measure-mode"
+            },
+            {
+              "name": "measure-clear"
+            },
+            {
+              "name": "measure-units"
+            },
             {
               "name": "set-basemap"
             },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nika-js/onlymap",
-  "version": "0.5.2",
+  "version": "0.5.6",
   "description": "Declarative deck.gl maps for HTML and React — interactive WebGL mapping with GeoJSON/CSV/Arrow data, MapLibre basemaps, widgets, popups, and live streams from a custom-element manifest or typed React components. TypeScript, no build step.",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
@@ -150,8 +150,11 @@
     "d3-color": "^3.1.0",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
+    "flatgeobuf": "^4.4.0",
     "fzstd": "^0.1.1",
     "happy-dom": "^20.10.6",
+    "hyparquet": "^1.27.1",
+    "hyparquet-compressors": "^1.1.1",
     "jotai": "^2.20.2",
     "maplibre-gl": "^5.24.0",
     "mobx": "^6.16.1",

package/skills/onlymapjs/SKILL.md

@@ -23,7 +23,7 @@ Use OnlyMapJS as a declarative HTML map library. Write custom elements such as `
 </script>
 ```
 
-For no-build CDN pages, use the single-file standalone bundle from a raw-file CDN — `https://unpkg.com/@nika-js/onlymap@0.5.2` (the bare package URL serves `dist/onlymap.standalone.js`) — plus `<link rel="stylesheet" href="https://unpkg.com/@nika-js/onlymap@0.5.2/dist/onlymapjs.css">`. Never a rebundling CDN (esm.sh, skypack): re-bundling duplicates the deck.gl/luma.gl runtime and every layer fails shader compilation.
+For no-build CDN pages, use the single-file standalone bundle from a raw-file CDN — `https://unpkg.com/@nika-js/onlymap@0.5.6` (the bare package URL serves `dist/onlymap.standalone.js`) — plus `<link rel="stylesheet" href="https://unpkg.com/@nika-js/onlymap@0.5.6/dist/onlymapjs.css">`. Never a rebundling CDN (esm.sh, skypack): re-bundling duplicates the deck.gl/luma.gl runtime and every layer fails shader compilation.
 
 ## React Projects
 
@@ -52,6 +52,8 @@ Load the smallest reference needed for the task:
 - Attribute names are kebab-case: `get-fill-color`, `radius-units`, `line-width-min-pixels`.
 - Accessor values are expressions: `get-position="[$lon, $lat]"`.
 - `scale()` always needs an explicit `domain=`.
+- Format epoch-millisecond or ISO fields with the safe `formatDate()` built-in, e.g. `get-text="formatDate($time, 'datetime', 'UTC')"`. Do not use `new Date()`, `Intl`, or method calls in restricted expressions.
+- For a built-in filter over epoch milliseconds, add `format="date"` with optional `date-style="date|datetime|time|iso"` and `time-zone="UTC|local|<IANA zone>"`; do not hand-roll a time slider only to format its labels.
 - ScatterplotLayer points need an explicit size — `radius="6" radius-units="pixels"`, `get-radius="..."`, or `radius-min-pixels="..."`: deck's default is 1 METER, sub-pixel at city zooms, and validation warns on layers with no radius source.
 - Prefer canonical color expressions — a `sequential`/`diverging`/`threshold` `scale()` or an equality ternary chain — over hand-rolled arithmetic: the legend widget parses these shapes and renders a matching gradient ramp / class ranges / category palette automatically.
 - Inline handlers such as `onclick` are wrong. Use `data-emit`, `<om-behavior>`, or widget scripts.
@@ -74,6 +76,7 @@ Load the smallest reference needed for the task:
 - Live entity updates -> `wss://` stream with `key` and optional `source` decoder.
 - REST snapshot that changes over time -> `refresh="5s"`.
 - User sketching -> `data="draw:sketch"` layer plus `<om-widget type="draw" target="sketch">`.
+- Measure geodesic distance or area (a ruler / area tool) -> `<om-widget type="measure" modes="distance area" units="metric|imperial|nautical">`. Click the map to place points; it shows live per-segment + total labels and dispatches an `om-measure` event (`detail` = the readout). Reuses the draw capture stack, so measure and draw are mutually exclusive. Do NOT hand-roll distance math off canvas pixels; the `scale-bar` widget also takes `units` now.
 - Capture raw map clicks/hovers yourself (measure distance, drop a pin where the user clicks, a custom rectangle/circle AOI, snap-to-feature) -> listen for the **`om-map-point`** DOM event on `<om-map>`: `mapEl.addEventListener('om-map-point', e => { const { coordinate, kind } = e.detail; /* [lng,lat] or null; kind is "click"|"hover" */ })`. It fires on EVERY click/hover including empty-map clicks. NEVER read deck.gl internals (`getMap()`, `deckInstance`, `deck.viewManager`) or unproject canvas pixels by hand — those are not on `<om-map>` and will silently return nothing. The built-in `draw` widget covers polygon/line/point sketching; `om-map-point` is for tools it doesn't. (`MapController` twin: the `onMapPoint` option. See patterns.md.)
 - Page may travel as a file (shared, emailed, downloaded) or be embedded -> add an `<om-fallback>` child to `<om-map>`. Chat-app and email previews render HTML with JavaScript disabled (iOS QuickLook), so the map cannot boot there; the fallback is what recipients see instead. It is hidden automatically once the map boots. Good practice on every complete page — without one, the stylesheet shows a generic text-only banner.