CINXE.COM

<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api-reference/layers/path-layer" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.6.3"> <title data-rh="true">PathLayer | deck.gl</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://deck.gl/docs/api-reference/layers/path-layer"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="PathLayer | deck.gl"><meta data-rh="true" name="description" content="The PathLayer renders lists of coordinate points as extruded polylines with mitering."><meta data-rh="true" property="og:description" content="The PathLayer renders lists of coordinate points as extruded polylines with mitering."><link data-rh="true" rel="icon" href="/favicon.ico"><link data-rh="true" rel="canonical" href="https://deck.gl/docs/api-reference/layers/path-layer"><link data-rh="true" rel="alternate" href="https://deck.gl/docs/api-reference/layers/path-layer" hreflang="en"><link data-rh="true" rel="alternate" href="https://deck.gl/docs/api-reference/layers/path-layer" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://8EVYAVB4KT-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.7126b5a0.css"> <script src="/assets/js/runtime~main.90088244.js" defer="defer"></script> <script src="/assets/js/main.764c9a29.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/images/visgl-logo-dark.png" alt="vis.gl Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/images/visgl-logo-light.png" alt="vis.gl Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div>deck.gl</a><a class="navbar__item navbar__link" href="/examples">Examples</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Docs</a><a class="navbar__item navbar__link" href="/showcase">Showcase</a><a href="https://medium.com/vis-gl" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/visgl/deck.gl" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search</button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs">Overview</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/get-started/getting-started">Getting Started</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/developer-guide/using-layers">Developer Guide</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/docs/api-reference/core/deck">API Reference</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/deck">Core Classes</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/docs/api-reference/layers">Layers</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers">Layer Catalog Overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/core/layer">Layer Class</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/core/composite-layer">CompositeLayer Class</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/arc-layer">ArcLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/bitmap-layer">BitmapLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/column-layer">ColumnLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/aggregation-layers/contour-layer">ContourLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/geohash-layer">GeohashLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/geojson-layer">GeoJsonLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/great-circle-layer">GreatCircleLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/grid-cell-layer">GridCellLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/aggregation-layers/grid-layer">GridLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/h3-cluster-layer">H3ClusterLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/h3-hexagon-layer">H3HexagonLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/aggregation-layers/heatmap-layer">HeatmapLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/aggregation-layers/hexagon-layer">HexagonLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/icon-layer">IconLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/line-layer">LineLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/mvt-layer">MVTLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/api-reference/layers/path-layer">PathLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/point-cloud-layer">PointCloudLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/polygon-layer">PolygonLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/quadkey-layer">QuadkeyLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/s2-layer">S2Layer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/scatterplot-layer">ScatterplotLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/mesh-layers/scenegraph-layer">ScenegraphLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/aggregation-layers/screen-grid-layer">ScreenGridLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/mesh-layers/simple-mesh-layer">SimpleMeshLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/solid-polygon-layer">SolidPolygonLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/terrain-layer">TerrainLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/layers/text-layer">TextLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/tile-layer">TileLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/tile-3d-layer">Tile3DLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/trips-layer">TripsLayer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-3 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/api-reference/geo-layers/wms-layer">WMSLayer (Experimental)</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/aggregation-layers/overview">Aggregation Layers</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/deckgl">Scripting Interface</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/project">Shader Modules</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/viewport">Viewports</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/view">Views</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/controller">Controllers</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/linear-interpolator">Transitions</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/lighting-effect">Effects</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/docs/api-reference/core/ambient-light">Lights</a></div></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/api-reference/arcgis/overview">Submodule API Reference</a></div></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item">API Reference<meta itemprop="position" content="1"></li><li class="breadcrumbs__item">Layers<meta itemprop="position" content="2"></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active">PathLayer<meta itemprop="position" content="3"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>PathLayer</h1></header>  <div class="demo-base__DemoPlaceholder-sc-bhdrci-0 fBopzi"><div class="demo-base__DemoContainer-sc-bhdrci-1 iJsckf"><div id="deckgl-wrapper" style="position:absolute;z-index:0;left:0;top:0;width:100%;height:100%"><canvas id="deckgl-overlay" style="left:0;top:0"></canvas></div></div><div class="demo-base__DemoSourceLink-sc-bhdrci-2 iVVltR"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"></path><path fill="currentcolor" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></svg>Edit on Codepen</div></div> The <code>PathLayer</code> renders lists of coordinate points as extruded polylines with mitering.  <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">JavaScript</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">TypeScript</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">React</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">import {Deck} from '@deck.gl/core'; import {PathLayer} from '@deck.gl/layers'; const layer = new PathLayer({ id: 'PathLayer', data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-lines.json', getColor: d => { const hex = d.color; // convert to RGB return hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)); }, getPath: d => d.path, getWidth: 100, pickable: true }); new Deck({ initialViewState: { longitude: -122.4, latitude: 37.74, zoom: 11 }, controller: true, getTooltip: ({object}) => object && object.name, layers: [layer] }); </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">import {Deck, PickingInfo} from '@deck.gl/core'; import {PathLayer} from '@deck.gl/layers'; type BartLine = { name: string; color: string; path: [longitude: number, latitude: number][]; }; const layer = new PathLayer<BartLine>({ id: 'PathLayer', data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-lines.json', getColor: (d: BartLine) => { const hex = d.color; // convert to RGB return hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)); }, getPath: (d: BartLine) => d.path, getWidth: 100, pickable: true }); new Deck({ initialViewState: { longitude: -122.4, latitude: 37.74, zoom: 11 }, controller: true, getTooltip: ({object}: PickingInfo<BartLine>) => object && object.name, layers: [layer] }); </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">import React from 'react'; import DeckGL from '@deck.gl/react'; import {PathLayer} from '@deck.gl/layers'; import type {PickingInfo} from '@deck.gl/core'; type BartLine = { name: string; color: string; path: [longitude: number, latitude: number][]; }; function App() { const layer = new PathLayer<BartLine>({ id: 'PathLayer', data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-lines.json', getColor: (d: BartLine) => { const hex = d.color; // convert to RGB return hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)); }, getPath: (d: BartLine) => d.path, getWidth: 100, pickable: true }); return <DeckGL initialViewState={{ longitude: -122.4, latitude: 37.74, zoom: 11 }} controller getTooltip={({object}: PickingInfo<BartLine>) => object && object.name} layers={[layer]} />; } </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div></div></div></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="installation">Installation<a href="#installation" class="hash-link" aria-label="Direct link to Installation" title="Direct link to Installation"></a></h2> To install the dependencies from NPM: <div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">npm install deck.gl # or npm install @deck.gl/core @deck.gl/layers </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">import {PathLayer} from '@deck.gl/layers'; import type {PathLayerProps} from '@deck.gl/layers'; new PathLayer<DataT>(...props: PathLayerProps<DataT>[]); </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> To use pre-bundled scripts: <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv"><script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>  <script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script> <script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script> </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">new deck.PathLayer({}); </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="properties">Properties<a href="#properties" class="hash-link" aria-label="Direct link to Properties" title="Direct link to Properties"></a></h2> Inherits from all <a href="/docs/api-reference/core/layer">Base Layer</a> properties. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="render-options">Render Options<a href="#render-options" class="hash-link" aria-label="Direct link to Render Options" title="Direct link to Render Options"></a></h3> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="widthunits"><code>widthUnits</code> (string, optional)<a href="#widthunits" class="hash-link" aria-label="Direct link to widthunits" title="Direct link to widthunits"></a></h4> <ul> <li>Default: <code>'meters'</code></li> </ul> The units of the line width, one of <code>'meters'</code>, <code>'common'</code>, and <code>'pixels'</code>. See <a href="/docs/developer-guide/coordinate-systems#supported-units">unit system</a>. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="widthscale"><code>widthScale</code> (number, optional) <img decoding="async" loading="lazy" src="https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square%22" alt="transition-enabled" class="img_ev3q"><a href="#widthscale" class="hash-link" aria-label="Direct link to widthscale" title="Direct link to widthscale"></a></h4> <ul> <li>Default: <code>1</code></li> </ul> The path width multiplier that multiplied to all paths. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="widthminpixels"><code>widthMinPixels</code> (number, optional) <img decoding="async" loading="lazy" src="https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square%22" alt="transition-enabled" class="img_ev3q"><a href="#widthminpixels" class="hash-link" aria-label="Direct link to widthminpixels" title="Direct link to widthminpixels"></a></h4> <ul> <li>Default: <code>0</code></li> </ul> The minimum path width in pixels. This prop can be used to prevent the path from getting too thin when zoomed out. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="widthmaxpixels"><code>widthMaxPixels</code> (number, optional) <img decoding="async" loading="lazy" src="https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square%22" alt="transition-enabled" class="img_ev3q"><a href="#widthmaxpixels" class="hash-link" aria-label="Direct link to widthmaxpixels" title="Direct link to widthmaxpixels"></a></h4> <ul> <li>Default: Number.MAX_SAFE_INTEGER</li> </ul> The maximum path width in pixels. This prop can be used to prevent the path from getting too thick when zoomed in. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="caprounded"><code>capRounded</code> (boolean, optional)<a href="#caprounded" class="hash-link" aria-label="Direct link to caprounded" title="Direct link to caprounded"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> Type of caps. If <code>true</code>, draw round caps. Otherwise draw square caps. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="jointrounded"><code>jointRounded</code> (boolean, optional)<a href="#jointrounded" class="hash-link" aria-label="Direct link to jointrounded" title="Direct link to jointrounded"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> Type of joint. If <code>true</code>, draw round joints. Otherwise draw miter joints. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="billboard"><code>billboard</code> (boolean, optional)<a href="#billboard" class="hash-link" aria-label="Direct link to billboard" title="Direct link to billboard"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> If <code>true</code>, extrude the path in screen space (width always faces the camera). If <code>false</code>, the width always faces up. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="miterlimit"><code>miterLimit</code> (number, optional) <img decoding="async" loading="lazy" src="https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square%22" alt="transition-enabled" class="img_ev3q"><a href="#miterlimit" class="hash-link" aria-label="Direct link to miterlimit" title="Direct link to miterlimit"></a></h4> <ul> <li>Default: <code>4</code></li> </ul> The maximum extent of a joint in ratio to the stroke width. Only works if <code>jointRounded</code> is <code>false</code>. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="_pathtype"><code>_pathType</code> (object, optional)<a href="#_pathtype" class="hash-link" aria-label="Direct link to _pathtype" title="Direct link to _pathtype"></a></h4> <ul> <li>Default: <code>null</code></li> </ul> <blockquote> Note: This prop is experimental </blockquote> One of <code>null</code>, <code>'loop'</code> or <code>'open'</code>. If <code>'loop'</code> or <code>'open'</code>, will skip normalizing the coordinates returned by <code>getPath</code> and instead assume all paths are to be loops or open paths. Disabling normalization improves performance during data update, but makes the layer prone to error in case the data is malformed. It is only recommended when you use this layer with preprocessed static data or validation on the backend. When normalization is disabled, paths must be specified in the format of flat array. Open paths must contain at least 2 vertices and closed paths must contain at least 3 vertices. See <code>getPath</code> below for details. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="data-accessors">Data Accessors<a href="#data-accessors" class="hash-link" aria-label="Direct link to Data Accessors" title="Direct link to Data Accessors"></a></h3> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="getpath"><code>getPath</code> (<a href="/docs/developer-guide/using-layers#accessors">Accessor<PathGeometry></a>, optional) <img decoding="async" loading="lazy" src="https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square%22" alt="transition-enabled" class="img_ev3q"><a href="#getpath" class="hash-link" aria-label="Direct link to getpath" title="Direct link to getpath"></a></h4> <ul> <li>Default: <code>object => object.path</code></li> </ul> Called on each object in the <code>data</code> stream to retrieve its corresponding path. A path can be one of the following formats: <ul> <li>An array of points (<code>[x, y, z]</code>). Compatible with the GeoJSON <a href="https://tools.ietf.org/html/rfc7946#section-3.1.4" target="_blank" rel="noopener noreferrer">LineString</a> specification.</li> <li>A flat array or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray" target="_blank" rel="noopener noreferrer">TypedArray</a> of numbers, in the shape of <code>[x0, y0, z0, x1, y1, z1, ...]</code>. By default, each coordinate is assumed to contain 3 consecutive numbers. If each coordinate contains only two numbers (x, y), set the <code>positionFormat</code> prop of the layer to <code>XY</code>:</li> </ul> <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">new PathLayer<{vertices: Float32Array}>({ getPath: d => d.vertices, // [x0, y0, x1, y1, x2, y2, ...] positionFormat: 'XY' }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="getcolor"><code>getColor</code> (<a href="/docs/developer-guide/using-layers#accessors">Accessor<Color></a>, optional) <img decoding="async" loading="lazy" src="https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square%22" alt="transition-enabled" class="img_ev3q"><a href="#getcolor" class="hash-link" aria-label="Direct link to getcolor" title="Direct link to getcolor"></a></h4> <ul> <li>Default <code>[0, 0, 0, 255]</code></li> </ul> The rgba color of each object, in <code>r, g, b, [a]</code>. Each component is in the 0-255 range. <ul> <li>If an array is provided, it is used as the color for all objects.</li> <li>If a function is provided, it is called on each object to retrieve its color.</li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="getwidth"><code>getWidth</code> (<a href="/docs/developer-guide/using-layers#accessors">Accessor<number></a>, optional) <img decoding="async" loading="lazy" src="https://img.shields.io/badge/transition-enabled-green.svg?style=flat-square%22" alt="transition-enabled" class="img_ev3q"><a href="#getwidth" class="hash-link" aria-label="Direct link to getwidth" title="Direct link to getwidth"></a></h4> <ul> <li>Default: <code>1</code></li> </ul> The width of each path, in units specified by <code>widthUnits</code> (default meters). <ul> <li>If a number is provided, it is used as the width for all paths.</li> <li>If a function is provided, it is called on each path to retrieve its width.</li> </ul> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="use-binary-attributes">Use binary attributes<a href="#use-binary-attributes" class="hash-link" aria-label="Direct link to Use binary attributes" title="Direct link to Use binary attributes"></a></h2> This section is about the special requirements when <a href="/docs/developer-guide/performance#supply-attributes-directly">supplying attributes directly</a> to a <code>PathLayer</code>. Because each path has a different number of vertices, when <code>data.attributes.getPath</code> is supplied, the layer also requires an array <code>data.startIndices</code> that describes the vertex index at the start of each path. For example, if there are 3 paths of 2, 3, and 4 vertices each, <code>startIndices</code> should be <code>[0, 2, 5, 9]</code>. Additionally, all other attributes (<code>getColor</code>, <code>getWidth</code>, etc.), if supplied, must contain the same layout (number of vertices) as the <code>getPath</code> buffer. To truly realize the performance gain from using binary data, the app likely wants to skip all data processing in this layer. Specify the <code>_pathType</code> prop to skip normalization. Example use case: <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockTitle_Ktv7">Use plain JSON array</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">const PATH_DATA = [ { path: [[-122.4, 37.7], [-122.5, 37.8], [-122.6, 37.85]], name: 'Richmond - Millbrae', color: [255, 0, 0] }, // ... ]; new PathLayer({ data: PATH_DATA, getPath: d => d.path, getColor: d => d.color }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> The equivalent binary attributes would be: <div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#403f53;--prism-background-color:#FBFBFB"><div class="codeBlockTitle_Ktv7">Use binary attributes</div><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#403f53;background-color:#FBFBFB"><code class="codeBlockLines_e6Vv">// Flatten PATH_DATA into several binary buffers. This is typically done on the server or in a worker // [-122.4, 37.7, -122.5, 37.8, -122.6, 37.85, ...] const positions = new Float64Array(PATH_DATA.map(d => d.path).flat(2)); // The color attribute must supply one color for each vertex // [255, 0, 0, 255, 0, 0, 255, 0, 0, ...] const colors = new Uint8Array(PATH_DATA.map(d => d.path.map(_ => d.color)).flat(2)); // The "layout" that tells PathLayer where each path starts const startIndices = new Uint16Array(PATH_DATA.reduce((acc, d) => { const lastIndex = acc[acc.length - 1]; acc.push(lastIndex + d.path.length); return acc; }, [0])); new PathLayer({ data: { length: PATH_DATA.length, startIndices: startIndices, // this is required to render the paths correctly! attributes: { getPath: {value: positions, size: 2}, getColor: {value: colors, size: 3} } }, _pathType: 'open' // this instructs the layer to skip normalization and use the binary as-is }) </code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></button></div></div></div> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="source">Source<a href="#source" class="hash-link" aria-label="Direct link to Source" title="Direct link to Source"></a></h2> <a href="https://github.com/visgl/deck.gl/tree/9.1-release/modules/layers/src/path-layer" target="_blank" rel="noopener noreferrer">modules/layers/src/path-layer</a></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https://github.com/visgl/deck.gl/tree/master/website/../docs/api-reference/layers/path-layer.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/api-reference/geo-layers/mvt-layer"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">MVTLayer</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/api-reference/layers/point-cloud-layer"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">PointCloudLayer</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#installation" class="table-of-contents__link toc-highlight">Installation</a></li><li><a href="#properties" class="table-of-contents__link toc-highlight">Properties</a><ul><li><a href="#render-options" class="table-of-contents__link toc-highlight">Render Options</a></li><li><a href="#data-accessors" class="table-of-contents__link toc-highlight">Data Accessors</a></li></ul></li><li><a href="#use-binary-attributes" class="table-of-contents__link toc-highlight">Use binary attributes</a></li><li><a href="#source" class="table-of-contents__link toc-highlight">Source</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/api-reference/core/deck">API Reference</a></li><li class="footer__item"><a href="https://github.com/visgl/deck.gl/tree/master/examples/get-started" target="_blank" rel="noopener noreferrer" class="footer__link-item">Starter templates<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/playground">Playground</a></li><li class="footer__item"><a href="https://codepen.io/vis-gl/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Codepen demos<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Other vis.gl Libraries</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://visgl.github.io/deck.gl-community/" target="_blank" rel="noopener noreferrer" class="footer__link-item">deck.gl-community<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://luma.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">luma.gl<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://loaders.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">loaders.gl<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://visgl.github.io/react-map-gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">react-map-gl<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://nebula.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">nebula.gl<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://join.slack.com/t/deckgl/shared_invite/zt-7oeoqie8-NQqzSp5SLTFMDeNSPxi7eg" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack workspace<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://medium.com/vis-gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">vis.gl blog on Medium<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://github.com/visgl/deck.gl" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 OpenJS Foundation</div></div></div></footer></div> </body> </html>