{"id":1502552,"date":"2022-03-31T10:45:31","date_gmt":"2022-03-31T17:45:31","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1502552"},"modified":"2024-04-12T03:46:07","modified_gmt":"2024-04-12T10:46:07","slug":"jumpstart-your-custom-layer","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/jumpstart-your-custom-layer","title":{"rendered":"Jumpstart your visualization: build on top of an existing custom 2D layer"},"author":7921,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[],"industry":[],"product":[761642,36831],"class_list":["post-1502552","blog","type-blog","status-publish","format-standard","hentry","category-developers","product-platform","product-js-api-arcgis"],"acf":{"short_description":"Learn how to take an existing custom 2D layer and use it as a starting point for your own unique visualization.","flexible_content":[{"acf_fc_layout":"content","content":"

Before we started shipping FlowRenderer<\/a> as part of the ArcGIS API for JavaScript (JS API), we published a blog article<\/a> and an open-source TypeScript demo (repo animated-flow-ts on GitHub)<\/a> that implemented a simplified version of the same visualization as a custom WebGL layer. This effort was well received by our readers, who started experimenting with the code to adapt it to their use cases. Today, most common flow visualization use cases are handled by the official FlowRenderer<\/a>, but the original open-source repository animated-flow-ts<\/a> is still a valuable starting point if you need to satisfy a specific use case. In this article, we explain how to leverage the existing code and custom WebGL layers to create novel visualizations<\/strong>.<\/p>\n

What we will build<\/strong><\/p>\n

The goal of this article is to explain how the jumpstart.ts<\/a> app (live demo<\/b><\/a>) in the open-source repository works. This app packs 3 different custom WebGL layers and enables toggling between them using a LayerList<\/a> widget.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1531982,"id":1531982,"title":"AllVIz","filename":"AllVIz.png","filesize":78937,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/jumpstart-your-custom-layer\/allviz","alt":"","author":"7921","description":"","caption":"","name":"allviz","status":"inherit","uploaded_to":1502552,"date":"2022-03-25 11:08:42","modified":"2022-03-25 11:08:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":953,"height":561,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz.png","medium-width":443,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz.png","medium_large-width":768,"medium_large-height":452,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz.png","large-width":953,"large-height":561,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz.png","1536x1536-width":953,"1536x1536-height":561,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz.png","2048x2048-width":953,"2048x2048-height":561,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz-790x465.png","card_image-width":790,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/AllVIz.png","wide_image-width":953,"wide_image-height":561}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/wind-es.s3.us-west-1.amazonaws.com\/demos\/jumpstart.html"},{"acf_fc_layout":"content","content":"

This article assumes familiarity with WebGL. Having experience with BaseLayerViewGL2D<\/a> can be useful for gaining a deeper understanding of the codebase, but it is not a prerequisite; the code that we are going to write today does not import BaseLayerViewGL2D<\/a> and is completely unaware of the fact that, behind the scenes, it is the entry point for all custom 2D WebGL rendering operations.<\/p>\n"},{"acf_fc_layout":"content","content":"

A refresher on custom layers<\/strong><\/p>\n

This section briefly covers how to create custom layers from scratch; we included it for completeness and for providing context, but it is not required for understanding the rest of the article. Feel free to skip to the next section if your focus today is on the rapid creation of new visualizations<\/b><\/em>.<\/p>\n

At Esri, we believe that you deserve the best tools for your projects. That is why the JS API ships with many predefined layers<\/a>, ready to use and backed by our cloud offering.<\/p>\n

But we also know that you and your team may have unique requirements, calling for a custom integrated solution. For this reason, the 4x JS API has shipped with support for 3D externalRenderers<\/a> since its inception in 2016, and custom 2D layers using BaseLayerView2D<\/a> and BaseLayerViewGL2D<\/a> since versions 4.8 and 4.11 respectively. This article focuses on custom WebGL layers, the ones that rely on BaseLayerViewGL2D<\/a> for 2D MapView<\/a> rendering.<\/p>\n

There is an official SDK sample\/tutorial<\/a> that explains how to create custom WebGL layers. In a nutshell, the following steps are involved.<\/p>\n