"}],"short_description":"Ready to dive into GIS? Use this guide to get started with ArcGIS Maps SDK for JavaScript and build impressive web mapping applications.\r\n","flexible_content":[{"acf_fc_layout":"content","content":"Welcome, future GIS wizards and software engineering superheroes \ud83c\udf1f! If you\u2019re just starting to explore the world of GIS and looking to build custom web mapping applications, you\u2019ve come to the right place! This step-by-step guide will walk you through the process of getting started with ArcGIS Maps SDK for JavaScript<\/a>, preparing you to create stunning maps and leverage its powerful geospatial capabilities in your web applications.<\/p>\n Follow along to learn how to setup your development environment, create an ArcGIS account, obtain an API key<\/a>, and build a basic web mapping application using ArcGIS Maps SDK for JavaScript and Visual Studio Code.<\/p>\n This example uses ArcGIS CDN<\/a> to get started with the JavaScript Maps SDK\u2014a fast and easy way to get up and running without a local setup.<\/span><\/p>\n"},{"acf_fc_layout":"content","content":" To start, you’ll set up your development environment using a code editor. In this tutorial, we will use Visual Studio Code.<\/p>\n Now, let\u2019s explore a fundamental tutorial\u2014How to Display a Map using ArcGIS Maps SDK for JavaScript<\/a>.<\/p>\n To get started you can either create an ArcGIS Location Platform<\/a>\u00a0or\u00a0ArcGIS Online<\/a> account. In this example, we\u2019ll set up an \u00a0ArcGIS Location Platform<\/a> account and take advantage of its free tier to get started. Alternatively, you can also create an ArcGIS Online account and leverage its 21-day free trial.<\/a> If you have an existing ArcGIS Location Platform, ArcGIS Online, or ArcGIS Enterprise account, you can use the JavaScript Maps SDK at no additional cost.<\/p>\n Once you log into to your account, create an API Key by following the steps outlined below.<\/p>\n Your API key will be generated <\/span><\/span>\ud83c\udf89<\/span><\/span> . Click the copy button to quickly save your API key for the next step. Once your ArcGIS account is set up, head over to Visual Studio Code to create your web application.<\/p>\n To display the map, start by clicking on ‘File’<\/strong> and then select ‘Save’<\/strong>. Next, right-click on your file name and choose ‘Open with Five Server’<\/strong>. This should launch your browser and showcase the topographic basemap layer for an area within the Santa Monica Mountains in California. Alternately, you can also click the ‘Go live’<\/strong> button in the lower right corner to run the code.<\/p>\n<\/div>\n Congratulations on successfully displaying a map using ArcGIS Maps SDK for JavaScript<\/strong>! \ud83e\udd73 You can also build the same map using ArcGIS Online, following similar steps.<\/p>\n <\/p>\n"},{"acf_fc_layout":"content","content":" A powerful capability of JavaScript Maps SDK is enabling you to convert raw data<\/span>\u00a0into<\/span> informative maps. If you would like to import data from a CSV file and display it on the same map, follow along.\u00a0<\/span><\/p>\n If you liked this tutorial, consider exploring more tutorials<\/a>, and sample code<\/a> to deepen your understanding of JavaScript Maps SDK. Additionally, you can consider these courses on offer by Esri Academy<\/a> to master the SDK.<\/p>\n"},{"acf_fc_layout":"content","content":" Additional Resources Esri Developer Glossary\u00a0<\/a><\/p>\n To learn more about ArcGIS Maps SDKs for JavaScript, visit our Webpage<\/a><\/strong>. For detailed documentation, head over to the\u00a0Esri Developer Site<\/a>.<\/strong>\u00a0Also, stay in the loop with the latest in Developer technology by subscribing to the\u00a0Esri Developer Newsletter.<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n <\/p>\n"}],"related_articles":[{"ID":2808342,"post_author":"4271","post_date":"2025-06-24 07:30:01","post_date_gmt":"2025-06-24 14:30:01","post_content":"","post_title":"Version 4.33 of JavaScript Maps SDK released!","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-maps-sdk-for-javascript-4-33","to_ping":"","pinged":"","post_modified":"2025-08-13 11:16:17","post_modified_gmt":"2025-08-13 18:16:17","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2808342","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":2114102,"post_author":"320932","post_date":"2023-11-13 09:00:25","post_date_gmt":"2023-11-13 17:00:25","post_content":"","post_title":"Build GIS Web Apps with JavaScript Maps SDK components","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"build-gis-web-apps-with-javascript-maps-sdk-components","to_ping":"","pinged":"","post_modified":"2026-02-26 14:39:54","post_modified_gmt":"2026-02-26 22:39:54","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2114102","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"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&p=2679322","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":1878872,"post_author":"309572","post_date":"2023-04-10 07:39:50","post_date_gmt":"2023-04-10 14:39:50","post_content":"","post_title":"Build accessible web apps with ArcGIS Maps SDK for JavaScript and Calcite Design System","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"build-accessible-web-apps-with-arcgis-maps-sdk-for-javascript-and-calcite-design-system","to_ping":"","pinged":"","post_modified":"2024-10-24 15:07:33","post_modified_gmt":"2024-10-24 22:07:33","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1878872","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":2613782,"post_author":"6561","post_date":"2024-12-19 12:15:12","post_date_gmt":"2024-12-19 20:15:12","post_content":"","post_title":"Good, better, best\u2014Simplify your web app development with Map Viewer","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"good-better-best-simplify-your-web-app-development-with-map-viewer","to_ping":"","pinged":"","post_modified":"2024-12-19 13:43:41","post_modified_gmt":"2024-12-19 21:43:41","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2613782","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":2634792,"post_author":"6561","post_date":"2024-12-20 13:12:52","post_date_gmt":"2024-12-20 21:12:52","post_content":"","post_title":"Web maps\u2014the foundation of ArcGIS web applications","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"web-maps-the-foundation-of-arcgis-web-applications","to_ping":"","pinged":"","post_modified":"2024-12-20 13:19:21","post_modified_gmt":"2024-12-20 21:19:21","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2634792","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"show_article_image":true,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-95.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-2025-06-05T174547.925.png"},"yoast_head":"\nQuick Links<\/strong><\/h3>\n
\n
Setting Up Your Development Environment<\/h2>\n"},{"acf_fc_layout":"content","content":"
Download Visual Studio Code<\/a><\/strong><\/h4>\n
\n
Create a Project Folder<\/strong><\/h4>\n
\n
Creating an ArcGIS Account<\/h2>\n"},{"acf_fc_layout":"content","content":"
Create an ArcGIS Location Platform Account<\/strong><\/h4>\n
\n
\n
\n
Creating An API Key<\/h2>\n"},{"acf_fc_layout":"content","content":"
\n
\n<\/span>
\nFor more information on ArcGIS Location Platform and creating an API key, you can also watch this video<\/a>.\u00a0
<\/span>\u00a0 <\/span><\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2761532,"id":2761532,"title":"GIF_1","filename":"Untitled-3-1.gif","filesize":5127544,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/how-to-get-started-with-arcgis-maps-sdk-for-javascript-display-a-map\/untitled-3-1","alt":"A GIF explaining how to create an API key with an ArcGIS Location Platform Account","author":"354132","description":"","caption":"","name":"untitled-3-1","status":"inherit","uploaded_to":2647392,"date":"2025-04-16 23:06:18","modified":"2025-04-16 23:06:59","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1.gif","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1-1536x864.gif","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1.gif","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1-826x465.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/04\/Untitled-3-1.gif","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Creating Your Web Application<\/h2>\n"},{"acf_fc_layout":"content","content":"
\n
\n
\n
\n
\n
Importing and Displaying Data from Your CSV<\/h2>\n"},{"acf_fc_layout":"content","content":"
\n
\n
\n
\n
\n<\/strong><\/p>\n
\n