(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[46729],{84423:function(e,n,t){Promise.resolve().then(t.bind(t,70793))},90771:function(e,n,t){"use strict";var r=t(57437),o=t(31143),s=t(31691),a=t(17150),i=t(67208),c=t(71586),d=t(94013),l=t(36137),p=t(89414),m=t(2265),u=t(78236),f=t(33968);n.Z=e=>{let{children:n,preview:t}=e,[g,j]=(0,m.useState)(!0),x=(0,s.Z)(),h=(0,a.Z)(x.breakpoints.down("sm"));return(0,r.jsxs)(i.Z,{variant:"outlined",style:h?{margin:0,marginTop:"20px",padding:5}:{marginTop:"20px"},children:[(0,r.jsxs)(c.Z,{style:h?{padding:0,margin:"10px"}:{justifyContent:"flex-end"},children:[(0,r.jsx)(d.Z,{size:"small",color:"primary",onClick:()=>{j(e=>!e)},children:g?"Collapse Code":"Expand Code"}),(0,r.jsx)(d.Z,{size:"small",color:"primary",onClick:()=>{let e=g?n:t;e&&navigator.clipboard.writeText(e.toString())},children:(0,r.jsx)(o.Z,{fontSize:"small"})})]}),(0,r.jsx)(l.Z,{style:h?{padding:0}:{paddingTop:"16px"},children:(0,r.jsx)(p.ZP,{container:!0,spacing:0,children:(0,r.jsx)(p.ZP,{item:!0,xs:12,children:g?(0,r.jsx)(u.Z,{language:"typescript",style:f.Z,children:n?n.toString():""}):(0,r.jsx)(u.Z,{language:"typescript",style:f.Z,children:t?t.toString():""})})})})]})}},48951:function(e,n,t){"use strict";var r=t(57437),o=t(26225),s=t.n(o),a=t(2265),i=t(16449);let c=(0,a.forwardRef)((e,n)=>{let{children:t,title:o="",meta:a,...c}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s(),{children:[(0,r.jsx)("title",{children:"".concat(o," | Geopois: Geospatial React UI and Maps Tools")}),(0,r.jsx)("meta",{name:"description",content:"Integrate maps and geospatial data into your React or Next.js apps easily with geopois. Perfect for developers looking to enhance spatial data visualization."},"desc"),(0,r.jsx)("meta",{property:"og:title",content:"Geopois: Geospatial React UI and Maps Tools"}),(0,r.jsx)("meta",{property:"og:description",content:"Integrate maps and geospatial data into your React or Next.js apps easily with geopois. Perfect for developers looking to enhance spatial data visualization."}),(0,r.jsx)("meta",{property:"og:image",content:"https://geopois.com/favicon/geopois.png"}),a]}),(0,r.jsx)(i.Z,{ref:n,...c,children:t})]})});n.Z=c},18810:function(e,n,t){"use strict";var r=t(57437),o=t(2265),s=t(16449),a=t(67208),i=t(97260),c=t(5002),d=t(8350),l=t(36137),p=t(31691);let m={"& .MuiCardHeader-action":{mr:0}},u=o.forwardRef((e,n)=>{let{border:t=!1,boxShadow:o,children:u,content:f=!0,contentClass:g="",contentSX:j={},darkTitle:x,secondary:h,shadow:y,sx:w={},title:Z,...L}=e,S=(0,p.Z)();return(0,r.jsx)(s.Z,{sx:{[S.breakpoints.down("sm")]:{marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0}},children:(0,r.jsxs)(a.Z,{ref:n,...L,sx:{border:t?"1px solid":"none",borderColor:"dark"===S.palette.mode?S.palette.background.default:S.palette.grey[300]+98,":hover":{boxShadow:o?y||("dark"===S.palette.mode?"0 2px 14px 0 rgb(33 150 243 / 10%)":"0 2px 14px 0 rgb(32 40 45 / 8%)"):"inherit"},[S.breakpoints.down("sm")]:{marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0,boxShadow:"none",border:"none"},...w},children:[!x&&Z&&(0,r.jsx)(i.Z,{sx:m,title:Z,action:h}),x&&Z&&(0,r.jsx)(i.Z,{sx:m,title:(0,r.jsx)(c.Z,{variant:"h3",children:Z}),action:h}),Z&&(0,r.jsx)(d.Z,{}),f&&(0,r.jsx)(l.Z,{sx:{[S.breakpoints.down("sm")]:{paddingLeft:0,paddingRight:0},...j},className:g,children:u}),!f&&u]})})});n.Z=u},58041:function(e,n,t){"use strict";var r=t(57437),o=t(2265),s=t(17150),a=t(16449),i=t(67208),c=t(97260),d=t(5002),l=t(8350),p=t(36137),m=t(31691);let u=o.forwardRef((e,n)=>{let{children:t,className:o,content:u=!0,contentClass:f,darkTitle:g,secondary:j,sx:x={},contentSX:h={},title:y,...w}=e,Z=(0,m.Z)(),L=(0,s.Z)(Z.breakpoints.down("sm"));return(0,r.jsx)(a.Z,{sx:{margin:0,padding:0,[Z.breakpoints.down("sm")]:{paddingLeft:0,paddingRight:0}},children:(0,r.jsxs)(i.Z,{ref:n,sx:{border:"1px solid",borderColor:"dark"===Z.palette.mode?Z.palette.dark.light+15:Z.palette.grey[200],":hover":{boxShadow:"dark"===Z.palette.mode?"0 2px 14px 0 rgb(33 150 243 / 10%)":"0 2px 14px 0 rgb(32 40 45 / 8%)"},[Z.breakpoints.down("sm")]:{marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0,boxShadow:"none",border:"none"},...x},...w,children:[!L&&!g&&y&&(0,r.jsx)(c.Z,{sx:{p:2.5},title:(0,r.jsx)(d.Z,{variant:"h5",children:y}),action:j}),!L&&g&&y&&(0,r.jsx)(c.Z,{sx:{p:2.5},title:(0,r.jsx)(d.Z,{variant:"h4",children:y}),action:j}),!L&&y&&(0,r.jsx)(l.Z,{sx:{opacity:1,borderColor:"dark"===Z.palette.mode?Z.palette.dark.light+15:Z.palette.grey[200]}}),u&&(0,r.jsx)(p.Z,{sx:{p:2.5,[Z.breakpoints.down("sm")]:{paddingLeft:0,paddingRight:0},...h},className:f||"",children:t}),!u&&t]})})});n.Z=u},53239:function(e,n,t){"use strict";t.d(n,{RK:function(){return o},dv:function(){return r}});let r=3,o=260},70793:function(e,n,t){"use strict";t.d(n,{default:function(){return k}});var r=t(57437),o=t(89414),s=t(48951),a=t(53239),i=t(18810),c=t(58041),d=t(2265),l=t(50807),p=t(15492),m=t(50866),u=t(6264),f=t(42086),g=t(69120),j=t(26733),x=t(82274),h=t(93905),y=t(3459),w=t(64830),Z=t(16808),L=t(54376),S=t(74150),b=t(42635);t(86037);var v=t(95925),P=t.n(v),G=()=>{let e=(0,d.useRef)(null);return(0,d.useEffect)(()=>{let n=e.current;if(!n)return;let t=()=>{if(!window.jsts){console.error("JSTS not loaded");return}let e=new b.Z;fetch("/data/geojson/roads-seoul.geojson").then(e=>e.json()).then(n=>{let t=new m.Z().readFeatures(n,{featureProjection:"EPSG:3857"}),r=new window.jsts.io.OL3Parser;r.inject(u.Z,f.Z,y.Z,g.ZP,j.Z,x.Z,h.Z),t.forEach(e=>{let n=e.getGeometry(),t=r.read(n).buffer(40),o=r.write(t);e.setGeometry(o)}),e.addFeatures(t)});let t=new w.Z({source:e}),r=new Z.Z({source:new S.Z}),o=new l.Z({layers:[r,t],target:n,view:new p.ZP({center:(0,L.mi)([126.979293,37.528787]),zoom:15})});return()=>{o.setTarget(void 0)}};(()=>{let e=document.createElement("script");e.src="https://cdn.jsdelivr.net/npm/jsts@2.3.0/dist/jsts.min.js",e.async=!0,e.onload=t,document.body.appendChild(e)})()},[]),(0,r.jsx)("div",{className:P().map,ref:e})},R=t(90771),k=()=>(0,r.jsx)(s.Z,{title:"Openlayers Jsts",children:(0,r.jsx)(i.Z,{title:"Openlayers Jsts",children:(0,r.jsx)(o.ZP,{container:!0,spacing:a.dv,children:(0,r.jsx)(o.ZP,{item:!0,xs:12,md:12,children:(0,r.jsxs)(c.Z,{title:"Openlayers Jsts",children:[(0,r.jsx)(G,{}),(0,r.jsx)(R.Z,{preview:"\nconst node = mapNode.current;\nif (!node) return;\n\nconst loadJstsScript = () => {\n  const script = document.createElement('script');\n  script.src = 'https://cdn.jsdelivr.net/npm/jsts@2.3.0/dist/jsts.min.js';\n  script.async = true;\n  script.onload = processData;\n  document.body.appendChild(script);\n};\n\nconst processData = () => {\n  if (!(window as any).jsts) {\n    console.error('JSTS not loaded');\n    return;\n  }\n\n  const source = new VectorSource();\n\n  fetch('/data/geojson/roads-seoul.geojson')\n    .then((response) => response.json())\n    .then((json) => {\n      const format = new GeoJSON();\n      const features = format.readFeatures(json, {\n        featureProjection: 'EPSG:3857'\n      });\n\n      const parser = new window.jsts.io.OL3Parser();\n      parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);\n\n      features.forEach((feature) => {\n        const geometry = feature.getGeometry();\n        const jstsGeom = parser.read(geometry);\n        const buffered = jstsGeom.buffer(40); // 40 meters buffer\n        const newGeometry = parser.write(buffered);\n        feature.setGeometry(newGeometry);\n      });\n\n      source.addFeatures(features);\n    });\n\n  const vectorLayer = new VectorLayer({\n    source: source\n  });\n\n  const rasterLayer = new TileLayer({\n    source: new OSM()\n  });\n\n  const map = new Map({\n    layers: [rasterLayer, vectorLayer],\n    target: node,\n    view: new View({\n      center: fromLonLat([126.979293, 37.528787]),\n      zoom: 15\n    })\n  });\n\n  return () => {\n    map.setTarget(undefined);\n  };\n};\n\nloadJstsScript();\n",children:"\nimport React, { useEffect, useRef } from 'react';\n//import ol\nimport GeoJSON from 'ol/format/GeoJSON';\nimport LinearRing from 'ol/geom/LinearRing';\nimport Map from 'ol/Map';\nimport OSM from 'ol/source/OSM';\nimport VectorSource from 'ol/source/Vector';\nimport View from 'ol/View';\nimport { LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from 'ol/geom';\nimport { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';\nimport { fromLonLat } from 'ol/proj';\n\n// Import Styles\nimport 'ol/ol.css';\nimport styles from '../osmStyles.module.scss';\n\ndeclare global {\n  interface Window {\n    jsts: any;\n  }\n}\n\nconst JstsComponent = () => {\n  const mapNode = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const node = mapNode.current;\n    if (!node) return;\n\n    const loadJstsScript = () => {\n      const script = document.createElement('script');\n      script.src = 'https://cdn.jsdelivr.net/npm/jsts@2.3.0/dist/jsts.min.js';\n      script.async = true;\n      script.onload = processData;\n      document.body.appendChild(script);\n    };\n\n    const processData = () => {\n      if (!(window as any).jsts) {\n        console.error('JSTS not loaded');\n        return;\n      }\n\n      const source = new VectorSource();\n\n      fetch('/data/geojson/roads-seoul.geojson')\n        .then((response) => response.json())\n        .then((json) => {\n          const format = new GeoJSON();\n          const features = format.readFeatures(json, {\n            featureProjection: 'EPSG:3857'\n          });\n\n          const parser = new window.jsts.io.OL3Parser();\n          parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);\n\n          features.forEach((feature) => {\n            const geometry = feature.getGeometry();\n            const jstsGeom = parser.read(geometry);\n            const buffered = jstsGeom.buffer(40); // 40 meters buffer\n            const newGeometry = parser.write(buffered);\n            feature.setGeometry(newGeometry);\n          });\n\n          source.addFeatures(features);\n        });\n\n      const vectorLayer = new VectorLayer({\n        source: source\n      });\n\n      const rasterLayer = new TileLayer({\n        source: new OSM()\n      });\n\n      const map = new Map({\n        layers: [rasterLayer, vectorLayer],\n        target: node,\n        view: new View({\n          center: fromLonLat([126.979293, 37.528787]),\n          zoom: 15\n        })\n      });\n\n      return () => {\n        map.setTarget(undefined);\n      };\n    };\n\n    loadJstsScript();\n  }, []);\n\n  return <div className={styles.map} ref={mapNode}></div>;\n};\n\nexport default JstsComponent;\n"})]})})})})})},95925:function(e){e.exports={map:"osmStyles_map__fZ96p"}}},function(e){e.O(0,[63736,41868,2657,19472,44584,66751,26379,19506,66662,69120,18914,50807,77297,7143,73787,14078,88910,83660,77999,30194,54462,810,55859,59059,53142,22392,92971,52117,1744],function(){return e(e.s=84423)}),_N_E=e.O()}]);