Skip to content

Commit

Permalink
deploy: 96d58bf
Browse files Browse the repository at this point in the history
  • Loading branch information
@behoney
behoney committed Oct 4, 2024
1 parent 6f4b634 commit 8f54b1c
Show file tree
Hide file tree
Showing 7 changed files with 9 additions and 7 deletions.
1 change: 1 addition & 0 deletions _astro/DataSourceExample.CHlY77K-.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion _astro/DataSourceExample.CRgI2Nni.js
View file

This file was deleted.

1 change: 1 addition & 0 deletions _astro/DefaultMapExample.CHlY77K-.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion _astro/DefaultMapExample.CycYEh66.js
View file

This file was deleted.

8 changes: 5 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.15.10"><title>React GeoJSON Map Documentation</title><style>:root{--color-primary: #7ebc6f;--color-secondary: #5b7cba;--color-accent: #f5d76e;--color-background: #f0f0f0;--color-text: #333333;--color-text-light: #666666;--color-road: #ffffff;--color-building: #d9d0c9;--color-code-background: #f4f4f4;--color-code-text: #333333}body{font-family:Open Sans,Arial,sans-serif;background-color:var(--color-background);color:var(--color-text);line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:Roboto,Helvetica Neue,sans-serif;font-weight:700;color:var(--color-primary)}p{font-size:16px;margin-bottom:1rem}a{color:var(--color-secondary);text-decoration:none;transition:color .3s ease}a:hover{color:var(--color-accent)}.container{max-width:1200px;margin:0 auto;padding:0 1rem}pre{background-color:var(--color-code-background);padding:1rem;border-radius:5px;overflow-x:auto;margin-bottom:1rem}code{font-family:Courier New,Courier,monospace;background-color:var(--color-code-background);color:var(--color-code-text);padding:.2em .4em;border-radius:3px;font-size:.9em}.example-container[data-astro-cid-j7pv25f6]{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:1rem;width:100%;padding:0 1rem}
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.15.10"><title>React GeoJSON Map Documentation</title><style>:root{--color-primary: #7ebc6f;--color-secondary: #5b7cba;--color-accent: #f5d76e;--color-background: #f0f0f0;--color-text: #333333;--color-text-light: #666666;--color-road: #ffffff;--color-building: #d9d0c9;--color-code-background: #f4f4f4;--color-code-text: #333333}body{font-family:Open Sans,Arial,sans-serif;background-color:var(--color-background);color:var(--color-text);line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:Roboto,Helvetica Neue,sans-serif;font-weight:700;color:var(--color-primary)}p{font-size:16px;margin-bottom:1rem}a{color:var(--color-secondary);text-decoration:none;transition:color .3s ease}a:hover{color:var(--color-accent)}.container{max-width:1200px;margin:0 auto;padding:0 1rem}pre{background-color:var(--color-code-background);padding:1rem;border-radius:5px;overflow-x:auto;margin-bottom:1rem}code{font-family:Courier New,Courier,monospace;background-color:var(--color-code-background);color:var(--color-code-text);padding:.2em .4em;border-radius:3px;font-size:.9em}.example-container[data-astro-cid-j7pv25f6]{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:1rem;width:100%;padding:0 1rem}
</style></head> <body> <main> <h1 data-astro-cid-j7pv25f6>React GeoJSON Map</h1> <p data-astro-cid-j7pv25f6>Welcome to <a href="https://github.com/behoney/react-geojson-map" data-astro-cid-j7pv25f6>react-geojson-map</a>, a library for declarative geospatial visualization using React Fiber and OpenLayers. It offers a robust solution for creating interactive and efficient map-based applications with React's component-based architecture.</p> <h2 data-astro-cid-j7pv25f6>Key Features</h2> <ul data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6>Declarative components for defining map layers, sources, and interactions using JSX</li> <li data-astro-cid-j7pv25f6>CSS styling support for dynamic and themeable vector layer styling</li> <li data-astro-cid-j7pv25f6>Data source injection for streamlined integration and management of geospatial data sources</li> </ul> <p data-astro-cid-j7pv25f6><strong data-astro-cid-j7pv25f6>Note:</strong> This library is currently under development and not yet ready for production use.</p> <h2 data-astro-cid-j7pv25f6>Usage Example</h2> <div class="example-container" data-astro-cid-j7pv25f6> <pre data-astro-cid-j7pv25f6> <code class="language-jsx" data-astro-cid-j7pv25f6>

