documentation-hipster

<!doctype 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="test.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="container d-flex flex-row"> <div class="position-sticky nav-section list px-2"> <h1 class="mt-2 mb-3 me-2">hipster forever-young</h1> <ul class="list-group"> <li class="list-group-item border-0"> <div class="d-flex flex-row align-items-center"> <button class="btn btn-collapse m-0 me-2 p-0 align-items-center 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=text-decoration-none href="#rview"> <h3 class="m-0">RView</h3> </a> </div> <div class="collapse" id="rview-collapse"> <ul class="list-group"> </ul> <ul class="list-group"> <li class="list-group-item border-0"> <div class="d-flex flex-row align-items-center"> <button class="btn btn-collapse m-0 me-2 p-0 align-items-center 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=text-decoration-none href="#center"> <h3 class="m-0">center</h3> </a> </div> <div class="collapse" id="center-collapse"> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> </div> </li> <li class="list-group-item border-0"> <div class="d-flex flex-row align-items-center"> <button class="btn btn-collapse m-0 me-2 p-0 align-items-center 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=text-decoration-none href="#zoom"> <h3 class="m-0">zoom</h3> </a> </div> <div class="collapse" id="zoom-collapse"> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> </div> </li> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> </div> </li> <li class="list-group-item border-0"> <div class="d-flex flex-row align-items-center"> <button class="btn btn-collapse m-0 me-2 p-0 align-items-center 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=text-decoration-none href="#rmap"> <h3 class="m-0">RMap</h3> </a> </div> <div class="collapse" id="rmap-collapse"> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> <ul class="list-group"> </ul> </div> </li> </ul> </div> <div class="main-section ps-3"> <section> <h2 id="rview"> <em class="me-1">typedef</em> RView : { center: Coordinate , zoom: number } </h2> <p> Center and zoom level </p> <h7>Properties</h7> <table class="table table-light"> <thead> <th class="col-2">Property</th> <th class="col-4">Type</th> <th class="col-6">Description</th> </thead> <tbody> <tr> <td class=""> <code>center</code> </td> <td class=""> <code> Coordinate </code> </td> <td class=""> </td> </tr> <tr> <td class=""> <code>zoom</code> </td> <td class=""> <code> number </code> </td> <td class=""> </td> </tr> </tbody> </table> <h7>Properties</h7> <table class="table table-light"> <thead> <th class="col-2">Property</th> <th class="col-4">Type</th> <th class="col-6">Description</th> </thead> <tbody> <tr> <td class=""> <code>center</code> </td> <td class=""> <code> Coordinate </code> </td> <td class=""> <p> Center of the map </p> </td> </tr> <tr> <td class=""> <code>zoom</code> </td> <td class=""> <code> number </code> </td> <td class=""> <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="me-1">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="table table-light"> <thead> <tr> <th class="col-2">Parameter</th> <th class="col-4">Type</th> <th class="col-6">Description</th> </tr> </thead> <tbody> <tr> <td class=""><code>props</code></td> <td class=""><code> Readonly < RMapProps > </code></td> <td class=""></td> </tr> </tbody> </table> <h7>Properties</h7> <table class="table table-light"> <thead> <th class="col-2">Property</th> <th class="col-4">Type</th> <th class="col-6">Description</th> </thead> <tbody> <tr> <td class=""> <code>initial</code> </td> <td class=""> <code> <a href="#rview">RView</a> </code> </td> <td class=""> <p> The initial view parameters - {center, zoom}, reset only on full component reload </p> </td> </tr> <tr> <td class=""> <code>view</code> </td> <td class=""> <code> [ <a href="#rview">RView</a> , ( view: <a href="#rview">RView</a> ) => void ] </code> </td> <td class=""> <p> External view state with React semantics </p> </td> </tr> <tr> <td class=""> <code>className</code> </td> <td class=""> <code> string </code> </td> <td class=""> <p> CSS class </p> </td> </tr> <tr> <td class=""> <code>width</code> </td> <td class=""> <code> number | string </code> </td> <td class=""> <p> Width when not using CSS </p> </td> </tr> <tr> <td class=""> <code>height</code> </td> <td class=""> <code> number | string </code> </td> <td class=""> <p> Height when not using CSS </p> </td> </tr> <tr> <td class=""> <code>noDefaultControls</code> </td> <td class=""> <code> boolean </code> </td> <td class=""> <p> Do not include any default controls </p> <em class="me-1">default</em> <code>false</code> </td> </tr> <tr> <td class=""> <code>noDefaultInteractions</code> </td> <td class=""> <code> boolean </code> </td> <td class=""> <p> Do not include any default interactions </p> <em class="me-1">default</em> <code>false</code> </td> </tr> <tr> <td class=""> <code>projection</code> </td> <td class=""> <code> string </code> </td> <td class=""> <p> View projection </p> <em class="me-1">default</em> <code>'ESPG:3857'</code> </td> </tr> <tr> <td class=""> <code>onClick</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapBrowserEvent < UIEvent > ) => boolean | void </code> </td> <td class=""> <p> Called immediately on click </p> </td> </tr> <tr> <td class=""> <code>onSingleClick</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapBrowserEvent < UIEvent > ) => boolean | void </code> </td> <td class=""> <p> Called on single click when the double click timer has expired </p> </td> </tr> <tr> <td class=""> <code>onDblClick</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapBrowserEvent < UIEvent > ) => boolean | void </code> </td> <td class=""> <p> Called on double click </p> </td> </tr> <tr> <td class=""> <code>onMoveStart</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapBrowserEvent < UIEvent > ) => boolean | void </code> </td> <td class=""> <p> Called when the user starts panning the map </p> </td> </tr> <tr> <td class=""> <code>onMoveEnd</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapBrowserEvent < UIEvent > ) => boolean | void </code> </td> <td class=""> <p> Called when the user stops panning the map </p> </td> </tr> <tr> <td class=""> <code>onPointerDrag</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapBrowserEvent < UIEvent > ) => boolean | void </code> </td> <td class=""> <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=""> <code>onPointerMove</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapBrowserEvent < UIEvent > ) => boolean | void </code> </td> <td class=""> <p> Called on every pointer movement, use with care </p> </td> </tr> <tr> <td class=""> <code>onPostRender</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: MapEvent ) => boolean | void </code> </td> <td class=""> <p> Called after a layer has been rendered </p> </td> </tr> <tr> <td class=""> <code>onPreCompose</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: RenderEvent ) => boolean | void </code> </td> <td class=""> <p> Called before layers are composed </p> </td> </tr> <tr> <td class=""> <code>onPostCompose</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: RenderEvent ) => boolean | void </code> </td> <td class=""> <p> Called after layers are composed </p> </td> </tr> <tr> <td class=""> <code>onRenderComplete</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: RenderEvent ) => boolean | void </code> </td> <td class=""> <p> Called after completely rendering the map </p> </td> </tr> <tr> <td class=""> <code>onChange</code> </td> <td class=""> <code> ( this: <a href="#rmap">RMap</a> , e: BaseEvent ) => void </code> </td> <td class=""> <p> Called on every change </p> </td> </tr> <tr> <td class=""> <code>properties</code> </td> <td class=""> <code> Record < string , any > </code> </td> <td class=""> <p> A set of properties that can be accessed later by .get()/.getProperties() </p> </td> </tr> <tr> <td class=""> <code>extent</code> </td> <td class=""> <code> Extent </code> </td> <td class=""> <p> Extent of the map, cannot be dynamically modified </p> <em class="me-1">default</em> <code>world</code> </td> </tr> <tr> <td class=""> <code>minResolution</code> </td> <td class=""> <code> number </code> </td> <td class=""> <p> Minimum resolution, cannot be dynamically modified </p> </td> </tr> <tr> <td class=""> <code>maxResolution</code> </td> <td class=""> <code> number </code> </td> <td class=""> <p> Maximum resolution, cannot be dynamically modified </p> </td> </tr> <tr> <td class=""> <code>minZoom</code> </td> <td class=""> <code> number </code> </td> <td class=""> <p> Minimum zoom level </p> </td> </tr> <tr> <td class=""> <code>maxZoom</code> </td> <td class=""> <code> number </code> </td> <td class=""> <p> Maximum zoom level </p> </td> </tr> </tbody> </table> </section> <hr> </div> </div> </div> </body> </html>