rlayers/docs/6988.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[6988],{6988:(e,t,n)=>{n.r(t),n.d(t,{default:()=>l});const l="/* eslint-disable @typescript-eslint/ban-ts-comment */\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport './example.css';\nimport './ghp.css';\nimport React, {JSX} from 'react';\nimport {HashRouter as Router, Routes, Route, Link} from 'react-router-dom';\nimport {VERSION as OL_VERSION} from 'ol';\nimport semver from 'semver';\n\nconst examples = {\n    simple: {title: 'Simple map', file: 'Simple'},\n    controls: {title: 'Custom controls', file: 'Controls'},\n    overlays: {title: 'Simple overlay', file: 'Overlays'},\n    extent: {title: 'Constrained view', file: 'Extent'},\n    image: {title: 'Static image', file: 'Image'},\n    state: {title: 'External state', file: 'ExternalState'},\n    animation: {title: 'Animated icon', file: 'AnimatedOverlay'},\n    webgl: {title: 'WebGL layers', file: 'WebGL'},\n    overview: {title: 'Overview', file: 'Overview'},\n    popups: {title: 'Popups', file: 'Popups'},\n    features: {title: 'GeoJSON', file: 'Features'},\n    cluster: {title: 'Clustering', file: 'Cluster', ol8: true},\n    heatmap: {title: 'Heatmap', file: 'Heatmap', ol8: true},\n    layers: {title: 'Multiple layers', file: 'Layers', ol8: true},\n    pindrop: {title: 'Drop a pin', file: 'PinDrop'},\n    spinner: {title: 'Spinner', file: 'Spinner'},\n    geodata: {title: 'Infographics', file: 'GeoData', ol8: true},\n    interactions: {title: 'Move & Select', file: 'Interactions'},\n    add_delete: {title: 'Add & Delete', file: 'Add-Delete'},\n    draw: {title: 'Draw & Modify', file: 'Draw'},\n    geolocation: {title: 'Geolocation', file: 'Geolocation'},\n    wmts: {title: 'WMTS', file: 'WMTS'},\n    vectortiles: {title: 'Vector tiles', file: 'VectorTiles', ol8: true},\n    mbtilesRaster: {title: 'Raster MBTiles', file: 'RasterMBTiles'},\n    mbtilesVector: {title: 'Vector MBTiles', file: 'VectorMBTiles'},\n    reproj: {title: 'Reprojection', file: 'Reprojection'},\n    routing: {title: 'Navigation', file: 'Routing'},\n    igc: {title: 'Performance', file: 'IGC'},\n    addon: {title: 'Extending rlayers', file: 'Addon'},\n    geotiff: {title: 'GeoTIFF addon', file: 'GeoTIFF'}\n};\n\n// The examples use a code-loading technique that I have described in\n// https://mmomtchev.medium.com/making-examples-displaying-code-along-its-output-with-webpack-a28dcf5439c6\n\nconst ReadmeBlock = React.lazy(() => import(/* webpackPrefetch: true */ './ReadmeBlock'));\nconst CodeBlock = React.lazy(() => import(/* webpackPrefetch: true */ './CodeBlock'));\n\nfor (const ex of Object.keys(examples)) {\n    if (semver.lt(OL_VERSION, '8.0.0') && examples[ex].ol8) continue;\n\n    examples[ex].comp = React.lazy(\n        () => import(/* webpackPrefetch: true */ `./${examples[ex].file}.tsx`)\n    );\n    examples[ex].code = import(\n        /* webpackPrefetch: true */ `!!html-loader?{\"minimize\":false}!./jsx-loader.ts!./${examples[ex].file}.tsx`\n    ).then((code) => code.default);\n\n    examples[ex].text = import(\n        /* webpackPrefetch: true */ `!!raw-loader!./${examples[ex].file}.tsx`\n    ).then((text) => text.default);\n}\n\nconst LeftMenuItem = (props): JSX.Element => (\n    <Link to={props.id}>\n        <button className='w-100 btn btn-light'>{props.title}</button>\n    </Link>\n);\n\nconst App = (): JSX.Element => {\n    return (\n        <Router>\n            <h1 className='m-2'>\n                <strong>rlayers {VERSION} Examples</strong>\n            </h1>\n            <div className='d-flex flex-row p-3'>\n                <div className='d-flex flex-column left-menu me-2'>\n                    <LeftMenuItem id={''} title={'Home'} />\n                    {Object.keys(examples)\n                        .filter((ex) => semver.gte(OL_VERSION, '8.0.0') || !examples[ex].ol8)\n                        .map((e) => (\n                            <LeftMenuItem key={e} id={e} title={examples[e].title} />\n                        ))}\n                </div>\n                <div className='d-flex flex-column w-100 overflow-hidden'>\n                    <div className='fluid-container'>\n                        <Routes>\n                            <Route\n                                path='/'\n                                element={\n                                    <div className='ml-2'>\n                                        <React.Suspense fallback={<div>Loading...</div>}>\n                                            <ReadmeBlock />\n                                        </React.Suspense>\n                                    </div>\n                                }\n                            />\n                            {Object.keys(examples).map((e) => (\n                                <Route\n                                    key={e}\n                                    path={`/${e}`}\n                                    element={\n                                        <div className='row'>\n                                            <div className='col-12 col-xl-5 mb-1'>\n                                                <React.Suspense\n                                                    fallback={<div>Loading component...</div>}\n                                                >\n                                                    {React.createElement(examples[e].comp)}\n                                                </React.Suspense>\n                                            </div>\n                                            <div className='col-12 col-xl-7 codeblock'>\n                                                <React.Suspense\n                                                    fallback={<div>Parsing code...</div>}\n                                                >\n                                                    <CodeBlock\n                                                        title={examples[e].title}\n                                                        code={examples[e].code}\n                                                        text={examples[e].text}\n                                                    />\n                                                </React.Suspense>\n                                            </div>\n                                        </div>\n                                    }\n                                />\n                            ))}\n                        </Routes>\n                    </div>\n                </div>\n            </div>\n        </Router>\n    );\n};\n\nexport default App;\n"}}]);