import { GeoMap } from &#39;react-geojson-map&#39;;

function App() {
return (
&lt;div style=&quot;width: 300px; height: 300px;&quot;&gt;
&lt;GeoMap /&gt;
&lt;GeoMap&gt;
&lt;GeoDataSource url=&quot;sample.geojson&quot; /&gt;
&lt;/GeoMap&gt;
&lt;/div&gt;
);
}

</code>
</pre> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="16mDJv" prefix="r0" component-url="/_astro/DefaultMapExample.CycYEh66.js" component-export="default" renderer-url="/_astro/client.BH12DeU3.js" props="{&quot;aria-label&quot;:[0,&quot;Map example&quot;],&quot;data-astro-cid-j7pv25f6&quot;:[0,true]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;DefaultMapExample&quot;,&quot;value&quot;:true}" await-children=""><div style="width:300px;height:300px"><div id=":r0R0:" class="react-geojson-map w-full h-full" style="width:100%;height:100%"></div></div><!--astro:end--></astro-island> </div> <p data-astro-cid-j7pv25f6>Try it live on <a href="https://shorturl.at/7XuDN" target="_blank" rel="noopener noreferrer" data-astro-cid-j7pv25f6>StackBlitz</a></p> <h2 data-astro-cid-j7pv25f6>Why Use React Reconciler?</h2> <p data-astro-cid-j7pv25f6>React GeoJSON Map leverages React Reconciler for superior performance and flexibility in geospatial visualization. This approach enables fine-grained control over rendering, custom logic aligned with OpenLayers, and a declarative API for map components. As a result, it offers efficient updates, smooth performance with large datasets, and an intuitive development experience.</p> <p data-astro-cid-j7pv25f6>By using React Reconciler, the library achieves efficient tree updates, better separation of concerns, and reduced overhead compared to React Context. This leads to more granular control over updates, cleaner code separation, and potentially fewer unnecessary re-renders. Consequently, React GeoJSON Map is ideal for building complex, interactive geospatial applications with enhanced performance and maintainability.</p> </main> <footer> <p>&copy; 2024 <a href="https://github.com/behoney">behoney</a>. All rights reserved.</p> </footer> </body></html>
</pre> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="2kP4Js" component-url="/react-geojson-map/_astro/DefaultMapExample.CHlY77K-.js" component-export="default" renderer-url="/react-geojson-map/_astro/client.BH12DeU3.js" props="{&quot;aria-label&quot;:[0,&quot;Map example&quot;],&quot;data-astro-cid-j7pv25f6&quot;:[0,true]}" ssr="" client="only" opts="{&quot;name&quot;:&quot;DefaultMapExample&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> </div> <p data-astro-cid-j7pv25f6>Try it live on <a href="https://shorturl.at/7XuDN" target="_blank" rel="noopener noreferrer" data-astro-cid-j7pv25f6>StackBlitz</a></p> <h2 data-astro-cid-j7pv25f6>Why Use React Reconciler?</h2> <p data-astro-cid-j7pv25f6>React GeoJSON Map leverages React Reconciler for superior performance and flexibility in geospatial visualization. This approach enables fine-grained control over rendering, custom logic aligned with OpenLayers, and a declarative API for map components. As a result, it offers efficient updates, smooth performance with large datasets, and an intuitive development experience.</p> <p data-astro-cid-j7pv25f6>By using React Reconciler, the library achieves efficient tree updates, better separation of concerns, and reduced overhead compared to React Context. This leads to more granular control over updates, cleaner code separation, and potentially fewer unnecessary re-renders. Consequently, React GeoJSON Map is ideal for building complex, interactive geospatial applications with enhanced performance and maintainability.</p> </main> <footer> <p>&copy; 2024 <a href="https://github.com/behoney">behoney</a>. All rights reserved.</p> </footer> </body></html>
Loading

0 comments on commit 8f54b1c

Please sign in to comment.