# OnlyMapJS Patterns
Use these patterns as starting points. Replace data URLs, layer ids, fields, centers, and style values with the user's domain.
## Minimal Point Map
```html
OnlyMapJS map
This interactive map requires JavaScript — open this file in a web browser.
```
Every complete-page pattern below should also carry an `` (omitted for brevity) — see the good-practice rule in SKILL.md.
## Click Popup
```html
{{place}} M {{magnitude}}
```
## Hover Tooltip
```html
{{name}} Value: {{value}}
```
## Choropleth GeoJSON
```html
```
For GeoJSON, `$rate` reads `feature.properties.rate`.
## Filtered Dashboard
```html
```
## Custom Stats Widget
```html
```
## Dense Labels with PopupLayer
```html
```
Use `PopupLayer` instead of many `` elements for labels/badges at scale.
## WebSocket Fleet
```html
```
## Polled REST Fleet
```html
```
## Draw/Sketch Map
```html
```
## Capture Raw Map Clicks (measure tool, drop-a-pin, custom AOI)
For anything the `draw` widget doesn't cover — a distance/area measurer, dropping
a pin at the clicked coordinate, a custom rectangle/circle AOI — read the
**`om-map-point`** event. It gives you the map coordinate of every click and
hover. Do NOT reach into deck.gl (`getMap()`, `deckInstance`, `deck.viewManager`)
or unproject canvas pixels — none of that is exposed on ``.
```html
```
Notes: `coordinate` is `null` when the click lands off the globe; `kind` is
`"hover"` for the live pointer (use it for a rubber-band segment) and `"click"`
for a committed point. The programmatic twin is the `MapController` `onMapPoint`
option; test it headlessly with `h.mapPoint(coordinate, kind)`.
## Story/Tour
```html