rlayers/docs/2966.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[2966],{2966(e,n,t){t.d(n,{default:()=>r});const r="import React, {JSX} from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport 'ol/ol.css';\n\nimport {RMap, RLayerTileWebGL, ROSMWebGL, RControl} from 'rlayers';\nimport 'rlayers/control/layers.css';\n\nconst center = fromLonLat([2.364, 48.82]);\nexport default function Simple(): JSX.Element {\n    return (\n        <React.Fragment>\n            <RMap width={'100%'} height={'60vh'} initial={{center: center, zoom: 11}}>\n                <RControl.RLayers>\n                    <ROSMWebGL properties={{label: 'OSM'}} />\n                    <RLayerTileWebGL\n                        properties={{label: 'OpenTopo'}}\n                        url='https://{a-c}.tile.opentopomap.org/{z}/{x}/{y}.png'\n                        attributions='Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © OpenTopoMap (CC-BY-SA)'\n                    />\n                </RControl.RLayers>\n            </RMap>\n            <div className={'my-4'}>\n                <strong>WebGL generally allows for a smoother animation experience</strong>\n                <p>Use the button in the upper right corner to switch the active layer</p>\n            </div>\n        </React.Fragment>\n    );\n}\n"}}]);