(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[53612],{95486:function(e,n,t){Promise.resolve().then(t.bind(t,74220))},90771:function(e,n,t){"use strict";var o=t(57437),r=t(31143),a=t(31691),i=t(17150),s=t(67208),l=t(71586),c=t(94013),p=t(36137),d=t(89414),m=t(2265),u=t(78236),g=t(33968);n.Z=e=>{let{children:n,preview:t}=e,[y,f]=(0,m.useState)(!0),w=(0,a.Z)(),h=(0,i.Z)(w.breakpoints.down("sm"));return(0,o.jsxs)(s.Z,{variant:"outlined",style:h?{margin:0,marginTop:"20px",padding:5}:{marginTop:"20px"},children:[(0,o.jsxs)(l.Z,{style:h?{padding:0,margin:"10px"}:{justifyContent:"flex-end"},children:[(0,o.jsx)(c.Z,{size:"small",color:"primary",onClick:()=>{f(e=>!e)},children:y?"Collapse Code":"Expand Code"}),(0,o.jsx)(c.Z,{size:"small",color:"primary",onClick:()=>{let e=y?n:t;e&&navigator.clipboard.writeText(e.toString())},children:(0,o.jsx)(r.Z,{fontSize:"small"})})]}),(0,o.jsx)(p.Z,{style:h?{padding:0}:{paddingTop:"16px"},children:(0,o.jsx)(d.ZP,{container:!0,spacing:0,children:(0,o.jsx)(d.ZP,{item:!0,xs:12,children:y?(0,o.jsx)(u.Z,{language:"typescript",style:g.Z,children:n?n.toString():""}):(0,o.jsx)(u.Z,{language:"typescript",style:g.Z,children:t?t.toString():""})})})})]})}},48951:function(e,n,t){"use strict";var o=t(57437),r=t(26225),a=t.n(r),i=t(2265),s=t(16449);let l=(0,i.forwardRef)((e,n)=>{let{children:t,title:r="",meta:i,...l}=e;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(a(),{children:[(0,o.jsx)("title",{children:"".concat(r," | Geopois: Geospatial React UI and Maps Tools")}),(0,o.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,o.jsx)("meta",{property:"og:title",content:"Geopois: Geospatial React UI and Maps Tools"}),(0,o.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,o.jsx)("meta",{property:"og:image",content:"https://geopois.com/favicon/geopois.png"}),i]}),(0,o.jsx)(s.Z,{ref:n,...l,children:t})]})});n.Z=l},18810:function(e,n,t){"use strict";var o=t(57437),r=t(2265),a=t(16449),i=t(67208),s=t(97260),l=t(5002),c=t(8350),p=t(36137),d=t(31691);let m={"& .MuiCardHeader-action":{mr:0}},u=r.forwardRef((e,n)=>{let{border:t=!1,boxShadow:r,children:u,content:g=!0,contentClass:y="",contentSX:f={},darkTitle:w,secondary:h,shadow:x,sx:k={},title:Z,...v}=e,b=(0,d.Z)();return(0,o.jsx)(a.Z,{sx:{[b.breakpoints.down("sm")]:{marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0}},children:(0,o.jsxs)(i.Z,{ref:n,...v,sx:{border:t?"1px solid":"none",borderColor:"dark"===b.palette.mode?b.palette.background.default:b.palette.grey[300]+98,":hover":{boxShadow:r?x||("dark"===b.palette.mode?"0 2px 14px 0 rgb(33 150 243 / 10%)":"0 2px 14px 0 rgb(32 40 45 / 8%)"):"inherit"},[b.breakpoints.down("sm")]:{marginLeft:0,marginRight:0,paddingLeft:0,paddingRight:0,boxShadow:"none",border:"none"},...k},children:[!w&&Z&&(0,o.jsx)(s.Z,{sx:m,title:Z,action:h}),w&&Z&&(0,o.jsx)(s.Z,{sx:m,title:(0,o.jsx)(l.Z,{variant:"h3",children:Z}),action:h}),Z&&(0,o.jsx)(c.Z,{}),g&&(0,o.jsx)(p.Z,{sx:{[b.breakpoints.down("sm")]:{paddingLeft:0,paddingRight:0},...f},className:y,children:u}),!g&&u]})})});n.Z=u},58041:function(e,n,t){"use strict";var o=t(57437),r=t(2265),a=t(17150),i=t(16449),s=t(67208),l=t(97260),c=t(5002),p=t(8350),d=t(36137),m=t(31691);let u=r.forwardRef((e,n)=>{let{children:t,className:r,content:u=!0,contentClass:g,darkTitle:y,secondary:f,sx:w={},contentSX:h={},title:x,...k}=e,Z=(0,m.Z)(),v=(0,a.Z)(Z.breakpoints.down("sm"));return(0,o.jsx)(i.Z,{sx:{margin:0,padding:0,[Z.breakpoints.down("sm")]:{paddingLeft:0,paddingRight:0}},children:(0,o.jsxs)(s.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"},...w},...k,children:[!v&&!y&&x&&(0,o.jsx)(l.Z,{sx:{p:2.5},title:(0,o.jsx)(c.Z,{variant:"h5",children:x}),action:f}),!v&&y&&x&&(0,o.jsx)(l.Z,{sx:{p:2.5},title:(0,o.jsx)(c.Z,{variant:"h4",children:x}),action:f}),!v&&x&&(0,o.jsx)(p.Z,{sx:{opacity:1,borderColor:"dark"===Z.palette.mode?Z.palette.dark.light+15:Z.palette.grey[200]}}),u&&(0,o.jsx)(d.Z,{sx:{p:2.5,[Z.breakpoints.down("sm")]:{paddingLeft:0,paddingRight:0},...h},className:g||"",children:t}),!u&&t]})})});n.Z=u},53239:function(e,n,t){"use strict";t.d(n,{RK:function(){return r},dv:function(){return o}});let o=3,r=260},74220:function(e,n,t){"use strict";t.d(n,{default:function(){return L}});var o=t(57437),r=t(89414),a=t(48951),i=t(53239),s=t(18810),l=t(58041),c=t(2265),p=t(12646),d=t(50807),m=t(15492),u=t(9072),g=t(6264),y=t(16808),f=t(64830),w=t(5946),h=t(42635),x=t(59198),k=t(30194),Z=t(8367),v=t(36281),b=t(70713),j=t(21595);t(86037);var S=t(95925),M=t.n(S),C=()=>{let e=(0,c.useRef)(null);return(0,c.useEffect)(()=>{if(!e.current)return;let n=new d.Z({target:document.getElementById("map"),view:new m.ZP({center:[-5639523.95,-3501274.52],zoom:10,minZoom:2,maxZoom:19}),layers:[new y.Z({source:new x.Z({attributions:'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',url:"https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=get_your_own_D6rA4zTHduk6KOKTXzGB",tileSize:512})})]});return fetch("/data/polyline/route.json").then(function(e){e.json().then(function(e){let t;let o=e.routes[0].geometry,r=new u.ZP({factor:1e6}).readGeometry(o,{dataProjection:"EPSG:4326",featureProjection:"EPSG:3857"}),a=new p.Z({type:"route",geometry:r}),i=new p.Z({type:"icon",geometry:new g.Z(r.getFirstCoordinate())}),s=new p.Z({type:"icon",geometry:new g.Z(r.getLastCoordinate())}),l=i.getGeometry().clone(),c=new p.Z({type:"geoMarker",geometry:l}),d={route:new k.ZP({stroke:new Z.Z({width:6,color:[237,212,0,.8]})}),icon:new k.ZP({image:new v.Z({anchor:[.5,1],src:"data/icon.png"})}),geoMarker:new k.ZP({image:new b.Z({radius:7,fill:new j.Z({color:"black"}),stroke:new Z.Z({color:"white",width:2})})})},m=new f.Z({source:new h.Z({features:[a,c,i,s]}),style:function(e){return d[e.get("type")]}});n.addLayer(m);let y=document.getElementById("speed"),x=document.getElementById("start-animation"),S=!1,M=0;function C(e){let o=Number(y.value),a=e.frameState.time;M=(M+o*(a-t)/1e6)%2,t=a;let i=r.getCoordinateAt(M>1?2-M:M);l.setCoordinates(i);let s=(0,w.u3)(e);s.setStyle(d.geoMarker),s.drawGeometry(l),n.render()}x.addEventListener("click",function(){S?(S=!1,x.textContent="Start Animation",c.setGeometry(l),m.un("postrender",C)):(S=!0,t=Date.now(),x.textContent="Stop Animation",m.on("postrender",C),c.setGeometry(null))})})}),()=>{n.setTarget()}},[]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("div",{id:"map",className:M().map,ref:e}),(0,o.jsxs)("label",{htmlFor:"speed",children:["speed:\xa0",(0,o.jsx)("input",{id:"speed",type:"range",min:"10",max:"999",step:"10",value:"60"})]}),(0,o.jsx)("button",{id:"start-animation",children:"Start Animation"})]})},T=t(90771),L=()=>(0,o.jsx)(a.Z,{title:"Openlayers FeatureMoveAnimation",children:(0,o.jsx)(s.Z,{title:"Openlayers FeatureMoveAnimation",children:(0,o.jsx)(r.ZP,{container:!0,spacing:i.dv,children:(0,o.jsx)(r.ZP,{item:!0,xs:12,md:12,children:(0,o.jsxs)(l.Z,{title:"Openlayers FeatureMoveAnimation",children:[(0,o.jsx)(C,{}),(0,o.jsx)(T.Z,{preview:"\nconst node = mapNode.current;\nif (!node) return;\n\nconst key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';\nconst attributions =\n  '<a href=\"https://www.maptiler.com/copyright/\" target=\"_blank\">&copy; MapTiler</a> ' +\n  '<a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">&copy; OpenStreetMap contributors</a>';\n\nconst center = [-5639523.95, -3501274.52];\nconst map = new Map({\n  target: document.getElementById('map') as HTMLElement,\n  view: new View({\n    center: center,\n    zoom: 10,\n    minZoom: 2,\n    maxZoom: 19\n  }),\n  layers: [\n    new TileLayer({\n      source: new XYZ({\n        attributions: attributions,\n        url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,\n        tileSize: 512\n      })\n    })\n  ]\n});\n\n// The polyline string is read from a JSON similar to those returned\n// by directions APIs such as Openrouteservice and Mapbox.\nfetch('/data/polyline/route.json').then(function (response) {\n  response.json().then(function (result) {\n    const polyline = result.routes[0].geometry;\n\n    const route = new Polyline({\n      factor: 1e6\n    }).readGeometry(polyline, {\n      dataProjection: 'EPSG:4326',\n      featureProjection: 'EPSG:3857'\n    }) as any;\n\n    const routeFeature = new Feature({\n      type: 'route',\n      geometry: route\n    });\n    const startMarker = new Feature({\n      type: 'icon',\n      geometry: new Point(route.getFirstCoordinate())\n    }) as any;\n    const endMarker = new Feature({\n      type: 'icon',\n      geometry: new Point(route.getLastCoordinate())\n    });\n    const position = startMarker.getGeometry().clone();\n    const geoMarker = new Feature({\n      type: 'geoMarker',\n      geometry: position\n    });\n\n    const styles = {\n      route: new Style({\n        stroke: new Stroke({\n          width: 6,\n          color: [237, 212, 0, 0.8]\n        })\n      }),\n      icon: new Style({\n        image: new Icon({\n          anchor: [0.5, 1],\n          src: 'data/icon.png'\n        })\n      }),\n      geoMarker: new Style({\n        image: new CircleStyle({\n          radius: 7,\n          fill: new Fill({ color: 'black' }),\n          stroke: new Stroke({\n            color: 'white',\n            width: 2\n          })\n        })\n      })\n    } as any;\n\n    const vectorLayer = new VectorLayer({\n      source: new VectorSource({\n        features: [routeFeature, geoMarker, startMarker, endMarker]\n      }),\n      style: function (feature) {\n        return styles[feature.get('type')];\n      }\n    });\n\n    map.addLayer(vectorLayer);\n\n    const speedInput = document.getElementById('speed') as HTMLInputElement;\n    const startButton = document.getElementById('start-animation') as HTMLInputElement;\n    let animating = false;\n    let distance = 0;\n    let lastTime: any;\n\n    function moveFeature(event: any) {\n      const speed = Number(speedInput.value);\n      const time = event.frameState.time;\n      const elapsedTime = time - lastTime;\n      distance = (distance + (speed * elapsedTime) / 1e6) % 2;\n      lastTime = time;\n\n      const currentCoordinate = route.getCoordinateAt(distance > 1 ? 2 - distance : distance);\n      position.setCoordinates(currentCoordinate);\n      const vectorContext = getVectorContext(event);\n      vectorContext.setStyle(styles.geoMarker);\n      vectorContext.drawGeometry(position);\n      // tell OpenLayers to continue the postrender animation\n      map.render();\n    }\n\n    function startAnimation() {\n      animating = true;\n      lastTime = Date.now();\n      startButton.textContent = 'Stop Animation';\n      vectorLayer.on('postrender', moveFeature);\n      // hide geoMarker and trigger map render through change event\n      geoMarker.setGeometry(null);\n    }\n\n    function stopAnimation() {\n      animating = false;\n      startButton.textContent = 'Start Animation';\n\n      // Keep marker at current animation position\n      geoMarker.setGeometry(position);\n      vectorLayer.un('postrender', moveFeature);\n    }\n\n    startButton.addEventListener('click', function () {\n      if (animating) {\n        stopAnimation();\n      } else {\n        startAnimation();\n      }\n    });\n  });\n});\n\nreturn () => {\n  map.setTarget();\n};\n",children:"\nimport React, { useEffect, useRef } from 'react';\n//import ol\nimport Feature from 'ol/Feature';\nimport Map from 'ol/Map';\nimport Point from 'ol/geom/Point';\nimport Polyline from 'ol/format/Polyline';\nimport VectorSource from 'ol/source/Vector';\nimport View from 'ol/View';\nimport XYZ from 'ol/source/XYZ';\nimport { Circle as CircleStyle, Fill, Icon, Stroke, Style } from 'ol/style';\nimport { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';\nimport { getVectorContext } from 'ol/render';\n\n// Import Styles\nimport 'ol/ol.css';\nimport styles from '../osmStyles.module.scss';\n\nconst FeatureMoveAnimationComponent = () => {\n  const mapNode = useRef(null);\n\n  useEffect(() => {\n    const node = mapNode.current;\n    if (!node) return;\n\n    const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';\n    const attributions =\n      '<a href=\"https://www.maptiler.com/copyright/\" target=\"_blank\">&copy; MapTiler</a> ' +\n      '<a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">&copy; OpenStreetMap contributors</a>';\n\n    const center = [-5639523.95, -3501274.52];\n    const map = new Map({\n      target: document.getElementById('map') as HTMLElement,\n      view: new View({\n        center: center,\n        zoom: 10,\n        minZoom: 2,\n        maxZoom: 19\n      }),\n      layers: [\n        new TileLayer({\n          source: new XYZ({\n            attributions: attributions,\n            url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,\n            tileSize: 512\n          })\n        })\n      ]\n    });\n\n    // The polyline string is read from a JSON similar to those returned\n    // by directions APIs such as Openrouteservice and Mapbox.\n    fetch('/data/polyline/route.json').then(function (response) {\n      response.json().then(function (result) {\n        const polyline = result.routes[0].geometry;\n\n        const route = new Polyline({\n          factor: 1e6\n        }).readGeometry(polyline, {\n          dataProjection: 'EPSG:4326',\n          featureProjection: 'EPSG:3857'\n        }) as any;\n\n        const routeFeature = new Feature({\n          type: 'route',\n          geometry: route\n        });\n        const startMarker = new Feature({\n          type: 'icon',\n          geometry: new Point(route.getFirstCoordinate())\n        }) as any;\n        const endMarker = new Feature({\n          type: 'icon',\n          geometry: new Point(route.getLastCoordinate())\n        });\n        const position = startMarker.getGeometry().clone();\n        const geoMarker = new Feature({\n          type: 'geoMarker',\n          geometry: position\n        });\n\n        const styles = {\n          route: new Style({\n            stroke: new Stroke({\n              width: 6,\n              color: [237, 212, 0, 0.8]\n            })\n          }),\n          icon: new Style({\n            image: new Icon({\n              anchor: [0.5, 1],\n              src: 'data/icon.png'\n            })\n          }),\n          geoMarker: new Style({\n            image: new CircleStyle({\n              radius: 7,\n              fill: new Fill({ color: 'black' }),\n              stroke: new Stroke({\n                color: 'white',\n                width: 2\n              })\n            })\n          })\n        } as any;\n\n        const vectorLayer = new VectorLayer({\n          source: new VectorSource({\n            features: [routeFeature, geoMarker, startMarker, endMarker]\n          }),\n          style: function (feature) {\n            return styles[feature.get('type')];\n          }\n        });\n\n        map.addLayer(vectorLayer);\n\n        const speedInput = document.getElementById('speed') as HTMLInputElement;\n        const startButton = document.getElementById('start-animation') as HTMLInputElement;\n        let animating = false;\n        let distance = 0;\n        let lastTime: any;\n\n        function moveFeature(event: any) {\n          const speed = Number(speedInput.value);\n          const time = event.frameState.time;\n          const elapsedTime = time - lastTime;\n          distance = (distance + (speed * elapsedTime) / 1e6) % 2;\n          lastTime = time;\n\n          const currentCoordinate = route.getCoordinateAt(distance > 1 ? 2 - distance : distance);\n          position.setCoordinates(currentCoordinate);\n          const vectorContext = getVectorContext(event);\n          vectorContext.setStyle(styles.geoMarker);\n          vectorContext.drawGeometry(position);\n          // tell OpenLayers to continue the postrender animation\n          map.render();\n        }\n\n        function startAnimation() {\n          animating = true;\n          lastTime = Date.now();\n          startButton.textContent = 'Stop Animation';\n          vectorLayer.on('postrender', moveFeature);\n          // hide geoMarker and trigger map render through change event\n          geoMarker.setGeometry(null);\n        }\n\n        function stopAnimation() {\n          animating = false;\n          startButton.textContent = 'Start Animation';\n\n          // Keep marker at current animation position\n          geoMarker.setGeometry(position);\n          vectorLayer.un('postrender', moveFeature);\n        }\n\n        startButton.addEventListener('click', function () {\n          if (animating) {\n            stopAnimation();\n          } else {\n            startAnimation();\n          }\n        });\n      });\n    });\n\n    return () => {\n      map.setTarget();\n    };\n  }, []);\n\n  return (\n    <>\n      <div id=\"map\" className={styles.map} ref={mapNode}></div>\n      <label htmlFor=\"speed\">\n        speed:&nbsp;\n        <input id=\"speed\" type=\"range\" min=\"10\" max=\"999\" step=\"10\" value=\"60\" />\n      </label>\n      <button id=\"start-animation\">Start Animation</button>\n    </>\n  );\n};\n\nexport default FeatureMoveAnimationComponent;\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,35238,92971,52117,1744],function(){return e(e.s=95486)}),_N_E=e.O()}]);