rlayers/docs/8946.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[8946],{8946(n,e,a){a.d(e,{default:()=>t});const t="import React, {JSX} from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport {RMap, RLayerTile} from 'rlayers';\nimport spinnerIcon from './svg/pacman.svg';\nimport 'ol/ol.css';\n\nexport default function Layers(): JSX.Element {\n    const [loading, setLoading] = React.useState(true);\n    const showSpinner = React.useCallback(() => setLoading(true), [setLoading]);\n    const hideSpinner = React.useCallback(() => setLoading(false), [setLoading]);\n    const origin = React.useMemo(() => ({center: fromLonLat([2.364, 48.82]), zoom: 4}), []);\n    return (\n        <>\n            <RMap\n                className='example-map'\n                initial={origin}\n                //onLoadStart={showSpinner}\n                onLoadEnd={hideSpinner}\n            >\n                <RLayerTile\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            </RMap>\n            <div className='example-spinner' style={{display: loading ? 'initial' : 'none'}}>\n                <img src={spinnerIcon} alt='spinner' />\n                <strong>{loading} Loading...</strong>\n            </div>\n        </>\n    );\n}\n"}}]);