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/geojson-layer" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.6.3"> <title data-rh="true">GeoJsonLayer | 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/geojson-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="GeoJsonLayer | deck.gl"><meta data-rh="true" name="description" content="The GeoJsonLayer renders GeoJSON formatted data as polygons, lines and points (circles, icons and/or texts)."><meta data-rh="true" property="og:description" content="The GeoJsonLayer renders GeoJSON formatted data as polygons, lines and points (circles, icons and/or texts)."><link data-rh="true" rel="icon" href="/favicon.ico"><link data-rh="true" rel="canonical" href="https://deck.gl/docs/api-reference/layers/geojson-layer"><link data-rh="true" rel="alternate" href="https://deck.gl/docs/api-reference/layers/geojson-layer" hreflang="en"><link data-rh="true" rel="alternate" href="https://deck.gl/docs/api-reference/layers/geojson-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.e45d0f9f.css"> <script src="/assets/js/runtime~main.93543a24.js" defer="defer"></script> <script src="/assets/js/main.c11483f5.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 menu__link--active" aria-current="page" 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" 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">GeoJsonLayer<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>GeoJsonLayer</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>GeoJsonLayer</code> renders <a href="http://geojson.org" target="_blank" rel="noopener noreferrer">GeoJSON</a> formatted data as polygons, lines and points (circles, icons and/or texts). <code>GeoJsonLayer</code> is a <a href="/docs/api-reference/core/composite-layer">CompositeLayer</a>. See the <a href="#sub-layers">sub layers</a> that it renders.  <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 {GeoJsonLayer} from '@deck.gl/layers'; const layer = new GeoJsonLayer({ id: 'GeoJsonLayer', data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json', stroked: false, filled: true, pointType: 'circle+text', pickable: true, getFillColor: [160, 160, 180, 200], getLineColor: f => { const hex = f.properties.color; // convert to RGB return hex ? hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)) : [0, 0, 0]; }, getLineWidth: 20, getPointRadius: 4, getText: f => f.properties.name, getTextSize: 12 }); new Deck({ initialViewState: { longitude: -122.4, latitude: 37.74, zoom: 11 }, controller: true, getTooltip: ({object}) => object && object.properties.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 {GeoJsonLayer} from '@deck.gl/layers'; import type {Feature, Geometry} from 'geojson'; type PropertiesType = { name: string; color: string; }; const layer = new GeoJsonLayer<PropertiesType>({ id: 'GeoJsonLayer', data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json', stroked: false, filled: true, pointType: 'circle+text', pickable: true, getFillColor: [160, 160, 180, 200], getLineColor: (f: Feature<Geometry, PropertiesType>) => { const hex = f.properties.color; // convert to RGB return hex ? hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)) : [0, 0, 0]; }, getText: (f: Feature<Geometry, PropertiesType>) => f.properties.name, getLineWidth: 20, getPointRadius: 4, getTextSize: 12 }); new Deck({ initialViewState: { longitude: -122.4, latitude: 37.74, zoom: 11 }, controller: true, getTooltip: ({object}: PickingInfo<Feature<Geometry, PropertiesType>>) => object && object.properties.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 {GeoJsonLayer} from '@deck.gl/layers'; import type {Feature, Geometry} from 'geojson'; import type {PickingInfo} from '@deck.gl/core'; type PropertiesType = { name: string; color: string; }; function App() { const layer = new GeoJsonLayer<PropertiesType>({ id: 'GeoJsonLayer', data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json', stroked: false, filled: true, pointType: 'circle+text', pickable: true, getFillColor: [160, 160, 180, 200], getLineColor: (f: Feature<Geometry, PropertiesType>) => { const hex = f.properties.color; // convert to RGB return hex ? hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)) : [0, 0, 0]; }, getText: (f: Feature<Geometry, PropertiesType>) => f.properties.name, getLineWidth: 20, getPointRadius: 4, getTextSize: 12 }); return <DeckGL initialViewState={{ longitude: -122.4, latitude: 37.74, zoom: 11 }} controller getTooltip={({object}: PickingInfo<Feature<Geometry, PropertiesType>>) => object && object.properties.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 {GeoJsonLayer} from '@deck.gl/layers'; import type {GeoJsonLayerProps} from '@deck.gl/layers'; new GeoJsonLayer<FeaturePropertiesT>(...props: GeoJsonLayerProps<FeaturePropertiesT>[]); </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.GeoJsonLayer({}); </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> and <a href="/docs/api-reference/core/composite-layer">CompositeLayer</a> properties. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="data"><code>data</code><a href="#data" class="hash-link" aria-label="Direct link to data" title="Direct link to data"></a></h4> The <code>GeoJSONLayer</code> accepts any of the following formats passed to the <code>data</code> prop: <ul> <li>A valid GeoJSON <code>FeatureCollection</code>, <code>Feature</code>, <code>Geometry</code> or <code>GeometryCollection</code> object.</li> <li>An array of GeoJSON <code>Feature</code> objects.</li> <li>An URL or Promise that resolves to the above formats.</li> <li>loaders.gl's <a href="https://loaders.gl/modules/gis/docs/api-reference/geojson-to-binary" target="_blank" rel="noopener noreferrer">flat GeoJSON format</a>.</li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="pointtype"><code>pointType</code> (string, optional)<a href="#pointtype" class="hash-link" aria-label="Direct link to pointtype" title="Direct link to pointtype"></a></h4> <ul> <li>Default: <code>'circle'</code></li> </ul> How to render <code>Point</code> and <code>MultiPoint</code> features in the data. Supported types are: <ul> <li><code>circle</code></li> <li><code>icon</code></li> <li><code>text</code></li> </ul> To use more than one type, join the names with <code>+</code>, for example <code>pointType: 'icon+text'</code>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="fill-options">Fill Options<a href="#fill-options" class="hash-link" aria-label="Direct link to Fill Options" title="Direct link to Fill Options"></a></h3> The following props control the solid fill of <code>Polygon</code> and <code>MultiPolygon</code> features, and the <code>Point</code> and <code>MultiPoint</code> features if <code>pointType</code> is <code>'circle'</code>. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="filled"><code>filled</code> (boolean, optional)<a href="#filled" class="hash-link" aria-label="Direct link to filled" title="Direct link to filled"></a></h4> <ul> <li>Default: <code>true</code></li> </ul> Whether to draw filled polygons (solid fill) and points (circles). Note that for each polygon, only the area between the outer polygon and any holes will be filled. This prop is effective only when the polygon is NOT extruded. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="getfillcolor"><code>getFillColor</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="#getfillcolor" class="hash-link" aria-label="Direct link to getfillcolor" title="Direct link to getfillcolor"></a></h4> <ul> <li>Default: <code>[0, 0, 0, 255]</code></li> </ul> The solid color of the polygon and points (circles). Format is <code>[r, g, b, [a]]</code>. Each channel is a number between 0-255 and <code>a</code> is 255 if not supplied. <ul> <li>If an array is provided, it is used as the fill color for all features.</li> <li>If a function is provided, it is called on each feature to retrieve its fill color.</li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="stroke-options">Stroke Options<a href="#stroke-options" class="hash-link" aria-label="Direct link to Stroke Options" title="Direct link to Stroke Options"></a></h3> The following props control the <code>LineString</code> and <code>MultiLineString</code> features, the outline for <code>Polygon</code> and <code>MultiPolygon</code> features, and the outline for <code>Point</code> and <code>MultiPoint</code> features if <code>pointType</code> is <code>'circle'</code>. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="stroked"><code>stroked</code> (boolean, optional)<a href="#stroked" class="hash-link" aria-label="Direct link to stroked" title="Direct link to stroked"></a></h4> <ul> <li>Default: <code>true</code></li> </ul> Whether to draw an outline around polygons and points (circles). Note that for complex polygons, both the outer polygon as well the outlines of any holes will be drawn. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="getlinecolor"><code>getLineColor</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="#getlinecolor" class="hash-link" aria-label="Direct link to getlinecolor" title="Direct link to getlinecolor"></a></h4> <ul> <li>Default: <code>[0, 0, 0, 255]</code></li> </ul> The rgba color of a line is in the format of <code>[r, g, b, [a]]</code>. Each channel is a number between 0-255 and <code>a</code> is 255 if not supplied. <ul> <li>If an array is provided, it is used as the line color for all features.</li> <li>If a function is provided, it is called on each feature to retrieve its line color.</li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="getlinewidth"><code>getLineWidth</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="#getlinewidth" class="hash-link" aria-label="Direct link to getlinewidth" title="Direct link to getlinewidth"></a></h4> <ul> <li>Default: <code>1</code></li> </ul> The width of a line, in units specified by <code>lineWidthUnits</code> (default meters). <ul> <li>If a number is provided, it is used as the line width for all features.</li> <li>If a function is provided, it is called on each feature to retrieve its line width.</li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="linewidthunits"><code>lineWidthUnits</code> (string, optional)<a href="#linewidthunits" class="hash-link" aria-label="Direct link to linewidthunits" title="Direct link to linewidthunits"></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="linewidthscale"><code>lineWidthScale</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="#linewidthscale" class="hash-link" aria-label="Direct link to linewidthscale" title="Direct link to linewidthscale"></a></h4> <ul> <li>Default: <code>1</code></li> </ul> A multiplier that is applied to all line widths. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="linewidthminpixels"><code>lineWidthMinPixels</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="#linewidthminpixels" class="hash-link" aria-label="Direct link to linewidthminpixels" title="Direct link to linewidthminpixels"></a></h4> <ul> <li>Default: <code>0</code></li> </ul> The minimum line width in pixels. This prop can be used to prevent the line from getting too thin when zoomed out. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="linewidthmaxpixels"><code>lineWidthMaxPixels</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="#linewidthmaxpixels" class="hash-link" aria-label="Direct link to linewidthmaxpixels" title="Direct link to linewidthmaxpixels"></a></h4> <ul> <li>Default: Number.MAX_SAFE_INTEGER</li> </ul> The maximum line width in pixels. This prop can be used to prevent the line from getting too thick when zoomed in. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="linecaprounded"><code>lineCapRounded</code> (boolean, optional)<a href="#linecaprounded" class="hash-link" aria-label="Direct link to linecaprounded" title="Direct link to linecaprounded"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> Type of line caps. If <code>true</code>, draw round caps. Otherwise draw square caps. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="linejointrounded"><code>lineJointRounded</code> (boolean, optional)<a href="#linejointrounded" class="hash-link" aria-label="Direct link to linejointrounded" title="Direct link to linejointrounded"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> Type of line joint. If <code>true</code>, draw round joints. Otherwise draw miter joints. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="linemiterlimit"><code>lineMiterLimit</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="#linemiterlimit" class="hash-link" aria-label="Direct link to linemiterlimit" title="Direct link to linemiterlimit"></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>lineJointRounded</code> is <code>false</code>. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="linebillboard"><code>lineBillboard</code> (boolean, optional)<a href="#linebillboard" class="hash-link" aria-label="Direct link to linebillboard" title="Direct link to linebillboard"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> If <code>true</code>, extrude the line in screen space (width always faces the camera). If <code>false</code>, the width always faces up. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="3d-options">3D Options<a href="#3d-options" class="hash-link" aria-label="Direct link to 3D Options" title="Direct link to 3D Options"></a></h3> The following props control the extrusion of <code>Polygon</code> and <code>MultiPolygon</code> features. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="extruded"><code>extruded</code> (boolean, optional)<a href="#extruded" class="hash-link" aria-label="Direct link to extruded" title="Direct link to extruded"></a></h4> Extrude Polygon and MultiPolygon features along the z-axis if set to true. The height of the drawn features is obtained using the <code>getElevation</code> accessor. <ul> <li>Default: <code>false</code></li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="wireframe"><code>wireframe</code> (boolean, optional)<a href="#wireframe" class="hash-link" aria-label="Direct link to wireframe" title="Direct link to wireframe"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> Whether to generate a line wireframe of the hexagon. The outline will have "horizontal" lines closing the top and bottom polygons and a vertical line (a "strut") for each vertex on the polygon. Remarks: <ul> <li>These lines are rendered with <code>GL.LINE</code> and will thus always be 1 pixel wide.</li> <li>Wireframe and solid extrusions are exclusive, you'll need to create two layers with the same data if you want a combined rendering effect.</li> <li>This is only effective if the <code>extruded</code> prop is set to true.</li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="getelevation"><code>getElevation</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="#getelevation" class="hash-link" aria-label="Direct link to getelevation" title="Direct link to getelevation"></a></h4> <ul> <li>Default: <code>1000</code></li> </ul> The elevation of a polygon feature (when <code>extruded</code> is true). If a cartographic projection mode is used, height will be interpreted as meters, otherwise will be in unit coordinates. <ul> <li>If a number is provided, it is used as the elevation for all polygon features.</li> <li>If a function is provided, it is called on each polygon feature to retrieve its elevation.</li> </ul> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="elevationscale"><code>elevationScale</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="#elevationscale" class="hash-link" aria-label="Direct link to elevationscale" title="Direct link to elevationscale"></a></h4> <ul> <li>Default: <code>1</code></li> </ul> Elevation multiplier. The final elevation is calculated by <code>elevationScale * getElevation(d)</code>. <code>elevationScale</code> is a handy property to scale all polygon elevation without updating the data. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="material"><code>material</code> (Material, optional)<a href="#material" class="hash-link" aria-label="Direct link to material" title="Direct link to material"></a></h4> <ul> <li>Default: <code>true</code></li> </ul> This is an object that contains material props for <a href="/docs/api-reference/core/lighting-effect">lighting effect</a> applied on extruded polygons. Check <a href="/docs/developer-guide/using-effects#material-settings">the lighting guide</a> for configurable settings. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="_full3d"><code>_full3d</code> (boolean, optional)<a href="#_full3d" class="hash-link" aria-label="Direct link to _full3d" title="Direct link to _full3d"></a></h4> <ul> <li>Default: <code>false</code></li> </ul> <blockquote> Note: This prop is experimental </blockquote> When true, polygon tesselation will be performed on the plane with the largest area, instead of the xy plane. Remarks: <ul> <li>Only use this if you experience issues rendering features that only change on the z axis.</li> <li>This prop is only effective with <code>XYZ</code> data.</li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="pointtype-options">pointType:circle Options<a href="#pointtype-options" class="hash-link" aria-label="Direct link to pointtype-options" title="Direct link to pointtype-options"></a></h3> The following props are forwarded to a <code>ScatterplotLayer</code> if <code>pointType</code> is <code>'circle'</code>. <table><thead><tr><th>Prop name</th><th>Default value</th><th>ScatterplotLayer equivalent</th></tr></thead><tbody><tr><td><code>getPointRadius</code></td><td><code>1</code></td><td><a href="/docs/api-reference/layers/scatterplot-layer#getradius">getRadius</a></td></tr><tr><td><code>pointRadiusUnits</code></td><td><code>'meters'</code></td><td><a href="/docs/api-reference/layers/scatterplot-layer#radiusunits">radiusUnits</a></td></tr><tr><td><code>pointRadiusScale</code></td><td><code>1</code></td><td><a href="/docs/api-reference/layers/scatterplot-layer#radiusscale">radiusScale</a></td></tr><tr><td><code>pointRadiusMinPixels</code></td><td><code>0</code></td><td><a href="/docs/api-reference/layers/scatterplot-layer#radiusminpixels">radiusMinPixels</a></td></tr><tr><td><code>pointRadiusMaxPixels</code></td><td><code>Number.MAX_SAFE_INTEGER</code></td><td><a href="/docs/api-reference/layers/scatterplot-layer#radiusmaxpixels">radiusMaxPixels</a></td></tr><tr><td><code>pointAntialiasing</code></td><td><code>true</code></td><td><a href="/docs/api-reference/layers/scatterplot-layer#antialiasing">antialiasing</a></td></tr><tr><td><code>pointBillboard</code></td><td><code>false</code></td><td><a href="/docs/api-reference/layers/scatterplot-layer#billboard">billboard</a></td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="pointtype-options-1">pointType:icon Options<a href="#pointtype-options-1" class="hash-link" aria-label="Direct link to pointtype-options-1" title="Direct link to pointtype-options-1"></a></h3> The following props are forwarded to an <code>IconLayer</code> if <code>pointType</code> is <code>'icon'</code>. <table><thead><tr><th>Prop name</th><th>Default value</th><th>IconLayer equivalent</th></tr></thead><tbody><tr><td><code>iconAtlas</code></td><td><code>null</code></td><td><a href="/docs/api-reference/layers/icon-layer#iconatlas">iconAtlas</a></td></tr><tr><td><code>iconMapping</code></td><td><code>{}</code></td><td><a href="/docs/api-reference/layers/icon-layer#iconmapping">iconMapping</a></td></tr><tr><td><code>getIcon</code></td><td><code>f => f.properties.icon</code></td><td><a href="/docs/api-reference/layers/icon-layer#geticon">getIcon</a></td></tr><tr><td><code>getIconSize</code></td><td><code>1</code></td><td><a href="/docs/api-reference/layers/icon-layer#getsize">getSize</a></td></tr><tr><td><code>getIconColor</code></td><td><code>[0, 0, 0, 255]</code></td><td><a href="/docs/api-reference/layers/icon-layer#getcolor">getColor</a></td></tr><tr><td><code>getIconAngle</code></td><td><code>0</code></td><td><a href="/docs/api-reference/layers/icon-layer#getangle">getAngle</a></td></tr><tr><td><code>getIconPixelOffset</code></td><td><code>[0, 0]</code></td><td><a href="/docs/api-reference/layers/icon-layer#getpixeloffset">getPixelOffset</a></td></tr><tr><td><code>iconSizeUnits</code></td><td><code>'pixels'</code></td><td><a href="/docs/api-reference/layers/icon-layer#sizeunits">sizeUnits</a></td></tr><tr><td><code>iconSizeScale</code></td><td><code>1</code></td><td><a href="/docs/api-reference/layers/icon-layer#sizescale">sizeScale</a></td></tr><tr><td><code>iconSizeMinPixels</code></td><td><code>0</code></td><td><a href="/docs/api-reference/layers/icon-layer#sizeminpixels">sizeMinPixels</a></td></tr><tr><td><code>iconSizeMaxPixels</code></td><td><code>Number.MAX_SAFE_INTEGER</code></td><td><a href="/docs/api-reference/layers/icon-layer#sizemaxpixels">sizeMaxPixels</a></td></tr><tr><td><code>iconBillboard</code></td><td><code>true</code></td><td><a href="/docs/api-reference/layers/icon-layer#billboard">billboard</a></td></tr><tr><td><code>iconAlphaCutoff</code></td><td><code>0.05</code></td><td><a href="/docs/api-reference/layers/icon-layer#alphacutoff">alphaCutoff</a></td></tr></tbody></table> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="pointtype-options-2">pointType:text Options<a href="#pointtype-options-2" class="hash-link" aria-label="Direct link to pointtype-options-2" title="Direct link to pointtype-options-2"></a></h3> The following props are forwarded to a <code>TextLayer</code> if <code>pointType</code> is <code>'text'</code>. <table><thead><tr><th>Prop name</th><th>Default value</th><th>TextLayer equivalent</th></tr></thead><tbody><tr><td><code>getText</code></td><td><code>f => f.properties.text</code></td><td><a href="/docs/api-reference/layers/text-layer#gettext">getText</a></td></tr><tr><td><code>getTextColor</code></td><td><code>[0, 0, 0, 255]</code></td><td><a href="/docs/api-reference/layers/text-layer#getcolor">getColor</a></td></tr><tr><td><code>getTextAngle</code></td><td><code>0</code></td><td><a href="/docs/api-reference/layers/text-layer#getangle">getAngle</a></td></tr><tr><td><code>getTextSize</code></td><td><code>32</code></td><td><a href="/docs/api-reference/layers/text-layer#getsize">getSize</a></td></tr><tr><td><code>getTextAnchor</code></td><td><code>'middle'</code></td><td><a href="/docs/api-reference/layers/text-layer#gettextanchor">getTextAnchor</a></td></tr><tr><td><code>getTextAlignmentBaseline</code></td><td><code>'center'</code></td><td><a href="/docs/api-reference/layers/text-layer#getalignmentbaseline">getAlignmentBaseline</a></td></tr><tr><td><code>getTextPixelOffset</code></td><td><code>[0, 0]</code></td><td><a href="/docs/api-reference/layers/text-layer#getpixeloffset">getPixelOffset</a></td></tr><tr><td><code>getTextBackgroundColor</code></td><td><code>[255, 255, 255, 255]</code></td><td><a href="/docs/api-reference/layers/text-layer#getbackgroundcolor">getBackgroundColor</a></td></tr><tr><td><code>getTextBorderColor</code></td><td><code>[0, 0, 0, 255]</code></td><td><a href="/docs/api-reference/layers/text-layer#getbordercolor">getBorderColor</a></td></tr><tr><td><code>getTextBorderWidth</code></td><td><code>0</code></td><td><a href="/docs/api-reference/layers/text-layer#getborderwidth">getBorderWidth</a></td></tr><tr><td><code>textSizeUnits</code></td><td><code>'pixels'</code></td><td><a href="/docs/api-reference/layers/text-layer#sizeunits">sizeUnits</a></td></tr><tr><td><code>textSizeScale</code></td><td><code>1</code></td><td><a href="/docs/api-reference/layers/text-layer#sizescale">sizeScale</a></td></tr><tr><td><code>textSizeMinPixels</code></td><td><code>0</code></td><td><a href="/docs/api-reference/layers/text-layer#sizeminpixels">sizeMinPixels</a></td></tr><tr><td><code>textSizeMaxPixels</code></td><td><code>Number.MAX_SAFE_INTEGER</code></td><td><a href="/docs/api-reference/layers/text-layer#sizemaxpixels">sizeMaxPixels</a></td></tr><tr><td><code>textCharacterSet</code></td><td>ASCII chars 32-128</td><td><a href="/docs/api-reference/layers/text-layer#characterset">characterSet</a></td></tr><tr><td><code>textFontFamily</code></td><td><code>'Monaco, monospace'</code></td><td><a href="/docs/api-reference/layers/text-layer#fontfamily">fontFamily</a></td></tr><tr><td><code>textFontWeight</code></td><td><code>'normal'</code></td><td><a href="/docs/api-reference/layers/text-layer#fontweight">fontWeight</a></td></tr><tr><td><code>textLineHeight</code></td><td><code>1</code></td><td><a href="/docs/api-reference/layers/text-layer#lineheight">lineHeight</a></td></tr><tr><td><code>textMaxWidth</code></td><td><code>-1</code></td><td><a href="/docs/api-reference/layers/text-layer#maxwidth">maxWidth</a></td></tr><tr><td><code>textWordBreak</code></td><td><code>'break-word'</code></td><td><a href="/docs/api-reference/layers/text-layer#wordbreak">wordBreak</a></td></tr><tr><td><code>textBackground</code></td><td><code>false</code></td><td><a href="/docs/api-reference/layers/text-layer#background">background</a></td></tr><tr><td><code>textBackgroundPadding</code></td><td><code>[0, 0]</code></td><td><a href="/docs/api-reference/layers/text-layer#backgroundpadding">backgroundPadding</a></td></tr><tr><td><code>textOutlineColor</code></td><td><code>[0, 0, 0, 255]</code></td><td><a href="/docs/api-reference/layers/text-layer#outlinecolor">outlineColor</a></td></tr><tr><td><code>textOutlineWidth</code></td><td><code>0</code></td><td><a href="/docs/api-reference/layers/text-layer#outlinewidth">outlineWidth</a></td></tr><tr><td><code>textBillboard</code></td><td><code>true</code></td><td><a href="/docs/api-reference/layers/text-layer#billboard">billboard</a></td></tr><tr><td><code>textFontSettings</code></td><td><code>{}</code></td><td><a href="/docs/api-reference/layers/text-layer#fontsettings">fontSettings</a></td></tr></tbody></table> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="sub-layers">Sub Layers<a href="#sub-layers" class="hash-link" aria-label="Direct link to Sub Layers" title="Direct link to Sub Layers"></a></h2> The GeoJsonLayer renders the following sublayers: <ul> <li><code>polygons-fill</code> - a <a href="/docs/api-reference/layers/solid-polygon-layer">SolidPolygonLayer</a> rendering all the <code>Polygon</code> and <code>MultiPolygon</code> features.</li> <li><code>polygons-stroke</code> - a <a href="/docs/api-reference/layers/path-layer">PathLayer</a> rendering the outline of all the <code>Polygon</code> and <code>MultiPolygon</code> features. Only rendered if <code>stroked: true</code> and <code>extruded: false</code>.</li> <li><code>linestrings</code> - a <a href="/docs/api-reference/layers/path-layer">PathLayer</a> rendering all the <code>LineString</code> and <code>MultiLineString</code> features.</li> <li><code>points-circle</code> - a <a href="/docs/api-reference/layers/scatterplot-layer">ScatterplotLayer</a> rendering all the <code>Point</code> and <code>MultiPoint</code> features if <code>pointType</code> is <code>'circle'</code>.</li> <li><code>points-icon</code> - an <a href="/docs/api-reference/layers/icon-layer">IconLayer</a> rendering all the <code>Point</code> and <code>MultiPoint</code> features if <code>pointType</code> is <code>'icon'</code>.</li> <li><code>points-text</code> - a <a href="/docs/api-reference/layers/text-layer">TextLayer</a> rendering all the <code>Point</code> and <code>MultiPoint</code> features if <code>pointType</code> is <code>'text'</code>.</li> </ul> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="using-binary-data">Using binary data<a href="#using-binary-data" class="hash-link" aria-label="Direct link to Using binary data" title="Direct link to Using binary data"></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>GeoJsonLayer</code>. The most common way to supply binary data is to use the <a href="https://loaders.gl/modules/gis/docs/api-reference/geojson-to-binary" target="_blank" rel="noopener noreferrer">flat GeoJSON format</a>, this is done by default when using the <a href="/docs/api-reference/geo-layers/mvt-layer">MVTLayer</a>. <h3 class="anchor anchorWithStickyNavbar_LWe7" id="binary-format-details">Binary format details<a href="#binary-format-details" class="hash-link" aria-label="Direct link to Binary format details" title="Direct link to Binary format details"></a></h3> In general this format is not intended to be human readable, and rather than being edited by hand should be generated with <a href="https://loaders.gl/modules/gis/docs/api-reference/geojson-to-binary" target="_blank" rel="noopener noreferrer">geojsonToBinary</a>. The purpose of this section is to help explain how this format works. At the top level the data is grouped by geometry type, into points, lines and polygons: <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 type {BinaryFeatureCollection} from '@loaders.gl/schema'; const data: BinaryFeatureCollection = { shape: 'binary-feature-collection', // points, // lines, // polygons }; </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> When the <code>GeoJsonLayer</code> detects this data structure it assumes it is dealing with binary data, rather than standard GeoJSON. Within each geometry type the data is laid out in a format that corresponds to the buffers that will be sent to the GPU. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="point-geometries">Point geometries<a href="#point-geometries" class="hash-link" aria-label="Direct link to Point geometries" title="Direct link to Point geometries"></a></h4> For GeoJSON features of type <code>Point</code> or <code>MultiPoint</code>, the positions are encoded as a flat interleaved array with associated properties grouped by point: <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 type {BinaryPointFeature} from '@loaders.gl/schema'; data.points = { type: 'Point', positions: {value: Float32Array([x0, y0, x1, y1, x2, y2, ...]), size: 2}, // Use size=2 for xy and size=3 for xyz // featureIds // globalFeatureIds // numericProps // properties } as BinaryPointFeature </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="linestring-geometries">LineString geometries<a href="#linestring-geometries" class="hash-link" aria-label="Direct link to LineString geometries" title="Direct link to LineString geometries"></a></h4> GeoJSON features of type <code>LineString</code> and <code>MultiLineString</code> are represented in a similar manner, with the addition of a <code>pathIndices</code> array, which contains a series of offsets into the <code>positions</code> array, specifying the vertex index where each line begins. <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 type {BinaryLineFeature} from '@loaders.gl/schema'; data.lines = { type: 'LineString', positions: {value: Float32Array([x0, y0, x1, y1, x2, y2, ...]), size: 2}, // Use size=2 for xy and size=3 for xyz pathIndices: {value: Uint16Array([0, 5, 7, ...]), size: 1}, // First line contains vertex 0-4, second line contains vertex 5-6, ... // featureIds // globalFeatureIds // numericProps // properties } as BinaryLineFeature </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="polygon-geometries">Polygon geometries<a href="#polygon-geometries" class="hash-link" aria-label="Direct link to Polygon geometries" title="Direct link to Polygon geometries"></a></h4> Polygons are an extension of the idea introduced with lines, but instead of <code>pathIndices</code> the <code>polygonIndicies</code> array specifies the vertex index where each polygon starts. Because polygons can have holes, the offsets for the outer and inner rings are stored separately in the <code>primitivePolygonIndices</code> array. <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 type {BinaryPolygonFeature} from '@loaders.gl/schema'; data.polygons = { positions: {value: Float32Array([x0, y0, x1, y1, x2, y2, ...]), size: 2}, // Use size=2 for xy and size=3 for xyz polygonIndices: {value: Uint16Array([0, 100, ...]), size: 1}, // First polygon contains vertex 0-99 primitivePolygonIndices: {value: Uint16Array([0, 60, 80, 100, ...]), size: 1}, // First polygon has 2 holes, made of vertex 60-79 and vertex 80-99 // featureIds // globalFeatureIds // numericProps // properties } as BinaryPolygonFeature </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="properties-and-numeric-properties">Properties and numeric properties<a href="#properties-and-numeric-properties" class="hash-link" aria-label="Direct link to Properties and numeric properties" title="Direct link to Properties and numeric properties"></a></h4> The <code>properties</code> field of each feature is stored in the <code>properties</code> array, for example: <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">data.points = { type: 'Point', // positions // featureIds // globalFeatureIds // numericProps properties: [{name: 'A'}, {name: 'B'}, ...] } as BinaryPointFeature </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> For performance, numeric properties are stored separately in typed arrays: <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">data.points = { type: 'Point', // positions // featureIds // globalFeatureIds numericProps: { population: {value: Float32Array([value0, value1, ...], size: 1} }, // properties } as BinaryPointFeature </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> Both <code>properties</code> and <code>numericProps</code> are specified per-feature. <h4 class="anchor anchorWithStickyNavbar_LWe7" id="feature-ids-and-global-feature-ids">Feature IDs and global feature IDs<a href="#feature-ids-and-global-feature-ids" class="hash-link" aria-label="Direct link to Feature IDs and global feature IDs" title="Direct link to Feature IDs and global feature IDs"></a></h4> Both <code>featureIds</code> and <code>globalFeatureIds</code> are specified per-vertex. Feature ID is used to map each vertex to the corresponding element in the <code>properties</code> array. It increments within the current feature type. Global feature ID refers to the feature index in the original <code>FeatureCollection</code>, and is unique across all types. For example, consider a GeoJSON <code>FeatureCollection</code> contains the following features: <table><thead><tr><th>Global feature ID</th><th>Feature ID</th><th>Feature type</th><th>Vertex count</th></tr></thead><tbody><tr><td>0</td><td>0</td><td>Point</td><td>1</td></tr><tr><td>1</td><td>0</td><td>LineString</td><td>10</td></tr><tr><td>2</td><td>0</td><td>Polygon</td><td>5</td></tr><tr><td>3</td><td>1</td><td>MultiPoint</td><td>3</td></tr><tr><td>4</td><td>2</td><td>Point</td><td>1</td></tr><tr><td>5</td><td>1</td><td>Polygon</td><td>5</td></tr></tbody></table> <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">data.points = { type: 'Point', // positions featureIds: {value: new Uint16Array([0, 1, 1, 1, 2]), size: 1}, // this vertex belongs to the Nth point-type feature globalFeatureIds: {value: new Uint16Array([0, 3, 3, 3, 4]), size: 1}, // this vertex belongs to the Nth feature // numericProps // properties } as BinaryPointFeature </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="example-comparison">Example comparison<a href="#example-comparison" class="hash-link" aria-label="Direct link to Example comparison" title="Direct link to Example comparison"></a></h4> <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 type {FeatureCollection} from 'geojson'; import type {BinaryPointFeature} from '@loaders.gl/schema'; const geojson: FeatureCollection = { type: 'FeatureCollection', features: [ { id: 123, type: 'Feature', properties: {name: 'London', population: 10000000}, geometry: {coordinates: [1.23, 4.56], type: 'Point'} } ] }; const binary: BinaryPointFeature = { shape: 'binary-feature-collection', points: { positions: {value: Float32Array([1,23, 4.56]), size: 2}, properties: [{name: 'London'}], numericProps: { population: {value: Float32Array([10000000], size: 1} }, featureIds: {value: Uint16Array([0]), size: 1}, globalFeatureIds: {value: Uint16Array([0]), size: 1}, fields: [{id: 123}] } }; </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> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="overriding-attibutes">Overriding attibutes<a href="#overriding-attibutes" class="hash-link" aria-label="Direct link to Overriding attibutes" title="Direct link to Overriding attibutes"></a></h3> In order to pass <a href="/docs/developer-guide/performance#supply-attributes-directly">pass attributes directly</a> directly to the sublayers, an optional <code>attributes</code> member can be added to the <code>points</code>, <code>lines</code> or <code>polygons</code>. For example to pass the <code>getWidth</code> attribute to the <code>PathLayer</code>: <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">{ lines: { // ... attributes: { getWidth: {value: new Float32Array([1, 2, 3, ....]), size: 1} } } } </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="remarks">Remarks<a href="#remarks" class="hash-link" aria-label="Direct link to Remarks" title="Direct link to Remarks"></a></h2> <ul> <li>Geometry transition can be enabled with <code>props.transitions: {geometry: <transition_settings>}</code>.</li> <li>Input data must adhere to the <a href="https://tools.ietf.org/html/rfc7946" target="_blank" rel="noopener noreferrer">GeoJSON specification</a>. Most GIS software support exporting to GeoJSON format. You may validate your data with free tools such as <a href="https://geojson.io/" target="_blank" rel="noopener noreferrer">this</a>.</li> <li>The GeoJsonLayer renders 3D geometries if each feature's <code>coordinates</code> contain 3D points.</li> </ul> <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/geojson-layer" target="_blank" rel="noopener noreferrer">modules/layers/src/geojson-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/geojson-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/geohash-layer"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">GeohashLayer</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/api-reference/geo-layers/great-circle-layer"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">GreatCircleLayer</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="#fill-options" class="table-of-contents__link toc-highlight">Fill Options</a></li><li><a href="#stroke-options" class="table-of-contents__link toc-highlight">Stroke Options</a></li><li><a href="#3d-options" class="table-of-contents__link toc-highlight">3D Options</a></li><li><a href="#pointtype-options" class="table-of-contents__link toc-highlight">pointType Options</a></li><li><a href="#pointtype-options-1" class="table-of-contents__link toc-highlight">pointType Options</a></li><li><a href="#pointtype-options-2" class="table-of-contents__link toc-highlight">pointType Options</a></li></ul></li><li><a href="#sub-layers" class="table-of-contents__link toc-highlight">Sub Layers</a></li><li><a href="#using-binary-data" class="table-of-contents__link toc-highlight">Using binary data</a><ul><li><a href="#binary-format-details" class="table-of-contents__link toc-highlight">Binary format details</a></li><li><a href="#overriding-attibutes" class="table-of-contents__link toc-highlight">Overriding attibutes</a></li></ul></li><li><a href="#remarks" class="table-of-contents__link toc-highlight">Remarks</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>