documentation-hipster
Version:
documentation.js Bootstrap Theme with TypeScript and React support
1,556 lines (722 loc) • 26.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>
hipster
forever-young | Documentation
</title>
<script src="bootstrap.bundle.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="hipster.css" rel="stylesheet">
<meta name="description" content="documentation.js Bootstrap Theme with TypeScript and React support">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div class="class1">
<div class="class2">
<h1 class="class4">hipster forever-young</h1>
<ul class="class9">
<li class="class10">
<div class="class7">
<button class="class8 collapsed" data-bs-target="#rview-collapse"
data-bs-toggle="collapse">
<span class="font-monospace if-collapsed">+</span>
<span class="font-monospace if-not-collapsed">-</span> </button>
<a class=class11 href="#rview">
<h3 class="class12">RView</h3>
</a>
</div>
<div class="collapse" id="rview-collapse">
<ul class="class9">
</ul>
<ul class="class9">
<li class="class10">
<div class="class7">
<button class="class8 collapsed" style="visibility: hidden" data-bs-target="#center-collapse"
data-bs-toggle="collapse">
<span class="font-monospace if-collapsed">+</span>
<span class="font-monospace if-not-collapsed">-</span> </button>
<a class=class11 href="#center">
<h3 class="class12">center</h3>
</a>
</div>
<div class="collapse" id="center-collapse">
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
</div>
</li>
<li class="class10">
<div class="class7">
<button class="class8 collapsed" style="visibility: hidden" data-bs-target="#zoom-collapse"
data-bs-toggle="collapse">
<span class="font-monospace if-collapsed">+</span>
<span class="font-monospace if-not-collapsed">-</span> </button>
<a class=class11 href="#zoom">
<h3 class="class12">zoom</h3>
</a>
</div>
<div class="collapse" id="zoom-collapse">
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
</div>
</li>
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
</div>
</li>
<li class="class10">
<div class="class7">
<button class="class8 collapsed" style="visibility: hidden" data-bs-target="#rmap-collapse"
data-bs-toggle="collapse">
<span class="font-monospace if-collapsed">+</span>
<span class="font-monospace if-not-collapsed">-</span> </button>
<a class=class11 href="#rmap">
<h3 class="class12">RMap</h3>
</a>
</div>
<div class="collapse" id="rmap-collapse">
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
<ul class="class9">
</ul>
</div>
</li>
</ul>
</div>
<div class="class3">
<section>
<h2 id="rview">
<em class="class6">typedef</em> RView
: { center: Coordinate
, zoom: number
}
</h2>
<p>
Center and zoom level
</p>
<h7>Properties</h7>
<table class="class13">
<thead>
<th class="class14">Property</th>
<th class="class15">Type</th>
<th class="class16">Description</th>
</thead>
<tbody>
<tr>
<td class="class17">
<code>center</code>
</td>
<td class="class18">
<code> Coordinate
</code>
</td>
<td class="class19">
</td>
</tr>
<tr>
<td class="class17">
<code>zoom</code>
</td>
<td class="class18">
<code> number
</code>
</td>
<td class="class19">
</td>
</tr>
</tbody>
</table>
<h7>Properties</h7>
<table class="class13">
<thead>
<th class="class14">Property</th>
<th class="class15">Type</th>
<th class="class16">Description</th>
</thead>
<tbody>
<tr>
<td class="class17">
<code>center</code>
</td>
<td class="class18">
<code> Coordinate
</code>
</td>
<td class="class19">
<p>
Center of the map
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>zoom</code>
</td>
<td class="class18">
<code> number
</code>
</td>
<td class="class19">
<p>
Zoom level, 0 is the whole world, 28 is maximum resolution
</p>
</td>
</tr>
</tbody>
</table>
</section>
<hr>
<section>
<h2 id="rmap">
<em class="class6">class</em> RMap
</h2>
<p>
Main map component
</p>
<p>
All other components, except
<code>RStyle</code>
should be part of an
<code><a href="#rmap">RMap</a></code>
</p>
<h7>Parameters</h7>
<table class="class13">
<thead>
<tr>
<th class="class14">Parameter</th>
<th class="class15">Type</th>
<th class="class16">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="class17"><code>props</code></td>
<td class="class18"><code> Readonly
<
RMapProps
>
</code></td>
<td class="class19"></td>
</tr>
</tbody>
</table>
<h7>Properties</h7>
<table class="class13">
<thead>
<th class="class14">Property</th>
<th class="class15">Type</th>
<th class="class16">Description</th>
</thead>
<tbody>
<tr>
<td class="class17">
<code>initial</code>
</td>
<td class="class18">
<code> <a href="#rview">RView</a>
</code>
</td>
<td class="class19">
<p>
The initial view parameters - {center, zoom}, reset only on full component reload
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>view</code>
</td>
<td class="class18">
<code> [
<a href="#rview">RView</a>
, (
view: <a href="#rview">RView</a>
)
=> void
]
</code>
</td>
<td class="class19">
<p>
External view state with React semantics
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>className</code>
</td>
<td class="class18">
<code> string
</code>
</td>
<td class="class19">
<p>
CSS class
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>width</code>
</td>
<td class="class18">
<code> number
| string
</code>
</td>
<td class="class19">
<p>
Width when not using CSS
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>height</code>
</td>
<td class="class18">
<code> number
| string
</code>
</td>
<td class="class19">
<p>
Height when not using CSS
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>noDefaultControls</code>
</td>
<td class="class18">
<code> boolean
</code>
</td>
<td class="class19">
<p>
Do not include any default controls
</p>
<em class="me-1">default</em> <code>false</code>
</td>
</tr>
<tr>
<td class="class17">
<code>noDefaultInteractions</code>
</td>
<td class="class18">
<code> boolean
</code>
</td>
<td class="class19">
<p>
Do not include any default interactions
</p>
<em class="me-1">default</em> <code>false</code>
</td>
</tr>
<tr>
<td class="class17">
<code>projection</code>
</td>
<td class="class18">
<code> string
</code>
</td>
<td class="class19">
<p>
View projection
</p>
<em class="me-1">default</em> <code>'ESPG:3857'</code>
</td>
</tr>
<tr>
<td class="class17">
<code>onClick</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called immediately on click
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onSingleClick</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called on single click when the double click timer has expired
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onDblClick</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called on double click
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onMoveStart</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called when the user starts panning the map
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onMoveEnd</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called when the user stops panning the map
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onPointerDrag</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called on every pointer move when dragging,
<code>e.preventDefault()</code>
can be used to stop OpenLayers from also panning the map
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onPointerMove</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapBrowserEvent
<
UIEvent
>
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called on every pointer movement, use with care
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onPostRender</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: MapEvent
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called after a layer has been rendered
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onPreCompose</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: RenderEvent
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called before layers are composed
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onPostCompose</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: RenderEvent
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called after layers are composed
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onRenderComplete</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: RenderEvent
)
=> boolean
| void
</code>
</td>
<td class="class19">
<p>
Called after completely rendering the map
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>onChange</code>
</td>
<td class="class18">
<code> (
this: <a href="#rmap">RMap</a>
,
e: BaseEvent
)
=> void
</code>
</td>
<td class="class19">
<p>
Called on every change
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>properties</code>
</td>
<td class="class18">
<code> Record
<
string
,
any
>
</code>
</td>
<td class="class19">
<p>
A set of properties that can be accessed later by .get()/.getProperties()
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>extent</code>
</td>
<td class="class18">
<code> Extent
</code>
</td>
<td class="class19">
<p>
Extent of the map, cannot be dynamically modified
</p>
<em class="me-1">default</em> <code>world</code>
</td>
</tr>
<tr>
<td class="class17">
<code>minResolution</code>
</td>
<td class="class18">
<code> number
</code>
</td>
<td class="class19">
<p>
Minimum resolution, cannot be dynamically modified
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>maxResolution</code>
</td>
<td class="class18">
<code> number
</code>
</td>
<td class="class19">
<p>
Maximum resolution, cannot be dynamically modified
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>minZoom</code>
</td>
<td class="class18">
<code> number
</code>
</td>
<td class="class19">
<p>
Minimum zoom level
</p>
</td>
</tr>
<tr>
<td class="class17">
<code>maxZoom</code>
</td>
<td class="class18">
<code> number
</code>
</td>
<td class="class19">
<p>
Maximum zoom level
</p>
</td>
</tr>
</tbody>
</table>
</section>
<hr>
</div>
</div>
</div>
</body>
</html>