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="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>