https://deck.gl/assets/js/f3fb3492.3227a781.js

1"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([["5615"],{60512(e,n,s){s.r(n),s.d(n,{metadata:()=>i,default:()=>h,frontMatter:()=>o,contentTitle:()=>l,toc:()=>c,assets:()=>d});var i=JSON.parse('{"id":"api-reference/extensions/brushing-extension","title":"BrushingExtension","description":"The BrushingExtension adds GPU-based data brushing functionalities to layers. It allows the layer to show/hide objects based on the current pointer position.","source":"@site/../docs/api-reference/extensions/brushing-extension.md","sourceDirName":"api-reference/extensions","slug":"/api-reference/extensions/brushing-extension","permalink":"/docs/api-reference/extensions/brushing-extension","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/deck.gl/tree/master/website/../docs/api-reference/extensions/brushing-extension.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"@deck.gl/extensions","permalink":"/docs/api-reference/extensions/overview"},"next":{"title":"ClipExtension","permalink":"/docs/api-reference/extensions/clip-extension"}}'),r=s(74848),t=s(28453);let o={},l="BrushingExtension",d={},c=[{value:"Installation",id:"installation",level:2},{value:"Constructor",id:"constructor",level:2},{value:"Layer Properties",id:"layer-properties",level:2},{value:"<code>brushingRadius</code> (number)",id:"brushingradius",level:4},{value:"<code>brushingEnabled</code> (boolean, optional)",id:"brushingenabled",level:4},{value:"<code>brushingTarget</code> (string, optional)",id:"brushingtarget",level:4},{value:"<code>getBrushingTarget</code> (Accessor&lt;Position&gt;, optional)",id:"getbrushingtarget",level:4},{value:"Source",id:"source",level:2}];function a(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,t.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.header,{children:(0,r.jsx)(n.h1,{id:"brushingextension",children:"BrushingExtension"})}),"\n",(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"BrushingExtension"})," adds GPU-based data brushing functionalities to layers. It allows the layer to show/hide objects based on the current pointer position."]}),"\n",(0,r.jsx)("div",{style:{position:"relative",height:450}}),"\n",(0,r.jsx)("div",{style:{position:"absolute",transform:"translateY(-450px)",paddingLeft:"inherit",paddingRight:"inherit",left:0,right:0},children:(0,r.jsx)("iframe",{height:"450",style:{width:"100%"},scrolling:"no",title:"deck.gl BrushingExtension",src:"https://codepen.io/vis-gl/embed/NWbxdKP?height=450&theme-id=light&default-tab=result",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true",children:(0,r.jsxs)(n.p,{children:["See the Pen ",(0,r.jsx)("a",{href:"https://codepen.io/vis-gl/pen/NWbxdKP",children:"deck.gl BrushingExtension"})," by vis.gl\n(",(0,r.jsx)("a",{href:"https://codepen.io/vis-gl",children:"@vis-gl"}),") on ",(0,r.jsx)("a",{href:"https://codepen.io",children:"CodePen"}),"."]})})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"import {ScatterplotLayer} from '@deck.gl/layers';\nimport {BrushingExtension} from '@deck.gl/extensions';\n\nconst layer = new ScatterplotLayer({\n  id: 'points',\n  data: POINTS,\n\n  // props from ScatterplotLayer\n  getPosition: d => d.position,\n  getRadius: d => d.radius,\n\n  // props added by BrushingExtension\n  brushingEnabled: true,\n  brushingRadius: 100000,\n\n  // Define extensions\n  extensions: [new BrushingExtension()]\n});\n"})}),"\n",(0,r.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsx)(n.p,{children:"To install the dependencies from NPM:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install deck.gl\n# or\nnpm install @deck.gl/core @deck.gl/layers @deck.gl/extensions\n"})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"import {BrushingExtension} from '@deck.gl/extensions';\nnew BrushingExtension();\n"})}),"\n",(0,r.jsx)(n.p,{children:"To use pre-bundled scripts:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-html",children:'<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"><\/script>\n\x3c!-- or --\x3e\n<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"><\/script>\n<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"><\/script>\n<script src="https://unpkg.com/@deck.gl/extensions@^9.0.0/dist.min.js"><\/script>\n'})}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"new deck.BrushingExtension();\n"})}),"\n",(0,r.jsx)(n.h2,{id:"constructor",children:"Constructor"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"new BrushingExtension();\n"})}),"\n",(0,r.jsx)(n.h2,{id:"layer-properties",children:"Layer Properties"}),"\n",(0,r.jsxs)(n.p,{children:["When added to a layer via the ",(0,r.jsx)(n.code,{children:"extensions"})," prop, the ",(0,r.jsx)(n.code,{children:"BrushingExtension"})," adds the following properties to the layer:"]}),"\n",(0,r.jsxs)(n.h4,{id:"brushingradius",children:[(0,r.jsx)(n.code,{children:"brushingRadius"})," (number)"]}),"\n",(0,r.jsx)(n.p,{children:"The brushing radius centered at the pointer, in meters. If a data object is within this circle, it is rendered; otherwise it is hidden."}),"\n",(0,r.jsxs)(n.h4,{id:"brushingenabled",children:[(0,r.jsx)(n.code,{children:"brushingEnabled"})," (boolean, optional)"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Default: ",(0,r.jsx)(n.code,{children:"true"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"Enable/disable brushing. If brushing is disabled, all objects are rendered."}

