From d72a35c50b6f9056ca82826637fe7a5032663fd6 Mon Sep 17 00:00:00 2001 From: Momtchil Momtchev Date: Wed, 13 Sep 2023 19:08:43 +0200 Subject: [PATCH] Updated documentation --- 3516.bundle.js | 2 +- 983.bundle.js | 2 +- 9916.bundle.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/3516.bundle.js b/3516.bundle.js index e157aa14..119f182c 100644 --- a/3516.bundle.js +++ b/3516.bundle.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[3516],{3516:(e,n,t)=>{t.r(n),t.d(n,{default:()=>m});var o=t(7294);const r=JSON.parse('{"B9":{"Js5":{"i8":"5.3.1"},"zhz":{"i8":"8.1.0"},"sDT":{"i8":"2.9.0"},"ge6":{"i8":"18.2.0"}}}'),l=r.B9.ge6.i8,s=r.B9.zhz.i8,a=r.B9.Js5.i8,i=r.B9.sDT.i8,p=e=>e.replace(/\//g,".").replace(/rlayers\.style/g,"rlayers.RStyle").replace(/rlayers\.control/g,"rlayers.RControl").replace(/rlayers\.interaction/g,"rlayers.RInteraction").replace(/react/g,"React"),m=o.memo((function(e){const[n,t]=o.useState("loading()");o.useEffect((()=>{e.text.then((e=>{let n;const o=[];let r=/import .*\{([A-Za-z,\s\n]+)\}.* from '(.*)'/g;for(;null!==(n=r.exec(e));){const e=n[1].replace(/\s/g,"").replace(/\n/g,"").split(","),t=p(n[2]);for(const n of e)o.push({from:n,to:`${t}.${n}`})}for(r=/import ([A-Za-z]+) from '(ol.*)'/g;null!==(n=r.exec(e));){const e=p(n[2]);o.push({from:n[1],to:e})}for(r=/import ([A-Za-z]+) from '(.*\.svg)'/g;null!==(n=r.exec(e));){const e=`'https://cdn.jsdelivr.net/npm/rlayers/examples/${n[2]}'`;o.push({from:n[1],to:e})}e=(e=(e=e.replace(/import [^;]+;\n/g,"")).replace(/^\n+/,"")).replace(/export default function (.*)/,"function Comp() {"),e+="\nReactDOM.createRoot(document.getElementById('root')).render();\n",o.length>0&&(e="\n"+e);for(const n of o.reverse())e=`const ${n.from} = ${n.to};\n`+e;t(e)}))}),[e.text]);const r=o.useRef();return n&&n.match(/in CodePen/)?null:o.createElement("form",{className:"position-absolute my-2 mx-4",style:{top:"0px",right:"0px"},ref:r,action:"https://codepen.io/pen/define",method:"POST",target:"_blank"},o.createElement("input",{type:"hidden",name:"data",value:JSON.stringify({title:"rlayers "+e.title,description:"This is an editable example from rlayers - https://mmomtchev.githb.io/rlayers",tags:["openlayers","react","maps","rlayers"],html:'
\n
\n
\n
',js:n,js_pre_processor:"typescript",css:".example-map p,\n.jumbotron p {\n margin: 0;\n padding: 0;\n}\n\n.example-map {\n width: 100%;\n height: 60vh;\n margin-bottom: 1em;\n}\n\n.no-interaction {\n user-select: none;\n pointer-events: none;\n}\n\n.example-overlay {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n user-select: none;\n pointer-events: none;\n position: absolute;\n width: max-content;\n background-color: white;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n padding: 15px;\n border-radius: 10px;\n border: 1px solid #cccccc;\n}\n\n.example-control {\n top: 2.5em;\n right: 0.5em;\n}\n\n.example-list {\n width: 150px;\n max-width: 150px;\n min-width: 150px;\n font-size: 0.7em;\n list-style: lower-latin;\n padding: 0;\n overflow: hidden;\n}\n\n.example-list ul {\n padding: 0;\n overflow: hidden;\n}\n\n.example-list li {\n font-style: italic;\n overflow: hidden;\n}\n\n.example-overview .ol-overviewmap-map {\n border: none !important;\n width: 300px !important;\n}\n\n.example-overview .ol-overviewmap-box {\n border: 2px solid blue;\n}\n\n.example-overview,\n.example-overview.ol-uncollapsible {\n bottom: auto !important;\n left: auto !important;\n right: 0 !important;\n top: 0 !important;\n}\n\n.example-overview:not(.ol-collapsed) button {\n bottom: auto !important;\n left: auto !important;\n right: 1px !important;\n top: 1px !important;\n}\n\n.example-fullscreen {\n top: 5em;\n right: 0.5em;\n}\n\n.fullscreen:-webkit-full-screen {\n height: 100%;\n margin: 0;\n}\n\n.fullscreen:-ms-fullscreen {\n height: 100%;\n}\n\n.fullscreen:fullscreen {\n height: 100%;\n}\n\n.fullscreen {\n margin-bottom: 10px;\n width: 100%;\n height: 400px;\n}\n\n.example-spinner {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 20%;\n height: 20%;\n z-index: 1000;\n}\n\n.example-spinner>img {\n width: 100%;\n}\n",js_external:`https://cdn.jsdelivr.net/npm/bootstrap@${a}/dist/js/bootstrap.min.js;https://cdnjs.cloudflare.com/ajax/libs/react/${l}/umd/react.development.min.js;https://cdnjs.cloudflare.com/ajax/libs/react-dom/${l}/umd/react-dom.development.min.js;https://cdnjs.cloudflare.com/ajax/libs/proj4js/${i}/proj4.js;https://cdn.jsdelivr.net/npm/ol@v${s}/dist/ol.js;https://cdn.jsdelivr.net/npm/rlayers@2.1.0`,css_external:`https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v${s}/css/ol.css;https://cdn.jsdelivr.net/npm/bootstrap@${a}/dist/css/bootstrap.min.css`})}),o.createElement("button",{className:"btn border mb-2 bg-light",onClick:()=>{r.current.submit()}},o.createElement("span",{className:"me-2 align-middle"},"Edit on"),o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 138 26",height:"24px",fill:"none",stroke:"#000",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round"},o.createElement("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"}))))}))}}]); \ No newline at end of file +"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[3516],{3516:(e,n,t)=>{t.r(n),t.d(n,{default:()=>m});var o=t(7294);const r=JSON.parse('{"B9":{"Js5":{"i8":"5.3.1"},"zhz":{"i8":"8.1.0"},"sDT":{"i8":"2.9.0"},"ge6":{"i8":"18.2.0"}}}'),l=r.B9.ge6.i8,s=r.B9.zhz.i8,a=r.B9.Js5.i8,i=r.B9.sDT.i8,p=e=>e.replace(/\//g,".").replace(/rlayers\.style/g,"rlayers.RStyle").replace(/rlayers\.control/g,"rlayers.RControl").replace(/rlayers\.interaction/g,"rlayers.RInteraction").replace(/react/g,"React"),m=o.memo((function(e){const[n,t]=o.useState("loading()");o.useEffect((()=>{e.text.then((e=>{let n;const o=[];let r=/import .*\{([A-Za-z,\s\n]+)\}.* from '(.*)'/g;for(;null!==(n=r.exec(e));){const e=n[1].replace(/\s/g,"").replace(/\n/g,"").split(","),t=p(n[2]);for(const n of e)o.push({from:n,to:`${t}.${n}`})}for(r=/import ([A-Za-z]+) from '(ol.*)'/g;null!==(n=r.exec(e));){const e=p(n[2]);o.push({from:n[1],to:e})}for(r=/import ([A-Za-z]+) from '(.*\.svg)'/g;null!==(n=r.exec(e));){const e=`'https://cdn.jsdelivr.net/npm/rlayers/examples/${n[2]}'`;o.push({from:n[1],to:e})}e=(e=(e=e.replace(/import [^;]+;\n/g,"")).replace(/^\n+/,"")).replace(/export default function (.*)/,"function Comp() {"),e+="\nReactDOM.createRoot(document.getElementById('root')).render();\n",o.length>0&&(e="\n"+e);for(const n of o.reverse())e=`const ${n.from} = ${n.to};\n`+e;t(e)}))}),[e.text]);const r=o.useRef();return n&&n.match(/in CodePen/)?null:o.createElement("form",{className:"position-absolute my-2 mx-4",style:{top:"0px",right:"0px"},ref:r,action:"https://codepen.io/pen/define",method:"POST",target:"_blank"},o.createElement("input",{type:"hidden",name:"data",value:JSON.stringify({title:"rlayers "+e.title,description:"This is an editable example from rlayers - https://mmomtchev.githb.io/rlayers",tags:["openlayers","react","maps","rlayers"],html:'
\n
\n
\n
',js:n,js_pre_processor:"typescript",css:".example-map p,\n.jumbotron p {\n margin: 0;\n padding: 0;\n}\n\n.example-map {\n width: 100%;\n height: 60vh;\n margin-bottom: 1em;\n}\n\n.no-interaction {\n user-select: none;\n pointer-events: none;\n}\n\n.example-overlay {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n user-select: none;\n pointer-events: none;\n position: absolute;\n width: max-content;\n background-color: white;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n padding: 15px;\n border-radius: 10px;\n border: 1px solid #cccccc;\n}\n\n.example-control {\n top: 2.5em;\n right: 0.5em;\n}\n\n.example-list {\n width: 150px;\n max-width: 150px;\n min-width: 150px;\n font-size: 0.7em;\n list-style: lower-latin;\n padding: 0;\n overflow: hidden;\n}\n\n.example-list ul {\n padding: 0;\n overflow: hidden;\n}\n\n.example-list li {\n font-style: italic;\n overflow: hidden;\n}\n\n.example-overview .ol-overviewmap-map {\n border: none !important;\n width: 300px !important;\n}\n\n.example-overview .ol-overviewmap-box {\n border: 2px solid blue;\n}\n\n.example-overview,\n.example-overview.ol-uncollapsible {\n bottom: auto !important;\n left: auto !important;\n right: 0 !important;\n top: 0 !important;\n}\n\n.example-overview:not(.ol-collapsed) button {\n bottom: auto !important;\n left: auto !important;\n right: 1px !important;\n top: 1px !important;\n}\n\n.example-fullscreen {\n top: 5em;\n right: 0.5em;\n}\n\n.fullscreen:-webkit-full-screen {\n height: 100%;\n margin: 0;\n}\n\n.fullscreen:-ms-fullscreen {\n height: 100%;\n}\n\n.fullscreen:fullscreen {\n height: 100%;\n}\n\n.fullscreen {\n margin-bottom: 10px;\n width: 100%;\n height: 400px;\n}\n\n.example-spinner {\n position: absolute;\n top: 40%;\n left: 40%;\n width: 20%;\n height: 20%;\n z-index: 1000;\n}\n\n.example-spinner>img {\n width: 100%;\n}\n",js_external:`https://cdn.jsdelivr.net/npm/bootstrap@${a}/dist/js/bootstrap.min.js;https://cdnjs.cloudflare.com/ajax/libs/react/${l}/umd/react.development.min.js;https://cdnjs.cloudflare.com/ajax/libs/react-dom/${l}/umd/react-dom.development.min.js;https://cdnjs.cloudflare.com/ajax/libs/proj4js/${i}/proj4.js;https://cdn.jsdelivr.net/npm/ol@v${s}/dist/ol.js;https://cdn.jsdelivr.net/npm/rlayers@2.1.0`,css_external:`https://cdn.jsdelivr.net/npm/ol@v${s}/ol.css;https://cdn.jsdelivr.net/npm/bootstrap@${a}/dist/css/bootstrap.min.css`})}),o.createElement("button",{className:"btn border mb-2 bg-light",onClick:()=>{r.current.submit()}},o.createElement("span",{className:"me-2 align-middle"},"Edit on"),o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 138 26",height:"24px",fill:"none",stroke:"#000",strokeWidth:"2.3",strokeLinecap:"round",strokeLinejoin:"round"},o.createElement("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"}))))}))}}]); \ No newline at end of file diff --git a/983.bundle.js b/983.bundle.js index 17f8b8d4..d309331f 100644 --- a/983.bundle.js +++ b/983.bundle.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[983],{983:(n,e,t)=>{t.r(e),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;\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();\\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();\n\n if (text && text.match(/in CodePen/)) return null;\n return (\n \n \\n
\\n
\\n',\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/gh/openlayers/openlayers.github.io@master/en/v${versionOL}/css/ol.css;` +\n `https://cdn.jsdelivr.net/npm/bootstrap@${versionBootstrap}/dist/css/bootstrap.min.css`\n })}\n />\n {\n ref.current.submit();\n }}\n >\n Edit on\n \n \n \n \n \n );\n});\n\nexport default CodePenButton;\n"}}]); \ No newline at end of file +"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[983],{983:(n,e,t)=>{t.r(e),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;\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();\\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();\n\n if (text && text.match(/in CodePen/)) return null;\n return (\n \n \\n
\\n
\\n',\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 {\n ref.current.submit();\n }}\n >\n Edit on\n \n \n \n \n \n );\n});\n\nexport default CodePenButton;\n"}}]); \ No newline at end of file diff --git a/9916.bundle.js b/9916.bundle.js index 7e7c4bcc..50bc7044 100644 --- a/9916.bundle.js +++ b/9916.bundle.js @@ -1 +1 @@ -"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[9916],{9916:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const t='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 +=\n "\\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>();\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/gh/openlayers/openlayers.github.io@master/en/v${versionOL}/css/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'}}]); \ No newline at end of file +"use strict";(self.webpackChunkrlayers=self.webpackChunkrlayers||[]).push([[9916],{9916:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const t='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 +=\n "\\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>();\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'}}]); \ No newline at end of file