rlayers/docs/3416.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[3416],{3416:(e,n,t)=>{t.r(n),t.d(n,{default:()=>o});const o="import React, {JSX, useCallback} from 'react';\nimport {Feature} from 'ol';\nimport {fromLonLat} from 'ol/proj';\nimport GeoJSON from 'ol/format/GeoJSON';\nimport {Point} from 'ol/geom';\nimport 'ol/ol.css';\n\nimport {RMap, ROSM, RLayerVector, RStyle} from 'rlayers';\n\n/**\n * Including data from a static file included at bundling time\n * webpack will do everything necessary\n * (this won't work in CodePen)\n */\nimport geojsonFeatures from './data/geo.json';\n\nexport default function Features(): JSX.Element {\n    const [flow, setFlow] = React.useState([]);\n    return (\n        <div className='d-flex flex-row'>\n            <RMap className='example-map' initial={{center: fromLonLat([2.364, 48.82]), zoom: 11}}>\n                <ROSM />\n                {/* When using TypeScript you can (optionally) specify the type of the features */}\n                <RLayerVector<Feature<Point>>\n                    zIndex={10}\n                    /* Input data will have to be typed too */\n                    features={\n                        new GeoJSON({\n                            featureProjection: 'EPSG:3857',\n                            featureClass: Feature\n                        }).readFeatures(geojsonFeatures) as Feature<Point>[]\n                    }\n                    /* The type will be propagated to all callbacks */\n                    onClick={useCallback(\n                        (e) => {\n                            setFlow([...flow, e.target.get('en')].slice(-16));\n                        },\n                        [flow]\n                    )}\n                >\n                    <RStyle.RStyle>\n                        <RStyle.RCircle radius={5}>\n                            <RStyle.RFill color='blue' />\n                        </RStyle.RCircle>\n                    </RStyle.RStyle>\n                </RLayerVector>\n                {/* Without any type, the features will be assumed to be a of a generic Geometry type */}\n                <RLayerVector\n                    zIndex={5}\n                    /**\n                     * This layer will be getting its data from an URL, do not forget that in\n                     * OpenLayers 9.2 the format parsers now return RenderFeature by default unless\n                     * featureClass is explicitly specified\n                     */\n                    format={new GeoJSON({featureProjection: 'EPSG:3857', featureClass: Feature})}\n                    url='https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements.geojson'\n                    onPointerEnter={useCallback(\n                        (e) => {\n                            setFlow([...flow, 'Entering ' + e.target.get('nom')].slice(-16));\n                        },\n                        [flow]\n                    )}\n                >\n                    <RStyle.RStyle>\n                        <RStyle.RStroke color='#007bff' width={3} />\n                        <RStyle.RFill color='transparent' />\n                    </RStyle.RStyle>\n                </RLayerVector>\n            </RMap>\n            <div className='mx-0 mt-0 mb-3 p-1 w-100 jumbotron shadow example-list'>\n                <p>Your actions</p>\n                <ul\n                    dangerouslySetInnerHTML={{\n                        __html: flow.map((p) => `<li className=\"m-0\">${p}</li>`).join('')\n                    }}\n                />\n            </div>\n        </div>\n    );\n}\n"}}]);