{"id":2114102,"date":"2023-11-13T09:00:25","date_gmt":"2023-11-13T17:00:25","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2114102"},"modified":"2026-02-26T14:39:54","modified_gmt":"2026-02-26T22:39:54","slug":"build-gis-web-apps-with-javascript-maps-sdk-components","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components","title":{"rendered":"Build GIS Web Apps with JavaScript Maps SDK components"},"author":320932,"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":[772172,769562,38851],"industry":[],"product":[761642,36831],"class_list":["post-2114102","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-arcgis-developers","tag-arcgis-maps-sdk-for-javascript","tag-developers","product-platform","product-js-api-arcgis"],"acf":{"authors":[{"ID":320932,"user_firstname":"Omar","user_lastname":"Kawach","nickname":"Omar Kawach","user_nicename":"okawach","display_name":"Omar Kawach","user_email":"okawach@esri.com","user_url":"","user_registered":"2022-10-25 16:27:17","user_description":"Omar is a biotechnologist, geographer and computer scientist who works at Esri as a Product Engineer on the ArcGIS Maps SDK for JavaScript components and Arcade expression language. Omar's main focus is to help develop and integrate modern web components like the Arcade editor which you can now find across ArcGIS Online!","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/my_face-213x200.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"Build GIS web applications with ArcGIS Maps SDK for JavaScript components and Calcite Design System","flexible_content":[{"acf_fc_layout":"content","content":"<h2>What is the ArcGIS Maps SDK for JavaScript?<\/h2>\n<p>The\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS Maps SDK for JavaScript<\/a> is a powerful mapping and spatial analysis technology that enables developers to build compelling web <a href=\"What%20is%20GIS%3F%20|%20Geographic%20Information%20System%20Mapping%20Technology%20(esri.com)\">GIS<\/a> experiences. At <a href=\"https:\/\/www.esri.com\/en-us\/home\">Esri<\/a>, we use this foundational SDK to develop geospatial applications. These applications enable users to create, analyze, collaborate on, and share their maps.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>What are web components?<\/h2>\n<p>Introduced by the <a href=\"https:\/\/www.w3.org\/\">W3C<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components\">web components<\/a> are a set of technologies native to the browser that allow the construction of custom, reusable, and framework-agnostic HTML elements. They provide strong encapsulation, custom functionality, and full compatibility with HTML and the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\">DOM<\/a> API. The SDK leverages three primary technologies offered by web components:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components#custom_elements\">Custom Elements<\/a>\u2014Allow developers to define their HTML elements with custom behavior.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components#shadow_dom\">Shadow DOM<\/a> &#8211; Provide encapsulation for the SDK\u2019s JavaScript and CSS within a custom element so it doesn\u2019t affect the rest of the DOM.<\/li>\n<li>And <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components#html_templates\">HTML Templates<\/a> \u2013 Permit the definition of markup chunks that can be used in instances of custom elements, including\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/template\">templates<\/a>.<\/li>\n<\/ul>\n<p>In summary, web components are excellent for simplifying complex HTML, along with its associated CSS and JavaScript. Next, we\u2019ll go over the JavaScript Maps SDK and how web components are available, which is a new feature of the SDK.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>ArcGIS Maps SDK for JavaScript components<\/h2>\n<p>The <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-arcgis-maps-sdk-for-javascript-4-28\/\">October 2023 release of ArcGIS Maps SDK for JavaScript (v4.28)<\/a>\u00a0introduced a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/faq\/#what-does-the-beta-tag-mean\">beta<\/a> version of our standards-based web components. JavaScript Maps SDK components are a component library extending parts of the JavaScript Maps SDK to provide reusable custom HTML elements that can be easily brought into your own GIS web applications. As of <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-arcgis-maps-for-javascript-4-32\/\">v4.32 of the JavaScript Maps SDK<\/a>, four component packages are offered:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/#map-components\">Map components<\/a> include the map, scene, and all JavaScript Maps SDK widgets, which are\u00a0wrapped as web components.<\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/#coding-components\">Coding components<\/a> are intended to support the general act of coding. The <a href=\"https:\/\/developers.arcgis.com\/arcade\/\">Arcade<\/a> editor component is currently the main offering.<\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/references\/embeddable-components\/\">Embeddable components&#8217;<\/a> embedded map component\u00a0allows users to quickly embed a saved\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-WebMap.html\">WebMap<\/a> into a website with default components (i.e. zoom, legend, and bookmarks) pre-configured.<\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/#coding-components\">Charts components<\/a> contain components that can be used to build charts in JavaScript Maps SDK applications. When used alongside maps, they can provide a complete data visualization story of your data.<\/li>\n<\/ul>\n<p>With Map components, you can showcase a web map with one line of HTML:<\/p>\n<p><code>&lt;<span style=\"color: #22863a\">arcgis-map<\/span> <span style=\"color: #005cc5\">item-id<\/span>=<span style=\"color: #032f62\">\"05e015c5f0314db9a487a9b46cb37eca<\/span>&gt;&lt;\/<span style=\"color: #22863a\">arcgis-map<\/span>&gt;<\/code><\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"<a href=\"https:\/\/omarkawach.github.io\/blogs\/one-line.html\">https:\/\/omarkawach.github.io\/blogs\/one-line.html<\/a>"},{"acf_fc_layout":"content","content":"<h2>Why our developers use web components from the SDK<\/h2>\n<p>Web components have a rich history at Esri. By adopting web components as fundamental building blocks in our development process, we have been able to create a wide range of reusable HTML elements that are not tied to any specific application framework (e.g., <a href=\"https:\/\/react.dev\/\">React<\/a>, <a href=\"https:\/\/angular.dev\/\">Angular<\/a>, <a href=\"https:\/\/vuejs.org\/\">Vue<\/a>) or module bundler (e.g., <a href=\"https:\/\/vitejs.dev\/\">Vite<\/a>, <a href=\"https:\/\/webpack.js.org\/\">Webpack<\/a>). We also heavily utilize components from <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/\">Calcite Design System<\/a>. This adoption of web components unifies our developers and ensures consistent user experiences across different ArcGIS products.<\/p>\n<p>In terms of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Programming_paradigm\">programming paradigms<\/a>, JavaScript Maps SDK components offer a declarative-first approach, while the JavaScript Maps SDK has traditionally followed a mostly imperative\/procedural approach. With the components, developers can rely on prebuilt ArcGIS experiences that reduce the need for <a href=\"https:\/\/en.wikipedia.org\/wiki\/Boilerplate_code\">boilerplate code<\/a> and instead focus on using HTML markup to accomplish most\u2014if not all\u2014of the required tasks. This simplifies the process of integrating ArcGIS capabilities into your app. On the other hand, the JavaScript Maps SDK provides extensive control over the application&#8217;s state and flow of execution by allowing developers to write detailed instructions.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>A new way to build JS Maps SDK apps: Use components<\/h2>\n<p>To gain a better understanding of how you might create a basic web map using the imperative approach, check out the example below. JavaScript is used to manipulate the <code>&lt;div id=\"viewDiv\"&gt;&lt;\/div&gt;<\/code> container element, which is responsible for displaying the map and its widgets.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Web map built with the JavaScript Maps SDK core API","description":"","static":false,"storymap_url":"<a href=\"https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/imperative-maps-sdk.html\">https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/imperative-maps-sdk.html<\/a>"},{"acf_fc_layout":"content","content":"<p>To illustrate the difference between the two paradigms, let\u2019s consider the previous example and demonstrate how it may be rewritten using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/#map-components\">@arcgis\/map-components<\/a> package.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Web map built with JavaScript Maps SDK components","description":"","static":false,"storymap_url":"<a href=\"https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/declarative-maps-sdk.html\">https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/declarative-maps-sdk.html<\/a>"},{"acf_fc_layout":"content","content":"<p>As you have seen with map components, JavaScript is not necessary to achieve the same solution, which eliminates the need for the <code>viewDiv<\/code> container element. It also simplifies needing to separately initialize the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-WebMap.html\">WebMap<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html\">MapView<\/a>. It is important to note that while the example was written purely with web components, the underlying API is still available, creating a balance between the imperative and declarative programming paradigms. This flexibility allows you to reap the benefits of both approaches.<\/p>\n"},{"acf_fc_layout":"content","content":"<pre><code>&lt;<span style=\"color: #22863a\">body<\/span>&gt;\r\n  &lt;<span style=\"color: #22863a\">arcgis-map<\/span> <span style=\"color: #005cc5\">item-id<\/span>=<span style=\"color: #032f62\">\"05e015c5f0314db9a487a9b46cb37eca\"<\/span>&gt;\r\n    &lt;<span style=\"color: #22863a\">arcgis-search<\/span> <span style=\"color: #005cc5\">slot<\/span>=<span style=\"color: #032f62\">\"top-right\"<\/span> \/&gt;\r\n    &lt;<span style=\"color: #22863a\">arcgis-legend<\/span> <span style=\"color: #005cc5\">slot<\/span>=<span style=\"color: #032f62\">\"bottom-left\"<\/span> \/&gt;\r\n  &lt;\/<span style=\"color: #22863a\">arcgis-map<\/span>&gt;\r\n  &lt;<span style=\"color: #22863a\">script<\/span>&gt;\r\n    <span style=\"color: #6a737d\">\/\/ Access the underlying API to get the thumbnail url of the map<\/span>\r\n    <span style=\"color: #d73a49\">const<\/span> mapElm = <span style=\"color: #d73a49\">document<\/span>.<span style=\"color: #6f42c1\">querySelector<\/span>(<span style=\"color: #032f62\">\"arcgis-map\"<\/span>);\r\n    mapElm.<span style=\"color: #6f42c1\">addEventListener<\/span>(<span style=\"color: #032f62\">\"arcgisViewReadyChange\"<\/span>, (event) =&gt; {\r\n      <span style=\"color: #d73a49\">const<\/span> { map } = event.target;\r\n      <span style=\"color: #d73a49\">console<\/span>.<span style=\"color: #6f42c1\">log<\/span>(map.thumbnailUrl);\r\n    });\r\n  &lt;\/<span style=\"color: #22863a\">script<\/span>&gt;\r\n&lt;\/<span style=\"color: #22863a\">body<\/span>&gt;<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<h2>Integrate your apps with the Calcite Design System<\/h2>\n<p>You can integrate the <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/\">Calcite Design System<\/a> with JavaScript Maps SDK apps to build comprehensive and engaging GIS experiences. Observe that again with the imperative approach, there is boilerplate code and <code>&lt;div\/&gt;<\/code> HTML elements needed to be created and manipulated with JavaScript.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Web map built with the JavaScript Maps SDK core API and Calcite","description":"","static":false,"storymap_url":"<a href=\"https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/imperative-calcite-maps-sdk.html\">https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/imperative-calcite-maps-sdk.html<\/a>"},{"acf_fc_layout":"storymap","title":"Web map built with JavaScript Maps SDK components and Calcite","description":"","static":false,"storymap_url":"<a href=\"https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/declarative-calcite-maps-sdk.html\">https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/declarative-calcite-maps-sdk.html<\/a>"},{"acf_fc_layout":"content","content":"<h2>Easily associate components with a Map or Scene<\/h2>\n<p>The Map and Scene components are parent containers for building interactive 2D and 3D visualization experiences. Other components from the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/#map-components\">@arcgis\/map-components<\/a> package can be associated with a Map or Scene component to provide additional functionality, such as adding a legend, layer list, search, and more. The legend component can access a map by setting its\u00a0<strong>reference-element<\/strong> (see the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/storybook\/?path=\/docs\/map-components_component-reference-legend--docs\">Properties tab<\/a> for more) to the <strong>id<\/strong> of the <code>&lt;arcgis-map\/&gt;<\/code>. This is useful when components live outside of the <code>&lt;arcgis-map\/&gt;<\/code> component.<\/p>\n"},{"acf_fc_layout":"storymap","title":"Legend associated with a map","description":"","static":false,"storymap_url":"<a href=\"https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/map-and-widgets.html\">https:\/\/omarkawach.github.io\/blogs\/imperative-declarative\/map-and-widgets.html<\/a>"},{"acf_fc_layout":"content","content":"<h2>Get started today!<\/h2>\n<p>Explore component <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/tutorials\/display-a-map-component\/\">tutorials<\/a>, where you can discover components to build web mapping applications with minimal code. Also, stay tuned; additional components will be available in upcoming releases.<\/p>\n<p>For more information, refer to the component <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/components\/\">documentation<\/a>. If you encounter an issue, visit the <a href=\"https:\/\/github.com\/Esri\/jsapi-resources\/blob\/main\/TROUBLESHOOTING.md\">troubleshooting guide<\/a> and to collaborate with others, ask questions, or report issues, visit <a href=\"https:\/\/community.esri.com\/t5\/arcgis-maps-sdk-for-javascript\/ct-p\/arcgis-api-for-javascript\">Esri Community<\/a>.<\/p>\n"}],"related_articles":[{"ID":2679322,"post_author":"4271","post_date":"2025-02-26 10:28:21","post_date_gmt":"2025-02-26 18:28:21","post_content":"","post_title":"JavaScript Maps SDK: A full transition to components","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"javascript-maps-sdk-a-full-transition-to-components","to_ping":"","pinged":"","post_modified":"2026-01-14 14:42:25","post_modified_gmt":"2026-01-14 22:42:25","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2679322","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":2689192,"post_author":"4271","post_date":"2025-02-24 07:10:46","post_date_gmt":"2025-02-24 15:10:46","post_content":"","post_title":"What's new in ArcGIS Maps for JavaScript (4.32)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-maps-for-javascript-4-32","to_ping":"","pinged":"","post_modified":"2025-02-26 12:11:17","post_modified_gmt":"2025-02-26 20:11:17","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2689192","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":2377962,"post_author":"330302","post_date":"2024-06-27 08:30:13","post_date_gmt":"2024-06-27 15:30:13","post_content":"","post_title":"What's New in ArcGIS Maps SDK for JavaScript (4.30)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-maps-sdk-for-javascript-4-30","to_ping":"","pinged":"","post_modified":"2024-11-10 00:20:55","post_modified_gmt":"2024-11-10 08:20:55","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2377962","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":2540202,"post_author":"330302","post_date":"2024-11-07 07:00:03","post_date_gmt":"2024-11-07 15:00:03","post_content":"","post_title":"What's New in ArcGIS Maps SDK for JavaScript (4.31)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-maps-sdk-for-javascript-4-31","to_ping":"","pinged":"","post_modified":"2024-11-25 21:12:09","post_modified_gmt":"2024-11-26 05:12:09","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2540202","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","filter":"raw"},{"ID":2251042,"post_author":"330302","post_date":"2024-02-26 14:00:24","post_date_gmt":"2024-02-26 22:00:24","post_content":"","post_title":"What's New in ArcGIS Maps SDK for JavaScript (4.29)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-maps-sdk-for-javascript-4-29","to_ping":"","pinged":"","post_modified":"2024-04-12 01:06:48","post_modified_gmt":"2024-04-12 08:06:48","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2251042","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":2099732,"post_author":"330302","post_date":"2023-10-23 08:00:44","post_date_gmt":"2023-10-23 15:00:44","post_content":"","post_title":"What's New in ArcGIS Maps SDK for JavaScript (4.28)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-maps-sdk-for-javascript-4-28","to_ping":"","pinged":"","post_modified":"2024-04-12 01:11:45","post_modified_gmt":"2024-04-12 08:11:45","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2099732","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/11\/carbon-8-1.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/banner3.png","show_article_image":false},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build GIS Web Apps with JavaScript Maps SDK components<\/title>\n<meta name=\"description\" content=\"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build GIS Web Apps with JavaScript Maps SDK components\" \/>\n<meta property=\"og:description\" content=\"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T22:39:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/11\/carbon-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1360\" \/>\n\t<meta property=\"og:image:height\" content=\"1014\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/11\/carbon-8-1.png\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components\"},\"author\":{\"name\":\"Omar Kawach\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/2b05bb7fc0d3ee2ed0ed282771f27106\"},\"headline\":\"Build GIS Web Apps with JavaScript Maps SDK components\",\"datePublished\":\"2023-11-13T17:00:25+00:00\",\"dateModified\":\"2026-02-26T22:39:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components\"},\"wordCount\":9,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS Developers\",\"ArcGIS Maps SDK for JavaScript\",\"Developers\"],\"articleSection\":[\"Developers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components\",\"name\":\"Build GIS Web Apps with JavaScript Maps SDK components\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2023-11-13T17:00:25+00:00\",\"dateModified\":\"2026-02-26T22:39:54+00:00\",\"description\":\"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build GIS Web Apps with JavaScript Maps SDK components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/2b05bb7fc0d3ee2ed0ed282771f27106\",\"name\":\"Omar Kawach\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/my_face-213x200.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/my_face-213x200.jpg\",\"caption\":\"Omar Kawach\"},\"description\":\"Omar is a biotechnologist, geographer and computer scientist who works at Esri as a Product Engineer on the ArcGIS Maps SDK for JavaScript components and Arcade expression language. Omar's main focus is to help develop and integrate modern web components like the Arcade editor which you can now find across ArcGIS Online!\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/omarkawach\/\"],\"jobTitle\":\"Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/okawach\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build GIS Web Apps with JavaScript Maps SDK components","description":"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components","og_locale":"en_US","og_type":"article","og_title":"Build GIS Web Apps with JavaScript Maps SDK components","og_description":"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2026-02-26T22:39:54+00:00","og_image":[{"width":1360,"height":1014,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/11\/carbon-1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_description":"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System","twitter_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/11\/carbon-8-1.png","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components"},"author":{"name":"Omar Kawach","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/2b05bb7fc0d3ee2ed0ed282771f27106"},"headline":"Build GIS Web Apps with JavaScript Maps SDK components","datePublished":"2023-11-13T17:00:25+00:00","dateModified":"2026-02-26T22:39:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components"},"wordCount":9,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS Developers","ArcGIS Maps SDK for JavaScript","Developers"],"articleSection":["Developers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components","name":"Build GIS Web Apps with JavaScript Maps SDK components","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2023-11-13T17:00:25+00:00","dateModified":"2026-02-26T22:39:54+00:00","description":"Build compelling GIS web applications with the ArcGIS Maps SDK for JavaScript components and Calcite Design System","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/build-gis-web-apps-with-javascript-maps-sdk-components#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Build GIS Web Apps with JavaScript Maps SDK components"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/2b05bb7fc0d3ee2ed0ed282771f27106","name":"Omar Kawach","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/my_face-213x200.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/my_face-213x200.jpg","caption":"Omar Kawach"},"description":"Omar is a biotechnologist, geographer and computer scientist who works at Esri as a Product Engineer on the ArcGIS Maps SDK for JavaScript components and Arcade expression language. Omar's main focus is to help develop and integrate modern web components like the Arcade editor which you can now find across ArcGIS Online!","sameAs":["https:\/\/www.linkedin.com\/in\/omarkawach\/"],"jobTitle":"Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/okawach"}]}},"text_date":"November 13, 2023","author_name":"Omar Kawach","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/okawach","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/banner3.png","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":772172,"name":"ArcGIS Developers","slug":"arcgis-developers","term_group":0,"term_taxonomy_id":772172,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"},{"term_id":769562,"name":"ArcGIS Maps SDK for JavaScript","slug":"arcgis-maps-sdk-for-javascript","term_group":0,"term_taxonomy_id":769562,"taxonomy":"post_tag","description":"","parent":0,"count":28,"filter":"raw"},{"term_id":38851,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":38851,"taxonomy":"post_tag","description":"","parent":0,"count":78,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":423,"filter":"raw"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":214,"filter":"raw"},{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2114102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/320932"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2114102"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2114102\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2114102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2114102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2114102"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2114102"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2114102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}