ov-tactical

src/ov-tactical.js

Attributes

attribute
`bearing`	read-only as a property: pass it as an attribute, never as a prop
`countries`
`fov`	read-only as a property: pass it as an attribute, never as a prop
`fresh`	read-only as a property: pass it as an attribute, never as a prop
`lat`	read-only as a property: pass it as an attribute, never as a prop
`lon`	read-only as a property: pass it as an attribute, never as a prop
`orbit`
`pitch`	read-only as a property: pass it as an attribute, never as a prop
`range`	read-only as a property: pass it as an attribute, never as a prop
`ring`	read-only as a property: pass it as an attribute, never as a prop
`source`
`src`

Properties

property	type	kind	accepts	staleness
`countriesData`	`Structured`	structured	not on the reading protocol	not applicable
`data`	`Structured`	structured	not on the reading protocol	not applicable

READ-ONLY PROPERTIES

bearing, fov, fresh, lat, lon, pitch, range, ring

The names in bold are also attributes. Assigning one as a prop throws, so set them in markup.

Events

event
`ov:view`

Using it

import 'overscan'
import 'overscan/overscan.css'

<ov-tactical
  countries="../src/ov-countries.js"
  src="../demo/models/tactical-picture.json"
  lat="35.47"
  lon="-97.52"
  range="1600"
  pitch="30"
  bearing="-18"
  ring="800"
  fresh="600"
  orbit
  style="inline-size:100%"
></ov-tactical>

import { OvTactical } from 'overscan/react'

<OvTactical
  countries="../src/ov-countries.js"
  src="../demo/models/tactical-picture.json"
  lat="35.47"
  lon="-97.52"
  range="1600"
  pitch="30"
  bearing="-18"
  ring="800"
  fresh="600"
  countriesData={data}
  data={data}
  onView={handler}
/>

import { OvTactical } from 'overscan/vue'

<OvTactical
  countries="../src/ov-countries.js"
  src="../demo/models/tactical-picture.json"
  lat="35.47"
  lon="-97.52"
  range="1600"
  pitch="30"
  bearing="-18"
  ring="800"
  fresh="600"
  :countriesData="data"
  :data="data"
  @view="handler"
/>

import OvTactical from 'overscan/svelte/OvTactical.svelte'

<OvTactical
  countries="../src/ov-countries.js"
  src="../demo/models/tactical-picture.json"
  lat="35.47"
  lon="-97.52"
  range="1600"
  pitch="30"
  bearing="-18"
  ring="800"
  fresh="600"
  countriesData={data}
  data={data}
  onview={handler}
/>

The CSS is a separate import in every framework. A single element can be imported on its own instead of the whole kit: import 'overscan/src/ov-chart.js'

A reading is set as a PROPERTY, never an attribute. An attribute is a string, so an array cannot survive one and a null arrives as the word "null", which the protocol would read as a value rather than a dropout.

Every ov: event is bound with addEventListener. The colon has no declarative spelling in Svelte 5, where the on: directive is gone and "onov:commit" is not an identifier, nor in JSX. Vue can bind it.

The wrapper applies attributes ITSELF and hands the framework nothing but a ref. All three frameworks set a prop as a property when the name exists on the element, and this kit has 72 getter-only properties across 39 elements. Assigning one throws, and in React it does not degrade: the whole tree fails to render. 13 elements have a getter-only name that is also a real attribute (at, bearing, digits, duration, floor, fov, fresh, hold, lat, lon, period, pitch, range, ring, rings, span, step, sweep, sweeps, traces, value), which are the ones a reader would naturally pass in markup.