rlayers/docs/5741.bundle.js

React Components for OpenLayers

"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[5741],{5741(n,e,t){t.d(e,{default:()=>s});const s="import React from 'react';\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport exampleCss from '!!raw-loader!./example.css';\n\nimport packageJson from '../package-lock.json';\nconst versionReact = packageJson.packages['node_modules/react'].version;\nconst versionOL = packageJson.packages['node_modules/ol'].version;\nconst versionBootstrap = packageJson.packages['node_modules/bootstrap'].version;\nconst versionProj4 = packageJson.packages['node_modules/proj4'].version;\n\nconst alias = (t: string): string =>\n    t\n        .replace(/\\//g, '.')\n        .replace(/rlayers\\.style/g, 'rlayers.RStyle')\n        .replace(/rlayers\\.control/g, 'rlayers.RControl')\n        .replace(/rlayers\\.interaction/g, 'rlayers.RInteraction')\n        .replace(/react/g, 'React');\n\nconst CodePenButton = React.memo(function CodePenButton(props: {\n    text: Promise<string>;\n    title: string;\n}) {\n    const [text, setText] = React.useState('loading()');\n    React.useEffect(() => {\n        props.text.then((r) => {\n            let m;\n            const renames = [];\n            let regex = /import .*\\{([A-Za-z,\\s\\n]+)\\}.* from '(.*)'/g;\n            while ((m = regex.exec(r)) !== null) {\n                const imports = m[1].replace(/\\s/g, '').replace(/\\n/g, '').split(',');\n                const path = alias(m[2]);\n                for (const i of imports) renames.push({from: i, to: `${path}.${i}`});\n            }\n            regex = /import ([A-Za-z]+) from '(ol.*)'/g;\n            while ((m = regex.exec(r)) !== null) {\n                const path = alias(m[2]);\n                renames.push({from: m[1], to: path});\n            }\n            regex = /import ([A-Za-z]+) from '(.*\\.svg)'/g;\n            while ((m = regex.exec(r)) !== null) {\n                const path = `'https://cdn.jsdelivr.net/npm/rlayers/examples/${m[2]}'`;\n                renames.push({from: m[1], to: path});\n            }\n            r = r.replace(/import [^;]+;\\n/g, '');\n            r = r.replace(/^\\n+/, '');\n            r = r.replace(/export default function (.*)/, 'function Comp() {');\n            r += \"\\nReactDOM.createRoot(document.getElementById('root')).render(<Comp />);\\n\";\n            if (renames.length > 0) r = '\\n' + r;\n            for (const m of renames.reverse()) r = `const ${m.from} = ${m.to};\\n` + r;\n            setText(r);\n        });\n    }, [props.text]);\n\n    const ref = React.useRef<HTMLFormElement>(null);\n\n    if (text && text.match(/in CodePen/)) return null;\n    return (\n        <form\n            className='position-absolute my-2 mx-4'\n            style={{top: '0px', right: '0px'}}\n            ref={ref}\n            action='https://codepen.io/pen/define'\n            method='POST'\n            target='_blank'\n        >\n            <input\n                type='hidden'\n                name='data'\n                value={JSON.stringify({\n                    title: 'rlayers ' + props.title,\n                    description:\n                        'This is an editable example from rlayers - https://mmomtchev.githb.io/rlayers',\n                    tags: ['openlayers', 'react', 'maps', 'rlayers'],\n                    html: '<div id=\"fullscreen\" class=\"fullscreen\">\\n  <div id=\"root\" style=\"margin: 4px;\">\\n  </div>\\n</div>',\n                    js: text,\n                    js_pre_processor: 'typescript',\n                    css: exampleCss,\n                    js_external:\n                        `https://cdn.jsdelivr.net/npm/bootstrap@${versionBootstrap}/dist/js/bootstrap.min.js;` +\n                        `https://cdnjs.cloudflare.com/ajax/libs/react/${versionReact}/umd/react.development.min.js;` +\n                        `https://cdnjs.cloudflare.com/ajax/libs/react-dom/${versionReact}/umd/react-dom.development.min.js;` +\n                        `https://cdnjs.cloudflare.com/ajax/libs/proj4js/${versionProj4}/proj4.js;` +\n                        `https://cdn.jsdelivr.net/npm/ol@v${versionOL}/dist/ol.js;` +\n                        `https://cdn.jsdelivr.net/npm/rlayers@${VERSION}`,\n                    css_external:\n                        `https://cdn.jsdelivr.net/npm/ol@v${versionOL}/ol.css;` +\n                        `https://cdn.jsdelivr.net/npm/bootstrap@${versionBootstrap}/dist/css/bootstrap.min.css`\n                })}\n            />\n            <button\n                className='btn border mb-2 bg-light'\n                onClick={() => {\n                    ref.current.submit();\n                }}\n            >\n                <span className='me-2 align-middle'>Edit on</span>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    viewBox='0 0 138 26'\n                    height='24px'\n                    fill='none'\n                    stroke='#000'\n                    strokeWidth='2.3'\n                    strokeLinecap='round'\n                    strokeLinejoin='round'\n                >\n                    <path d='M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z' />\n                </svg>\n            </button>\n        </form>\n    );\n});\n\nexport default CodePenButton;\n"}}]);