{"id":1816982,"date":"2023-01-24T06:30:29","date_gmt":"2023-01-24T14:30:29","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1816982"},"modified":"2024-04-12T03:15:24","modified_gmt":"2024-04-12T10:15:24","slug":"five-tips-for-developing-your-native-applications-using-web-maps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/maps-sdk\/developers\/five-tips-for-developing-your-native-applications-using-web-maps","title":{"rendered":"Five tips for developing native applications using web maps"},"author":10242,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[39801,768202,24531,31141,23631],"industry":[],"product":[761642,765412,36551,36561,36891],"class_list":["post-1816982","blog","type-blog","status-publish","format-standard","hentry","category-developers","tag-arcgis-developer-community","tag-arcgis-maps-sdks-for-native-apps","tag-ios","tag-web-mapping-application","tag-web-maps","product-platform","product-maps-sdk","product-arcgis-online","product-arcgis-pro","product-api-ios"],"acf":{"authors":[{"ID":10242,"user_firstname":"Rachael","user_lastname":"Ellen","nickname":"Rachael Ellen","user_nicename":"rellen","display_name":"Rachael Ellen","user_email":"rellen@esri.com","user_url":"https:\/\/dev.to\/rachaele\/","user_registered":"2019-11-29 11:58:45","user_description":"Rachael is a senior product engineer in the Developer Outreach team for the ArcGIS Maps SDKs for Native Apps. Following an academic career in geology, she switched careers by learning to code and now enjoys building apps with the Native Maps SDKs. She loves sharing code examples, fun geospatial development workflows and the latest product updates with developers via blogs and talks.","user_avatar":""}],"short_description":"Find out how including web maps in your development workflows using the ArcGIS Maps SDKs for Native Apps can increase your productivity! ","flexible_content":[{"acf_fc_layout":"content","content":"

Every developer has their own favourite tools or methods to maximise their productivity. As a developer on the ArcGIS Maps SDKs for Native Apps<\/a> (Native SDKs) team at Esri, I\u2019m no different! I love using web maps in native applications to help me be more effective and productive.<\/p>\n

In this blog, I\u2019ll share my top 5 developer productivity tips and tricks and demonstrate how partnering web maps with your applications built with the Native SDKs saves time and resources, whilst still allowing you to remain in control of your app. I hope you\u2019ll find this pairing as useful for your developer productivity as I have!<\/p>\n

    \n
  1. Hold the code! Create a web map instead.<\/a><\/li>\n
  2. No time to create? Use an existing web map.<\/a><\/li>\n
  3. Let’s code! Copy useful code snippets.<\/a><\/li>\n
  4. Loading issues? Turn errors to your advantage.<\/a><\/li>\n
  5. Own your app! Customise it with renderers.<\/a><\/li>\n<\/ol>\n

    #1: Hold the code! Create a web map instead.<\/strong><\/h2>\n

    As developers, we love to problem solve and learn, and the temptation can be to do absolutely everything from scratch with code. But for rinse and repeat workflows, setting up boiler plate code to create a map from scratch for a native application can be a big time sink… and not the most satisfying of tasks when done repeatedly. Instead of losing time setting up a map from scratch in code, I start with the no code approach and build a web map<\/a> instead.<\/p>\n

    Web maps are JSON objects<\/a> containing configuration settings for a map, including map extent (see example below), basemap, layers and layer styles. They can be created via the Map Viewer (or Scene Viewer for 3D data) in ArcGIS Online, or in ArcGIS Pro, and displayed in apps built using the ArcGIS Maps SDKs. Apps will automatically load the web map\u2019s saved configuration settings.<\/p>\n

    \n
    {\r\n  \"xmin\"<\/span>: 13871520.850500003<\/span>,\r\n  \"ymin\"<\/span>: 3910293.086000003<\/span>,\r\n  \"xmax\"<\/span>: 14574034.873400003<\/span>,\r\n  \"ymax\"<\/span>: 4686306.161399998<\/span>,\r\n  \"spatialReference\"<\/span>: {\r\n    \"wkid\"<\/span>: 102100<\/span>,\r\n    \"latestWkid\"<\/span>: 3857<\/span>\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n
    The easiest way to get started with creating web maps is to sign up for a free developer account<\/a> and start building web maps with the Map Viewer<\/a>.\u00a0 You can also create web maps using ArcGIS Pro<\/a>.<\/p>\n"},{"acf_fc_layout":"blockquote","content":"
    Instead of losing time setting up a map from scratch in code, I start with the no code approach and build a web map instead.<\/p>\n"},{"acf_fc_layout":"content","content":"
    #2: No time to create? Use an existing web map.<\/strong><\/h2>\n
    Creating web maps from scratch might not be up everyone\u2019s street. \u00a0If I haven\u2019t got the time to create a map from scratch, I will browse the ArcGIS Living Atlas of the World<\/a> for inspiration and web maps to consider including in my development work.<\/p>\n
    I also browse ArcGIS Online<\/a> layers for publicly available web maps and associated data. These web maps are built by other users or organisations who have chosen to make the access public for everyone to view and depending on license\/limitations, include in their own maps.<\/p>\n
    For example, I built the web map below and hosted it on ArcGIS Online<\/a>, available for anyone to view or use in their own maps and apps. I customised this web map for desktop, displaying detailed labels (when zoomed in) and symbology based on mountain height attributes.<\/p>\n
    This web map shows the locations of mountains within the two national parks of Scotland, which are at least 3000ft (approx. 914m) in height (known as Munros).<\/em><\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/www.arcgis.com\/apps\/instant\/basic\/index.html?appid=b006c8962b4343bd8d9b4658f2ec63d5<\/a>"},{"acf_fc_layout":"content","content":"
    Something to keep in mind with this tip…<\/h3>\n
    A potential pitfall of this approach is if you include a web map in your native app that wasn\u2019t built by yourself or your organisation, the web map may disappear one day.<\/p>\n
    However, you can make a copy of that web map in your own account using a community-driven project from Esri Professional Services, ArcGIS Assistant<\/a> (in Beta phase). It\u2019s a \u201csandbox\u201d type environment and can be used to copy maps and apps, work with web map items JSON and more.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1817092,"id":1817092,"title":"ArcGISAssistant","filename":"ArcGISAssistant-scaled-e1673978475846.png","filesize":706572,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673978475846.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/maps-sdk\/developers\/five-tips-for-developing-your-native-applications-using-web-maps\/arcgisassistant","alt":"ArcGIS Assistant Guide home page screenshot","author":"10242","description":"","caption":"ArcGIS Assistant tool","name":"arcgisassistant","status":"inherit","uploaded_to":1816982,"date":"2023-01-16 20:04:27","modified":"2023-01-16 20:05:14","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":1110,"height":300,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673978475846-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673978475846-464x125.png","medium-width":464,"medium-height":125,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673978475846-768x208.png","medium_large-width":768,"medium_large-height":208,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673955245230-1920x1052.png","large-width":1920,"large-height":1052,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673955245230-1536x842.png","1536x1536-width":1536,"1536x1536-height":842,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-2048x1122.png","2048x2048-width":2048,"2048x2048-height":1122,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673978475846-826x223.png","card_image-width":826,"card_image-height":223,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/ArcGISAssistant-scaled-e1673955245230-1920x1052.png","wide_image-width":1920,"wide_image-height":1052}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/guide.assistant.esri-ps.com\/"},{"acf_fc_layout":"content","content":"
    #3: Let’s code! Copy useful code snippets.<\/strong><\/h2>\n
    Back to comfort zone now: coding! One of my favourite productivity workflows when building an app with the Native SDKs is to check the ArcGIS Developers<\/a> website for sample code, code snippets by topic, tutorials and API references.<\/p>\n
    My specific trick here is browsing the tutorials to find starter app code specific to my project, or including that code within an existing project. The tutorials walk step by step through the code implementation, or there is a handy download solution if you want to jump straight into coding in your IDE.\u00a0 For example, for writing the iOS native application for this blog, I used the Display a Web Map tutorial <\/a>\u00a0to get started.<\/p>\n
    Using the new ArcGIS Maps SDK for Swift as an example, check out the sample code<\/a> and star and\/or clone the Swift samples GitHub repo<\/a> to keep up to date with the latest features. You can also download the iOS sample viewer<\/a> to get an instant insight into what’s possible when building with ArcGIS developer technologies.<\/p>\n
    The Native SDKs (for Java, Qt, .NET, Kotlin and Swift) mostly share a common codebase, so any functionality you see sample code for in one SDK is likely to exist in another.<\/em><\/p>\n
     <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1817172,"id":1817172,"title":"iOSSampleCode","filename":"iOSSampleCode-e1673966775328.png","filesize":1246074,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-e1673966775328.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/maps-sdk\/developers\/five-tips-for-developing-your-native-applications-using-web-maps\/iossamplecode","alt":"Sample code for displaying a map, written in Swift","author":"10242","description":"","caption":"An example of sample code for displaying a map, from the new Swift Maps SDK","name":"iossamplecode","status":"inherit","uploaded_to":1816982,"date":"2023-01-17 11:26:38","modified":"2023-01-17 11:28:02","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":1000,"height":737,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-e1673966775328-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-e1673966775328-354x261.png","medium-width":354,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-e1673966775328-768x566.png","medium_large-width":768,"medium_large-height":566,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-e1673966775328.png","large-width":1000,"large-height":737,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-1536x1132.png","1536x1536-width":1536,"1536x1536-height":1132,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-2048x1510.png","2048x2048-width":2048,"2048x2048-height":1510,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-e1673966775328-631x465.png","card_image-width":631,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSSampleCode-1465x1080.png","wide_image-width":1465,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/swift\/sample-code\/display-map\/"},{"acf_fc_layout":"content","content":"
    #4: Loading issues? Turn errors to your advantage.<\/strong><\/h2>\n
    Resources from your web map, such as layers or basemaps, rely on remote services to initialize their state. In the Native SDKs, the loadable design pattern<\/a> loads metadata for these resources asynchronously, whilst also allowing a mechanism to properly handle and recover from network outages or service interruptions. If your web map doesn\u2019t load for whatever reason, your whole application could fail or not work as expected.<\/p>\n
    As a developer you can remain in control if this situation occurs by using the loadable pattern in your app. For example, in the following code snippet for an iOS application, I\u2019ve set up an app with the ArcGIS Runtime SDK for iOS<\/a>\u00a0that displays a web map.\u00a0 I\u2019ve added code (highlighted) that implements the loadable design pattern, where once the map has loaded, it will check for load errors.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/gist.github.com\/Rachael-E\/6be538cd2cc545a3d25d10e78e894e46.pibb<\/a>"},{"acf_fc_layout":"content","content":"
    If there is an error, it will display an alert containing the description of the load error. The load error description contains information as to why there was a problem loading the layer to help you or your user troubleshoot.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1817222,"id":1817222,"title":"iOSLoadingMessages","filename":"iOSLoadingMessages.png","filesize":593645,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/maps-sdk\/developers\/five-tips-for-developing-your-native-applications-using-web-maps\/iosloadingmessages","alt":"iPhone 14 displaying load error messages when using web maps in native applications","author":"10242","description":"","caption":"Examples of common load errors you might encounter when including load error checking in your app","name":"iosloadingmessages","status":"inherit","uploaded_to":1816982,"date":"2023-01-17 13:59:02","modified":"2023-01-19 14:52:49","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":1384,"height":1375,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages-e1673966560651-263x261.png","medium-width":263,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages.png","medium_large-width":768,"medium_large-height":763,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages.png","large-width":1087,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages.png","1536x1536-width":1384,"1536x1536-height":1375,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages.png","2048x2048-width":1384,"2048x2048-height":1375,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages-468x465.png","card_image-width":468,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iOSLoadingMessages-1087x1080.png","wide_image-width":1087,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/ios\/programming-patterns\/loading-resources-asynchronously\/"},{"acf_fc_layout":"content","content":"
    #5: Own your app! Customise it with renderers.<\/strong><\/h2>\n
    My final trick continues the theme of keeping in control of your app when developing native applications using web maps.<\/p>\n
    The symbology used in the web map might originally display ok on a mobile screen. But what happens if the symbology is tweaked later down the line, without you knowing about it, and suddenly the symbols look too cluttered, or it just looks plain wrong on your mobile application?<\/p>\n
    You can guard against this by overriding the web map\u2019s renderer before the layer has loaded: the overridden value will take precedence over the value specified in the layer\u2019s metadata.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"","static":false,"storymap_url":"https:\/\/gist.github.com\/Rachael-E\/ef500ad5b3d455d3780ba3ce2b24a92a.pibb<\/a>"},{"acf_fc_layout":"content","content":"
    Taking the web map of the Scottish Munros I shared earlier, when it displays on an iPhone application, the symbology didn\u2019t look right for mobile, with the labels displayed being too cluttered for a small screen. Using the code above, I set a custom renderer that overrides the web map\u2019s metadata symbology.<\/p>\n
    It uses a custom .png, removes the polygon fill of the national parks layer, and also disables labels to make it more appropriate visually for mobile. As the developer for this application, I can remain in control of the look and feel of the app whilst maintaining the data from the web map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1817362,"id":1817362,"title":"iPhoneRenderer","filename":"iPhoneRenderer.png","filesize":2341680,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/maps-sdk\/developers\/five-tips-for-developing-your-native-applications-using-web-maps\/iphonerenderer","alt":"Labels displayed on map on iPhone when developing native applications using web maps","author":"10242","description":"","caption":"On the left iPhone, the web map displayed in app before applying custom renderer. \nOn the right, the custom renderer is applied with new symbology and removal of labels for a cleaner mobile UI.\nMountain icon from https:\/\/www.flaticon.com\/.","name":"iphonerenderer","status":"inherit","uploaded_to":1816982,"date":"2023-01-17 15:27:15","modified":"2023-01-20 15:09:13","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":1604,"height":1595,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer.png","medium-width":262,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer.png","medium_large-width":768,"medium_large-height":764,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer.png","large-width":1086,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer-1536x1527.png","1536x1536-width":1536,"1536x1536-height":1527,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer.png","2048x2048-width":1604,"2048x2048-height":1595,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer-468x465.png","card_image-width":468,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/01\/iPhoneRenderer-1086x1080.png","wide_image-width":1086,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/ios\/styles-and-data-visualization\/symbols-renderers-and-styles\/"},{"acf_fc_layout":"content","content":"
    Summary<\/h2>\n
    And so concludes my top productivity tips and tricks for developing native applications using web maps! They are a perfect combination to help you accelerate delivery whilst keeping control of your application. Using a web map in your apps allows you to save development time by using them to easily configure data, layers and styles. But importantly, as developers, we remain in control of what appears in our application by intercepting and customising the behaviour of the web map before it is rendered, and handle any load errors.<\/p>\n
    As a reminder, whilst I use the ArcGIS Runtime SDK for iOS for this blog, you can use any of the ArcGIS Maps SDKs for Native Apps for displaying a web map in your application using the same workflows detailed above. We have just released a beta for the ArcGIS Maps SDK for Swift<\/a>\u00a0if you want to get a head start on developing modern SwiftUI based applications.<\/p>\n
    Bonus content!<\/em><\/h2>\n
    I was inspired to write this blog following the preparation work I did for a technical demonstration at the Esri UK Scottish Conference. Check out the recording of the demo below if you’d like to follow the workflows I’ve outlined above in more detail! Also if you’d like to see the source code used for this blog, check out my GitHub repo.<\/a>\u00a0<\/em><\/p>\n"},{"acf_fc_layout":"youtube","start_time":"0","end_time":"","youtube_video_url":"