rlayers/docs/8175.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[8175],{8175(e,n,o){o.d(n,{default:()=>t});const t="import React, {JSX, useCallback} from 'react';\nimport {fromLonLat, toLonLat} from 'ol/proj';\nimport {Coordinate} from 'ol/coordinate';\nimport {Point} from 'ol/geom';\nimport 'ol/ol.css';\n\nimport {RMap, ROSM, RLayerVector, RFeature, ROverlay, RStyle} from 'rlayers';\nimport locationIcon from './svg/location.svg';\n\nconst coords: Record<string, Coordinate> = {\n    origin: [2.364, 48.82],\n    Montmartre: [2.342, 48.887]\n};\n\n// This example is meant to illustrate the use of the various RFeature callbacks\n// If you simply want to implement a translation interaction,\n// the Move & Select example has a method which handles the pointer movements\n// internally with a much better performance\nexport default function PinDrop(): JSX.Element {\n    const [loc, setLoc] = React.useState(coords.Montmartre);\n    return (\n        <React.Fragment>\n            <RMap className='example-map' initial={{center: fromLonLat(coords.origin), zoom: 11}}>\n                <ROSM />\n                <RLayerVector>\n                    <RFeature<Point>\n                        geometry={new Point(fromLonLat(loc))}\n                        // useCallback is here for performance reasons\n                        // without it RFeature will have its props updated at every call\n                        onPointerDrag={useCallback((e) => {\n                            const coords = e.map.getCoordinateFromPixel(e.pixel);\n                            e.target.setGeometry(new Point(coords));\n                            // this stops OpenLayers from interpreting the event to pan the map\n                            return false;\n                        }, [])}\n                        onPointerDragEnd={useCallback((e) => {\n                            const coords = e.map.getCoordinateFromPixel(e.pixel);\n                            setLoc(toLonLat(coords));\n                        }, [])}\n                        onPointerEnter={useCallback(\n                            (e) => (e.map.getTargetElement().style.cursor = 'move') && undefined,\n                            []\n                        )}\n                        onPointerLeave={useCallback(\n                            (e) => (e.map.getTargetElement().style.cursor = 'initial') && undefined,\n                            []\n                        )}\n                    >\n                        <RStyle.RStyle>\n                            <RStyle.RIcon src={locationIcon} anchor={[0.5, 0.8]} />\n                        </RStyle.RStyle>\n                        <ROverlay className='example-overlay'>Move me</ROverlay>\n                    </RFeature>\n                </RLayerVector>\n            </RMap>\n            <div className='mx-0 mt-0 mb-3 p-1 w-100 jumbotron shadow shadow'>\n                <p>\n                    Pin location is <strong>{`${loc[1].toFixed(3)} : ${loc[0].toFixed(3)}`}</strong>\n                </p>\n            </div>\n        </React.Fragment>\n    );\n}\n"}}]);