rlayers/docs/4653.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[4653],{4653(n,e,t){t.d(e,{default:()=>o});const o="import React, {JSX} from 'react';\nimport {fromLonLat, toLonLat} from 'ol/proj';\nimport 'ol/ol.css';\nimport 'rlayers/control/layers.css';\n\nimport {RMap, ROSM} from 'rlayers';\nimport {RView} from 'rlayers/RMap';\n\nconst origin = fromLonLat([2.364, 48.82]);\n\nexport default function ExternalState(): JSX.Element {\n    const [view, setView] = React.useState<RView>({center: origin, zoom: 11});\n    return (\n        <React.Fragment>\n            <RMap className='example-map' initial={view} view={[view, setView]}>\n                <ROSM />\n            </RMap>\n            <div className='mx-0 mt-0 mb-3 p-1 w-100 jumbotron shadow d-flex flex-row justify-content-between'>\n                <div>\n                    Center is at\n                    <strong className='mx-1'>\n                        {`${toLonLat(view.center)[1].toFixed(3)}° :\n                    ${toLonLat(view.center)[0].toFixed(3)}°`}\n                    </strong>\n                </div>\n                <div>\n                    Zoom level is <strong className='mx-1'>{Math.round(view.zoom)}</strong>\n                </div>\n                <div>\n                    Resolution is\n                    <strong className='mx-1'>\n                        {view.resolution && view.resolution.toFixed(2)}m/pixel\n                    </strong>\n                </div>\n            </div>\n        </React.Fragment>\n    );\n}\n"}}]);