https://deck.gl/assets/js/608d6ba6.a24f0c6c.js

1"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([["345"],{51322(e,s,r){r.r(s),r.d(s,{metadata:()=>t,default:()=>o,frontMatter:()=>l,contentTitle:()=>a,toc:()=>c,assets:()=>d});var t=JSON.parse('{"id":"README","title":"Introduction","description":"These docs are for","source":"@site/../docs/README.md","sourceDirName":".","slug":"/","permalink":"/docs/","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/deck.gl/tree/master/website/../docs/README.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","next":{"title":"What\'s New","permalink":"/docs/whats-new"}}'),n=r(74848),i=r(28453);let l={},a="Introduction",d={},c=[{value:"Flavors",id:"flavors",level:2},{value:"Script Tag",id:"script-tag",level:3},{value:"NPM Module",id:"npm-module",level:3},{value:"Pure JS",id:"pure-js",level:4},{value:"React",id:"react",level:4},{value:"Python",id:"python",level:3},{value:"Ecosystem",id:"ecosystem",level:2},{value:"Community Add-Ons",id:"community-add-ons",level:3},{value:"Third-Party Bindings",id:"third-party-bindings",level:3},{value:"Governance",id:"governance",level:2}];function h(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s.header,{children:(0,n.jsx)(s.h1,{id:"introduction",children:"Introduction"})}),"\n",(0,n.jsxs)("p",{align:"center",children:[(0,n.jsx)(s.p,{children:"These docs are for\n\xa0"}),(0,n.jsx)("a",{href:"https://github.com/visgl/deck.gl/blob/9.1-release/docs/README.md",children:(0,n.jsx)("img",{src:"https://img.shields.io/badge/deck.gl-v9.1-brightgreen.svg?style=flat-square"})}),(0,n.jsx)("br",{}),(0,n.jsx)(s.p,{children:"Looking for an old version?\n\xa0"}),(0,n.jsx)("a",{href:"https://github.com/visgl/deck.gl/blob/8.9-release/docs/README.md",children:(0,n.jsx)("img",{src:"https://img.shields.io/badge/deck.gl-v8.x-green.svg?style=flat-square"})}),(0,n.jsx)(s.p,{children:"\xa0"}),(0,n.jsx)("a",{href:"https://github.com/visgl/deck.gl/blob/7.3-release/docs/README.md",children:(0,n.jsx)("img",{src:"https://img.shields.io/badge/deck.gl-v7.x-green.svg?style=flat-square"})}),(0,n.jsx)(s.p,{children:"\xa0"}),(0,n.jsx)("a",{href:"https://github.com/visgl/deck.gl/blob/6.4-release/docs/README.md",children:(0,n.jsx)("img",{src:"https://img.shields.io/badge/deck.gl-v6.x-green.svg?style=flat-square"})})]}),"\n",(0,n.jsx)(s.p,{children:"deck.gl is designed to simplify high-performance, WebGPU/WebGL2 based visualization of large data sets. Users can quickly get impressive visual results with minimal effort by composing existing layers, or leverage deck.gl's extensible architecture to address custom needs."}),"\n",(0,n.jsxs)(s.p,{children:["deck.gl maps ",(0,n.jsx)(s.strong,{children:"data"})," (typically in the form of arrays of JSON objects or binary data columns) into a stack of visual ",(0,n.jsx)(s.strong,{children:"layers"})," - e.g. icons, polygons, texts; and lets the application render these through various ",(0,n.jsx)(s.strong,{children:"views"}),": e.g. map, first-person, orthographic."]}),"\n",(0,n.jsx)(s.p,{children:"deck.gl handles a number of challenges out of the box:"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:"Performant rendering of large data sets"}),"\n",(0,n.jsx)(s.li,{children:"Interactive event handling such as picking, highlighting and filtering"}),"\n",(0,n.jsx)(s.li,{children:"Cartographic projections and integration with major basemap providers including Maplibre, Google Maps, Mapbox, and Esri ArcGIS"}),"\n",(0,n.jsx)(s.li,{children:"A catalog of proven, well-tested layers"}),"\n"]}),"\n",(0,n.jsx)(s.p,{children:"deck.gl is designed to be highly customizable. All layers come with flexible APIs to allow programmatic control of each aspect of the rendering. All core classes are easily extendable by the users to address custom use cases."}),"\n",(0,n.jsx)(s.h2,{id:"flavors",children:"Flavors"}),"\n",(0,n.jsx)(s.h3,{id:"script-tag",children:"Script Tag"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-html",children:'<script src="https://unpkg.com/deck.gl@latest/dist.min.js"><\/script>\n'})}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/get-started/using-standalone#using-the-scripting-api",children:"Get started"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://github.com/visgl/deck.gl/tree/9.4-release/examples/get-started/scripting",children:"Full examples"})}),"\n"]}),"\n",(0,n.jsx)(s.h3,{id:"npm-module",children:"NPM Module"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-bash",children:"npm install deck.gl\n"})}),"\n",(0,n.jsx)(s.h4,{id:"pure-js",children:"Pure JS"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/get-started/using-standalone",children:"Get started"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://github.com/visgl/deck.gl/tree/9.4-release/examples/get-started/pure-js",children:"Full examples"})}),"\n"]}),"\n",(0,n.jsx)(s.h4,{id:"react",children:"React"}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"/docs/get-started/using-with-react",children:"Get started"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://github.com/visgl/deck.gl/tree/9.4-release/examples/get-started/react",children:"Full examples"})}),"\n"]}),"\n",(0,n.jsx)(s.h3,{id:"python",children:"Python"}),"\n",(0,n.jsx)(s.pre,{children:(0,n.jsx)(s.code,{className:"language-bash",children:"pip install pydeck\n"})}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://pydeck.gl/en/latest/installation.html",children:"Get started"})}),"\n",(0,n.jsx)(s.li,{children:(0,n.jsx)(s.a,{href:"https://pydeck.gl/",children:"Examples"})}),"\n"]}),"\n",(0,n.jsx)(s.h2,{id:"ecosystem",children:"Ecosystem"}),"\n",(0,n.jsxs)(s.p,{children:["deck.gl is the core framework in the ",(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"http://vis.gl",children:"vis.gl"})})," framework suite. To prevent the deck.gl code base from becoming an unmaintainable monolith, deck.gl relies on other official vis.gl companion frameworks for important functional areas such as data loading, low-level GPU access, and geospatial math:"]}),"\n",(0,n.jsxs)(s.table,{children:[(0,n.jsx)(s.thead,{children:(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.th,{children:"Framework"}),(0,n.jsx)(s.th,{children:"Description"})]})}),(0,n.jsxs)(s.tbody,{children:[(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"https://visgl.github.io/react-map-gl/",children:"react-map-gl"})})}),(0,n.jsxs)(s.td,{children:["A React wrapper around Mapbox GL which w

1orks seamlessly with deck.gl. There are two integration modes to choose from depending on which features you need, see ",(0,n.jsx)(s.a,{href:"/docs/developer-guide/base-maps/using-with-mapbox#react-map-gl",children:"Using With Mapbox"})," for details."]})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"https://visgl.github.io/react-google-maps/",children:"react-google-maps"})})}),(0,n.jsx)(s.td,{children:"A React wrapper around Google Maps which works seamlessly with deck.gl."})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"https://loaders.gl",children:"loaders.gl"})})}),(0,n.jsx)(s.td,{children:"Suite of framework-independent loaders for file formats focused on visualization of big geospatial data."})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"https://luma.gl/",children:"luma.gl"})})}),(0,n.jsx)(s.td,{children:"A general purpose WebGPU/WebGL2 library designed to be interoperable with other WebGPU/WebGL2 libraries. luma.gl can work with WebGL contexts created by other libraries."})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"https://visgl.github.io/math.gl/",children:"math.gl"})})}),(0,n.jsx)(s.td,{children:"A 3D + geospatial math library."})]})]})]}),"\n",(0,n.jsx)(s.h3,{id:"community-add-ons",children:"Community Add-Ons"}),"\n",(0,n.jsxs)(s.p,{children:['A source of "semi-official" extension modules for deck.gl can be found in the ',(0,n.jsx)(s.a,{href:"https://visgl.github.io/deck.gl-community/",children:"deck.gl-community"})," repository, including experimental layer packs such as editable layers and graph layers, additional base map integrations, etc."]}),"\n",(0,n.jsx)(s.h3,{id:"third-party-bindings",children:"Third-Party Bindings"}),"\n",(0,n.jsx)(s.p,{children:"The following is a list of third-party bindings of deck.gl to other languages. Note the project maintainers may not always keep up with the latest deck.gl releases."}),"\n",(0,n.jsxs)(s.table,{children:[(0,n.jsx)(s.thead,{children:(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.th,{children:"Language"}),(0,n.jsx)(s.th,{children:"Project URL"})]})}),(0,n.jsxs)(s.tbody,{children:[(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:"R"})}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"https://symbolixau.github.io/mapdeck/articles/mapdeck.html",children:"mapdeck"})})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:"C++"})}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"https://github.com/UnfoldedInc/deck.gl-native",children:"deck.gl-native"})})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:(0,n.jsx)(s.a,{href:"https://vega.github.io/",children:"Vega"})})}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"https://github.com/microsoft/SandDance/tree/master/packages/vega-deck.gl",children:"vega-deck.gl"})})]}),(0,n.jsxs)(s.tr,{children:[(0,n.jsx)(s.td,{children:(0,n.jsx)(s.strong,{children:"Python"})}),(0,n.jsx)(s.td,{children:(0,n.jsx)(s.a,{href:"https://github.com/developmentseed/lonboard",children:"Lonboard"})})]})]})]}),"\n",(0,n.jsx)(s.h2,{id:"governance",children:"Governance"}),"\n",(0,n.jsxs)(s.p,{children:["deck.gl is part of the ",(0,n.jsx)(s.a,{href:"https://openjsf.org",children:"OpenJS Foundation"}),", and is a leading framework in OpenJS's ",(0,n.jsx)(s.a,{href:"https://www.openvisualization.org/",children:"Open Visualization"})," collaboration space, with a strong community of contributors and users."]}),"\n",(0,n.jsxs)(s.ul,{children:["\n",(0,n.jsxs)(s.li,{children:["Find our Technical Charter and Community Governance Guidelines ",(0,n.jsx)(s.a,{href:"https://github.com/visgl/tsc",children:"here"}),"."]}),"\n",(0,n.jsxs)(s.li,{children:["Join our ",(0,n.jsx)(s.a,{href:"https://slack-invite.openjsf.org/",children:"Slack workspace"})," for learning and discussions."]}),"\n",(0,n.jsxs)(s.li,{children:["Our ",(0,n.jsx)(s.strong,{children:"bi-weekly meetings"})," and ",(0,n.jsx)(s.strong,{children:"yearly collaborator summits"})," are open to everyone and are announced in the slack channel."]}),"\n"]})]})}function o(e={}){let{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},28453(e,s,r){r.d(s,{R:()=>l,x:()=>a});var t=r(96540);let n={},i=t.createContext(n);function l(e){let s=t.useContext(i);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function a(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:l(e.components),t.createElement(i.Provider,{value:s},e.children)}}}]);
2//# sourceMappingURL=608d6ba6.a24f0c6c.js.map