1),"\n",(0,r.jsx)(n.p,{children:"Brushing is always disabled when the pointer leaves the current viewport."}),"\n",(0,r.jsxs)(n.h4,{id:"brushingtarget",children:[(0,r.jsx)(n.code,{children:"brushingTarget"})," (string, optional)"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Default: ",(0,r.jsx)(n.code,{children:"source"})]}),"\n"]}),"\n",(0,r.jsx)(n.p,{children:"The position used to filter each object by. One of the following:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'source'"}),": Use the primary position for each object. This can mean different things depending on the layer. It usually refers to the coordinates returned by ",(0,r.jsx)(n.code,{children:"getPosition"})," or ",(0,r.jsx)(n.code,{children:"getSourcePosition"})," accessors."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'target'"}),": Use the secondary position for each object. This may not be available in some layers. It usually refers to the coordinates returned by ",(0,r.jsx)(n.code,{children:"getTargetPosition"})," accessors."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'source_target'"}),": Use both the primary position and secondary position for each object. Show objet if either is in brushing range."]}),"\n",(0,r.jsxs)(n.li,{children:[(0,r.jsx)(n.code,{children:"'custom'"}),": Some layers may not describe their data objects with one or two coordinates, for example ",(0,r.jsx)(n.code,{children:"PathLayer"})," and ",(0,r.jsx)(n.code,{children:"PolygonLayer"}),". Use this option with the ",(0,r.jsx)(n.code,{children:"getBrushingTarget"})," prop to provide a custom position that each object should be filtered by."]}),"\n"]}),"\n",(0,r.jsxs)(n.h4,{id:"getbrushingtarget",children:[(0,r.jsx)(n.code,{children:"getBrushingTarget"})," (",(0,r.jsx)(n.a,{href:"/docs/developer-guide/using-layers#accessors",children:"Accessor<Position>"}),", optional)"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsxs)(n.li,{children:["Default: ",(0,r.jsx)(n.code,{children:"null"})]}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Called to retrieve an arbitrary position for each object that it will be filtered by. Returns an array ",(0,r.jsx)(n.code,{children:"[x, y]"}),". Only effective if ",(0,r.jsx)(n.code,{children:"brushingTarget"})," is set to ",(0,r.jsx)(n.code,{children:"custom"}),"."]}),"\n",(0,r.jsx)(n.h2,{id:"source",children:"Source"}),"\n",(0,r.jsx)(n.p,{children:(0,r.jsx)(n.a,{href:"https://github.com/visgl/deck.gl/tree/9.4-release/modules/extensions/src/brushing",children:"modules/extensions/src/brushing"})})]})}function h(e={}){let{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}},28453(e,n,s){s.d(n,{R:()=>o,x:()=>l});var i=s(96540);let r={},t=i.createContext(r);function o(e){let n=i.useContext(t);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),i.createElement(t.Provider,{value:n},e.children)}}}]);
2//# sourceMappingURL=f3fb3492.3227a781.js.map