1"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([["1041"],{87024(e,n,s){s.r(n),s.d(n,{metadata:()=>t,default:()=>p,frontMatter:()=>a,contentTitle:()=>i,toc:()=>l,assets:()=>c});var t=JSON.parse('{"id":"api-reference/core/deckgl","title":"DeckGL (Scripting Interface)","description":"DeckGL extends the core Deck class with some additional features such as Mapbox integration. It offers a convenient way to use deck.gl in prototype environments such as Codepen, JSFiddle and Observable.","source":"@site/../docs/api-reference/core/deckgl.md","sourceDirName":"api-reference/core","slug":"/api-reference/core/deckgl","permalink":"/docs/api-reference/core/deckgl","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/deck.gl/tree/master/website/../docs/api-reference/core/deckgl.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"WebGLAggregator","permalink":"/docs/api-reference/aggregation-layers/webgl-aggregator"},"next":{"title":"project (Shader Module)","permalink":"/docs/api-reference/core/project"}}'),o=s(74848),r=s(28453);let a={},i="DeckGL (Scripting Interface)",c={},l=[{value:"Usage",id:"usage",level:2},{value:"Properties",id:"properties",level:2},{value:"<code>container</code> (DOMElement | String, optional)",id:"container",level:4},{value:"<code>map</code> (object, optional)",id:"map",level:4},{value:"<code>mapStyle</code> (object | string, optional)",id:"mapstyle",level:4},{value:"<code>mapboxApiAccessToken</code> (string, optional)",id:"mapboxapiaccesstoken",level:4},{value:"<code>mapOptions</code> (object, optional)",id:"mapoptions",level:4},{value:"Methods",id:"methods",level:2},{value:"<code>getMapboxMap</code>",id:"getmapboxmap",level:4},{value:"Source",id:"source",level:2}];function d(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h4:"h4",header:"header",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"deckgl-scripting-interface",children:"DeckGL (Scripting Interface)"})}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.code,{children:"DeckGL"})," extends the core ",(0,o.jsx)(n.a,{href:"/docs/api-reference/core/deck",children:"Deck"})," class with some additional features such as Mapbox integration. It offers a convenient way to use deck.gl in prototype environments such as ",(0,o.jsx)(n.a,{href:"https://codepen.io",children:"Codepen"}),", ",(0,o.jsx)(n.a,{href:"https://jsfiddle.net",children:"JSFiddle"})," and ",(0,o.jsx)(n.a,{href:"https://observablehq.com",children:"Observable"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["Make sure to read the ",(0,o.jsx)(n.a,{href:"/docs/get-started/using-standalone",children:"Using deck.gl Scripting API"})," article."]}),"\n",(0,o.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"new deck.DeckGL({\n mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',\n initialViewState: {\n longitude: -122.45,\n latitude: 37.8,\n zoom: 12\n },\n controller: true,\n layers: [\n new deck.ScatterplotLayer({\n data: [\n {position: [-122.45, 37.8], c
1olor: [255, 0, 0], radius: 100}\n ],\n getColor: d => d.color,\n getRadius: d => d.radius\n })\n ]\n});\n"})}),"\n",(0,o.jsx)(n.h2,{id:"properties",children:"Properties"}),"\n",(0,o.jsxs)(n.p,{children:["All ",(0,o.jsx)(n.a,{href:"/docs/api-reference/core/deck",children:"Deck"})," class properties, with these additional props that can be passed to the constructor:"]}),"\n",(0,o.jsxs)(n.h4,{id:"container",children:[(0,o.jsx)(n.code,{children:"container"})," (DOMElement | String, optional)"]}),"\n",(0,o.jsxs)(n.p,{children:["Default: ",(0,o.jsx)(n.code,{children:"document.body"})]}),"\n",(0,o.jsx)(n.p,{children:"The container in which deck.gl should append its canvas. Can be either a HTMLDivElement or the element id. The deck.gl canvas is resized to fill the container."}),"\n",(0,o.jsxs)(n.h4,{id:"map",children:[(0,o.jsx)(n.code,{children:"map"})," (object, optional)"]}),"\n",(0,o.jsxs)(n.p,{children:["Default: ",(0,o.jsx)(n.code,{children:"window.mapboxgl || window.maplibregl"})]}),"\n",(0,o.jsxs)(n.p,{children:["The scripting API offers out-of-the-box integration with ",(0,o.jsx)(n.a,{href:"https://mapbox.com",children:"Mapbox GL JS"})," or ",(0,o.jsx)(n.a,{href:"https://maplibre.org",children:"MapLibre GL JS"}),". To add a base map to your visualization, you need to include the base map library and stylesheet:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<script src="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.js"><\/script>\n<link href="https://api.mapbox.com/mapbox-gl-js/v3.2.0/mapbox-gl.css" rel="stylesheet" />\n\x3c!-- or --\x3e\n<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"><\/script>\n<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />\n'})}),"\n",(0,o.jsxs)(n.p,{children:["The above script adds ",(0,o.jsx)(n.code,{children:"mapboxgl"})," or ",(0,o.jsx)(n.code,{children:"maplibregl"})," to the global scope, which will be picked up by default."]}),"\n",(0,o.jsxs)(n.p,{children:["To disable the base map, simply exclude the mapbox script or set ",(0,o.jsx)(n.code,{children:"map"})," to false."]}),"\n",(0,o.jsxs)(n.p,{children:["In some environments such as Observable, libraries cannot be imported into the global scope, in which case you need to manually pass the mapboxgl object to ",(0,o.jsx)(n.code,{children:"map"}),":"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"mapboxgl = require('mapbox-gl@^3.0.0/dist/mapbox-gl.js');\n// or\nmaplibregl = require('maplibre-gl@^3.0.0/dist/maplibre-gl.js');\n"})}),"\n",(0,o.jsx)(n.p,{children:"And"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"new deck.DeckGL({\n ...\n map: mapboxgl // or maplibregl\n});\n"})}),"\n",(0,o.jsxs)(n.h4,{id:"mapstyle",children:[(0,o.jsx)(n.code,{children:"mapStyle"})," (object | string, optional)"]}),"\n",(0,o.jsx)(n.p,{children:"The style JSON or URL for the Mapbox map."}),"\n",(0,o.jsxs)(n.h4,{id:"mapboxapiaccesstoken",children:[(0,o.jsx)(n.code,{children:"mapboxApiAccessToken"})," (string, optional)"]}),"\n",(0,o.jsxs)(n.p,{children:["The API access token to use Mapbox tiles. See ",(0,o.jsx)(n.a,{href:"https://www.mapbox.com/mapbox-gl-js/api",children:"Mapbox GL JS"})," documentation for how to use Mapbox."]}),"\n",(0,o.jsxs)(n.h4,{id:"mapoptions",children:[(0,o.jsx)(n.code,{children:"mapOptions"})," (object, optional)"]}),"\n",(0,o.jsxs)(n.p,{children:["Additional options to pass to the ",(0,o.jsx)(n.a,{href:"https://docs.mapbox.com/mapbox-gl-js/api/map/",children:"mapboxgl.Map"})," or ",(0,o.jsx)(n.a,{href:"https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/",children:"maplibregl.Map"})," constructor."]}),"\n",(0,o.jsx)(n.h2,{id:"methods",children:"Methods"}),"\n",(0,o.jsxs)(n.p,{children:["All ",(0,o.jsx)(n.a,{href:"/docs/api-reference/core/deck",children:"Deck"})," class methods, with these additional methods:"]}),"\n",(0,o.jsx)(n.h4,{id:"getmapboxmap",children:(0,o.jsx)(n.code,{children:"getMapboxMap"})}),"\n",(0,o.jsxs)(n.p,{children:["Returns the mapbox-gl or maplibre-gl ",(0,o.jsx)(n.a,{href:"https://www.mapbox.com/mapbox-gl-js/api/#map",children:"Map"})," instance if a base map is present."]}),"\n",(0,o.jsx)(n.h2,{id:"source",children:"Source"}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.a,{href:"https://github.com/visgl/deck.gl/tree/9.4-release/modules/main/bundle.ts",children:"modules/main/bundle.ts"})})]})}function p(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},28453(e,n,s){s.d(n,{R:()=>a,x:()=>i});var t=s(96540);let o={},r=t.createContext(o);function a(e){let n=t.useContext(r);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]); 2//# sourceMappingURL=b5f03f30.34fd24fd.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.