{"id":82842,"date":"2018-09-20T16:08:18","date_gmt":"2018-09-20T23:08:18","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&p=82842"},"modified":"2024-05-30T16:21:45","modified_gmt":"2024-05-30T23:21:45","slug":"designing-maps-before-building-apps","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps","title":{"rendered":"Designing Maps before Building Apps"},"author":1432,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[10432,25002,991],"tags":[163382,1281,20392],"arcuser_issues":[63152],"class_list":["post-82842","arcuser","type-arcuser","status-publish","format-standard","hentry","category-arcgis-enterprise","category-developers-corner","category-map-modernization","tag-arcgis-online","tag-visualization","tag-web-gis","arcuser_issues-summer-2017"],"acf":{"short_description":"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as\u2026","pdf":{"host_remotely":false,"file":82892,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as Map Viewer or Scene Viewer. These viewers are online map editors that you can use to design maps and scenes interactively. Once created, maps can be consumed by your custom apps."},{"acf_fc_layout":"image","image":82852,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Designing maps with the viewers can save a significant amount of time during the application development process, especially when you are in the experimental and prototype phases. For example, it\u2019s a lot easier to change, apply, and visualize map settings interactively when you are selecting basemaps, deciding the best symbols and colors to use for layers, and trying to select the best fields and content to display in pop-ups.\r\n\r\nThe viewers also have built-in features, such as smart mapping, that help you make better styling decisions based on the type of data in your map. If you are new to ArcGIS and the viewers, you might want to check out the Data and Design tutorials available at Esri DevLabs (developers.arcgis.com\/labs\/) to learn how to create your own maps.\r\n\r\nThe best part of taking this \u201cdesign a map first\u201d approach is that once you are finished designing your map, you can save it in ArcGIS Online or ArcGIS Enterprise and then use one of the ArcGIS APIs to load the entire map (along with all its settings) in your app with just a few lines of code, saving you a ton of development time. Let\u2019s take a look at how to take advantage of this workflow.\r\n

Step 1\r\nGet a Web Map ID<\/h2>"},{"acf_fc_layout":"image","image":82862,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Web maps and web scenes are stored as items in ArcGIS Online and ArcGIS Enterprise. Each item has its own unique ID. To display a map in your app via code, you need the ID. If you don\u2019t have a map ID, you have three choices: search in the gallery for an existing map on ArcGIS Online (there are literally thousands to choose from); create a new map from scratch with Map Viewer or Scene Viewer and store it in ArcGIS Online; or use the sample map<\/a> and make your own copy of it.\r\n\r\nThe sample web map has been designed with the\u00a0World Vector Tile Topographic\u00a0<\/em>basemap overlaid with the World Hillshade layer with transparency set at 50 percent. The trails layer is on top and has been classified by difficulty. Its pop-ups have been customized to display information as text as well as some field data.\r\n

Step 2\r\nLoad the Web Map<\/h2>\r\nNow that you have a map ID, you can use the ArcGIS API of your choice to load and display the map. With the ID, the ArcGIS API knows how to access the item (PortalItem) on ArcGIS Online. The item is stored as a JSON structure based on the web map and web scene specification.\r\n\r\nIn this example, we\u2019ll just use one of the samples from the ArcGIS API for JavaScript and the map ID from the sample map saved to My Content to load the map. You should notice that the map has all the same settings and behavior as the map in the viewer. Feel free to copy the\u00a0jsBin<\/a>, output, add your own map ID, and give it a try.\r\n

Step 3\r\nUpdate the Web Map (and App)<\/h2>"},{"acf_fc_layout":"image","image":82872,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Now here\u2019s the best part. Since the app is referencing the item ID on ArcGIS Online, if you go back to the viewer and update the map, and then refresh your app, the changes will be automatically applied to your application as well\u2014no code updates are required. This is a very powerful way to \u201cremotely\u201d edit the map in your app without actually changing any code.\r\n\r\nIn this example, we just changed the basemap in Map Viewer to\u00a0World Imagery<\/em>, saved it, and then reran the jsBin. Feel free to try to update and save your map and then refresh your web map.\r\n

Summary<\/h2>\r\nIf you are not already using the viewers to design your maps and scenes for your apps, be sure to give this technique a try. It\u2019s a lot easier to experiment with color and symbol changes in a viewer than it is through code. This is one of the most effective ways to optimize your development workflow with the ArcGIS platform."}],"references":null},"yoast_head":"\nDesigning Maps before Building Apps | Summer 2017 | ArcUser<\/title>\n<meta name=\"description\" content=\"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as\u2026\" \/>\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\/about\/newsroom\/arcuser\/designing-maps-before-building-apps\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing Maps before Building Apps\" \/>\n<meta property=\"og:description\" content=\"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as\u2026\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-30T23:21:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2019\/09\/topography-dark-grey-card.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\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\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps\",\n\t \"name\": \"Designing Maps before Building Apps | Summer 2017 | ArcUser\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t },\n\t \"datePublished\": \"2018-09-20T23:08:18+00:00\",\n\t \"dateModified\": \"2024-05-30T23:21:45+00:00\",\n\t \"description\": \"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as\u2026\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Designing Maps before Building Apps\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t \"name\": \"Esri\",\n\t \"description\": \"Esri Newsroom\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t },\n\t \"query-input\": {\n\t \"@type\": \"PropertyValueSpecification\",\n\t \"valueRequired\": true,\n\t \"valueName\": \"search_term_string\"\n\t }\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/b7332d419608ac1a0291ec30de119efb\",\n\t \"name\": \"April Mann\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t \"url\": \"https:\/\/secure.gravatar.com\/avatar\/28d21cf04453f95cd2d8a0f053e5cd18ccf684320f6a4974f358b8109264e80b?s=96&d=blank&r=g\",\n\t \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/28d21cf04453f95cd2d8a0f053e5cd18ccf684320f6a4974f358b8109264e80b?s=96&d=blank&r=g\",\n\t \"caption\": \"April Mann\"\n\t },\n\t \"url\": \"\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Designing Maps before Building Apps | Summer 2017 | ArcUser","description":"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as\u2026","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\/about\/newsroom\/arcuser\/designing-maps-before-building-apps","og_locale":"en_US","og_type":"article","og_title":"Designing Maps before Building Apps","og_description":"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as\u2026","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-05-30T23:21:45+00:00","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2019\/09\/topography-dark-grey-card.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps","name":"Designing Maps before Building Apps | Summer 2017 | ArcUser","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2018-09-20T23:08:18+00:00","dateModified":"2024-05-30T23:21:45+00:00","description":"As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use ArcGIS platform tools such as\u2026","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/designing-maps-before-building-apps#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Designing Maps before Building Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/b7332d419608ac1a0291ec30de119efb","name":"April Mann","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/28d21cf04453f95cd2d8a0f053e5cd18ccf684320f6a4974f358b8109264e80b?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/28d21cf04453f95cd2d8a0f053e5cd18ccf684320f6a4974f358b8109264e80b?s=96&d=blank&r=g","caption":"April Mann"},"url":""}]}},"sort_order":"0","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/82842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/1432"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/82842\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=82842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=82842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=82842"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=82842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}