rlayers/docs/1299.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[1299],{1299:(e,n,o)=>{o.r(n),o.d(n,{default:()=>t});const t="/**\n * This example shows how to extend RLayers to include support for your custom component\n */\n\nimport React, {JSX} from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport {MapboxVectorLayer as VectorMapbox} from 'ol-mapbox-style';\n\nimport {RMap, RLayer, RLayerProps} from 'rlayers';\n\n/**\n * The properties interface definition\n */\ninterface MyLayerMapboxProps extends RLayerProps {\n    styleUrl: string;\n    accessToken: string;\n}\n\n/**\n * A component wrapper for ol/layer/MapboxVector\n */\nclass MyLayerMapbox extends RLayer<MyLayerMapboxProps> {\n    ol: VectorMapbox;\n\n    // Tiled layers must extend RLayerRaster, non-tiled vector layers must extend RLayerVector\n    // This allows you to have the same features as RLayers built-in components\n    // Completely custom layers must extend RLayer\n    constructor(props: Readonly<MyLayerMapboxProps>) {\n        // You must call the parent constructor\n        super(props);\n\n        // You must create the this.ol object which must be compatible with the this.ol of the parent\n        this.ol = new VectorMapbox({\n            ...props\n        });\n\n        // You must enumerate all OpenLayers event sources here\n        this.eventSources = [this.ol];\n\n        // And call this function for the event handlers to work\n        this.attachEventHandlers();\n    }\n}\n\n/**\n * Using your custom component\n */\nexport default function Addon(): JSX.Element {\n    return (\n        <RMap className='example-map' initial={{center: fromLonLat([2.364, 48.82]), zoom: 11}}>\n            <MyLayerMapbox\n                styleUrl={'mapbox://styles/mapbox/bright-v9'}\n                // Be sure to get your own Mapbox token\n                // (this won't work in CodePen)\n                accessToken={MAPBOX_TOKEN}\n            />\n        </RMap>\n    );\n}\n"}}]);