rlayers/docs/1610.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[1610],{1610:(e,o,n)=>{n.r(o),n.d(o,{default:()=>r});const r="import React, {JSX} from 'react';\nimport {fromLonLat} 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    ArcDeTriomphe: [2.295, 48.8737]\n};\n\nexport default function Overlays(): JSX.Element {\n    return (\n        <RMap className='example-map' initial={{center: fromLonLat(coords.origin), zoom: 11}}>\n            <ROSM />\n            <RLayerVector zIndex={10}>\n                <RStyle.RStyle>\n                    <RStyle.RIcon src={locationIcon} anchor={[0.5, 0.8]} />\n                </RStyle.RStyle>\n                <RFeature\n                    geometry={new Point(fromLonLat(coords.ArcDeTriomphe))}\n                    onClick={(e) =>\n                        e.map.getView().fit(e.target.getGeometry().getExtent(), {\n                            duration: 250,\n                            maxZoom: 15\n                        })\n                    }\n                >\n                    <ROverlay className='example-overlay'>\n                        Arc de Triomphe\n                        <br />\n                        <em>&#11017; click to zoom</em>\n                    </ROverlay>\n                </RFeature>\n            </RLayerVector>\n        </RMap>\n    );\n}\n"}}]);