rlayers/docs/1955.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[1955],{1955(e,n,o){o.d(n,{default:()=>t});const t="import React, {JSX} from 'react';\nimport {fromLonLat} from 'ol/proj';\nimport {Geometry, Point} from 'ol/geom';\nimport {Geolocation as OLGeoLoc} from 'ol';\nimport 'ol/ol.css';\n\nimport {RMap, ROSM, RLayerVector, RFeature, RGeolocation, RStyle, useOL} from 'rlayers';\nimport locationIcon from './svg/location.svg';\n\nfunction GeolocComp(): JSX.Element {\n    const [pos, setPos] = React.useState(new Point(fromLonLat([0, 0])));\n    const [accuracy, setAccuracy] = React.useState(undefined as Geometry | undefined);\n    // Low-level access to the OpenLayers API\n    const {map} = useOL();\n\n    return (\n        <>\n            <RGeolocation\n                tracking={true}\n                trackingOptions={{enableHighAccuracy: true}}\n                onChange={React.useCallback(\n                    (e) => {\n                        const geoloc = e.target as OLGeoLoc;\n                        setPos(new Point(geoloc.getPosition()));\n                        setAccuracy(geoloc.getAccuracyGeometry());\n\n                        map.getView().fit(geoloc.getAccuracyGeometry(), {\n                            duration: 250,\n                            maxZoom: 15\n                        });\n                    },\n                    [map]\n                )}\n            />\n            <RLayerVector zIndex={10}>\n                <RStyle.RStyle>\n                    <RStyle.RIcon src={locationIcon} anchor={[0.5, 0.8]} />\n                    <RStyle.RStroke color={'#007bff'} width={3} />\n                </RStyle.RStyle>\n                <RFeature geometry={pos}></RFeature>\n                <RFeature geometry={accuracy}></RFeature>\n            </RLayerVector>\n        </>\n    );\n}\n\nexport default function Geolocation(): JSX.Element {\n    return (\n        <RMap className='example-map' initial={{center: fromLonLat([0, 0]), zoom: 4}}>\n            <ROSM />\n            <GeolocComp />\n        </RMap>\n    );\n}\n"}}]);