{"id":804931,"date":"2020-04-09T11:28:21","date_gmt":"2020-04-09T18:28:21","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=804931"},"modified":"2020-10-26T14:22:37","modified_gmt":"2020-10-26T21:22:37","slug":"developer-tools-for-covid-19-apps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/mapping\/developer-tools-for-covid-19-apps","title":{"rendered":"Developer Tools for COVID-19 Apps"},"author":6161,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[39801,585551,38851],"industry":[],"product":[36601],"class_list":["post-804931","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis-developer-community","tag-covid-19","tag-developers","product-developers"],"acf":{"short_description":"Software developer tools and resources for building and hosting COVID-19 apps. ","flexible_content":[{"acf_fc_layout":"content","content":"

If you\u2019re developing coronavirus disease 2019 (COVID-19) apps, whether to hack together a novel visualization or to deploy your expertise and aid in the response efforts,\u00a0<\/span>Esri<\/span> offers a suite of no-cost location services and SDKs that you can use in your solutions<\/span>.<\/span>\u00a0<\/span><\/p>\n

This blog introduces a few key services <\/span>through ArcGIS for Developers<\/a>—<\/span>O<\/span>pen<\/span>Street<\/span>Map (OSM)<\/span>\u00a0<\/span>base<\/span>maps<\/span> and styles, authoritative reference data, and data hosting<\/span>–in the context of a simple mapping app<\/a>.<\/span>\u00a0<\/span>With the exception of using these services to generate revenue or\u00a0<\/span>host<\/span> over 200mb of data, they are available at no cost <\/span>(<\/span>more<\/span><\/a>)<\/span>.<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"

Get started<\/strong><\/h3>\n
\n

TL;DR<\/strong> (too long; didn’t read) these are the key links: create an account<\/a> and a starter scaffolding<\/a> tutorial<\/p>\n<\/blockquote>\n

The first step is to\u00a0<\/span>create a free developers account<\/span><\/a>. This account is used\u00a0<\/span>to manage map styles, host data, generate tokens for secure services, and more.\u00a0<\/span>Next, create the basic web app scaffolding by following this <\/span>tutorial<\/span><\/a>.\u00a0<\/span>\u00a0<\/span><\/p>\n

The<\/span> remainder of this blog will show excerpts for a JavaScript web app however the linked tutorials will cover the same concepts for other programming languages and platforms.<\/span>\u00a0<\/span><\/p>\n

Here\u2019s the\u00a0<\/span>output<\/a> (we updated the center to look over the US).<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"

Select a basemap<\/strong><\/h3>\n

TL;DR<\/strong> OSM<\/a> and equal earth<\/a> map galleries, styling<\/a> and add to app<\/a> tutorials<\/p><\/blockquote>\n

Next, let\u2019s update the\u00a0<\/span>basemap<\/span>.\u00a0<\/span>There<\/span>\u00a0are a variety of fast vector\u00a0<\/span>basemaps<\/span>\u00a0built f<\/span>ro<\/span>m OSM data available\u00a0<\/span>here<\/span><\/a>. These maps can optionally be styled to meet your creative aesthetic via this\u00a0<\/span>tutorial<\/span><\/a>. My colleague John Nelson also published\u00a0<\/span>some amazing<\/span>\u00a0equal-earth\u00a0<\/a><\/span>basemaps<\/span>\u2014these better represent the globe when visualization population-based data like COVID-19 cases (<\/span>learn why<\/span><\/a>).<\/span>\u00a0<\/span><\/p>\n

Once you\u00a0<\/span>choose<\/span>\u00a0a<\/span>\u00a0<\/span>basemap<\/span>, click on the item, grab the item ID from the URL, and follow this\u00a0<\/span>tutorial<\/span><\/a>\u00a0to add it to your app<\/span>. In JavaScript, the core update to the scaffolding is:<\/span>\u00a0<\/span><\/p>\n

\r\n\/\/ OSM gray vector basemap pulled from URL:<\/span>\r\n\/\/ https:\/\/www.arcgis.com\/home\/item.html?id=1932e7d4432d45dabc0d4d13109c1f09<\/span>\r\nvar<\/span> basemap = new<\/span> Basemap({\r\n  baseLayers: [\r\n    new<\/span> VectorTileLayer({\r\n      portalItem: {\r\n        id: \"1932e7d4432d45dabc0d4d13109c1f09\"<\/span>\r\n      }\r\n    })\r\n  ]\r\n});\r\n\r\nvar<\/span> map = new<\/span> Map<\/span>({\r\n  basemap\r\n});\r\n<\/code><\/pre>\n
Host and add your data<\/strong><\/h3>\n
TL;DR<\/strong> upload data<\/a>, style<\/a> & popups<\/a>, and add to app<\/a> tutorials, service best practices<\/a><\/p><\/blockquote>\n
200mb of free vector data hosting, let\u2019s take advantage!\u00a0<\/span>Here\u2019s the\u00a0<\/span>tutorial<\/span><\/a>\u00a0to upload\u00a0<\/span>CSVs,\u00a0<\/span>GeoJSON<\/span>, and other data sources either through the UI or by using Python.\u00a0<\/span>Once uploaded, ArcGIS creates a RESTful service that can be added to your app via this\u00a0<\/span>tutorial<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n
The service supports capabilities like\u00a0<\/span>editing,\u00a0<\/span>dynamic tiling,<\/span> and spatial or statistical queries. These<\/span> services <\/span>can also <\/span>scale to billions of requests a day, so <\/span>check out <\/span>this blog<\/span><\/a>\u00a0for essential management practices. In your app, the layer can also be styled (<\/span>tutorial<\/span><\/a>) and set to display data in a popup when clicked (<\/span>tutorial<\/span><\/a>).<\/span>\u00a0<\/span><\/p>\n
For demo purposes, let\u2019s assume I owned and uploaded this\u00a0<\/span>Unacast<\/span>\u00a0social distancing\u00a0<\/span>dataset<\/span><\/a>, the core update is:<\/span>\u00a0<\/span><\/p>\n
\r\n\/\/ Unacast social distancing layer<\/span>\r\n\/\/ pulled from REST API link (bottom right) of item page<\/span>\r\n\/\/ https:\/\/www.arcgis.com\/home\/item.html?id=ab72fb3e9bf24d9594f0b942718bffeb<\/span>\r\nvar<\/span> layer = new<\/span> FeatureLayer({\r\n  url: 'https:\/\/services.arcgis.com\/DO4gTjwJVIJ7O9Ca\/arcgis\/rest\/services\/Unacast_Latest_Available__Visitation_and_Distance_\/FeatureServer'<\/span>,\r\n  renderer: {\r\n    type: 'unique-value'<\/span>,\r\n    field: 'grade_distance'<\/span>,\r\n    defaultSymbol: {type: 'simple-fill'<\/span>, outline: {color: 'gray'<\/span>, width: '0.1px'<\/span>}},\r\n    legendOptions: {title: 'Grade'<\/span>},\r\n    uniqueValueInfos: [{\r\n      value: 'A'<\/span>,\r\n      symbol: {type: 'simple-fill'<\/span>, color: '#0070ff'<\/span>, outline: {color: 'gray'<\/span>, width: '0.1px'<\/span>}}\r\n    }, {\r\n      value: 'B'<\/span>,\r\n      symbol: {type: 'simple-fill'<\/span>, color: '#bed2ff'<\/span>, outline: {color: 'gray'<\/span>, width: '0.1px'<\/span>}}\r\n    }, {\r\n      value: 'C'<\/span>,\r\n      symbol: {type: 'simple-fill'<\/span>, color: '#e6e600'<\/span>, outline: {color: 'gray'<\/span>, width: '0.1px'<\/span>}}\r\n    }, {\r\n      value: 'D'<\/span>,\r\n      symbol: {type: 'simple-fill'<\/span>, color: '#ffaa00'<\/span>, outline: {color: 'gray'<\/span>, width: '0.1px'<\/span>}}\r\n    }, {\r\n      value: 'F'<\/span>,\r\n      symbol: {type: 'simple-fill'<\/span>, color: '#e60000'<\/span>, outline: {color: 'gray'<\/span>, width: '0.1px'<\/span>}}\r\n    }],\r\n  },\r\n  popupTemplate: {\r\n    title: \"{county_name}\"<\/span>,\r\n    content: \"Unacast's social distancing grade is {grade_distance}\"<\/span>\r\n  }\r\n});\r\n\r\nvar<\/span> map = new<\/span> Map<\/span>({\r\n  basemap,\r\n  layers: [layer]\r\n});\r\n<\/code><\/pre>\n
Note<\/strong>, instead of individually adding and styling layers, you can also use the Map Viewer in ArcGIS Online to author <\/span>webmaps<\/span>. The output\u00a0<\/span>webmap<\/span>\u00a0can then be added with one line of code. Here\u2019s the\u00a0<\/span>webmap<\/span>\u00a0<\/span>tutorial<\/span><\/a>, style layers\u00a0<\/span>tutorial<\/span><\/a>, and add a\u00a0<\/span>webmap<\/span>\u00a0<\/span>tutorial<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
Add authoritative data<\/strong><\/h3>\n
TL;DR<\/strong> data sources<\/a> and the same tutorials from above<\/p><\/blockquote>\n
There\u00a0<\/span>are dozens of authoritative geospatial datasets sourced from the global GIS community and trusted partners<\/span>\u00a0<\/span>made available as part of response efforts. These include<\/span>\u00a0the\u00a0<\/span>Unacast<\/span>\u00a0data from above,<\/span> current COVID-19 cases from Johns Hopkins\u00a0<\/span>University<\/span>, hospital beds from Definitive Healthcare, and more.<\/span>\u00a0You can\u00a0<\/span>explore the datasets here<\/span><\/a>\u00a0and follow the same tutorials from above to add it to your map.<\/span>\u00a0<\/span><\/p>\n
Note<\/strong>, these datasets can add value in many workflows and don\u2019t need to be called directly from a client app. You can also access the REST API directly (<\/span>COVID-19 cases API<\/span><\/a>) or use Python and Pandas to build out a data pipeline (<\/span>guide<\/span><\/a>).<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
Build the experience
\n<\/strong><\/h3>\n
TL;DR<\/strong> search and directions<\/a> tutorials, additional features<\/a><\/p><\/blockquote>\n
The data and layers can be combined with other location services and analytical operations in your app to build an informative, compelling solution. Here are a\u00a0<\/span>variety of tutorials<\/span><\/a> to add search and routing capabilities and insights into creating powerful visualizations<\/a>.<\/span><\/p>\n
For now, let\u2019s just add a search widget for users<\/span> to find locations (tutorial<\/a>) and legend<\/span>, but check out below for additional ideas.<\/span>\u00a0Here\u2019s the core snippet<\/span>:<\/span><\/p>\n
\r\nvar<\/span> searchWidget = new<\/span> Search({\r\n  view\r\n});\r\nview.ui.add(searchWidget, 'top-right'<\/span>);\r\n\r\nvar<\/span> legendWidget = new<\/span> Legend({\r\n  view\r\n});\r\nview.ui.add(legendWidget, 'bottom-right'<\/span>);\r\n<\/code><\/pre>\n
Additional resources<\/strong><\/h3>\n
And,\u00a0<\/span>there\u2019s the<\/span>\u00a0final\u00a0<\/span>output<\/a>!\u00a0<\/span>If you\u2019re eager to dive in and learn more, here are a few\u00a0<\/span>more destinations I\u2019d suggest checking out<\/span>:<\/span>\u00a0<\/span><\/p>\n
Here\u2019s the full\u00a0<\/span><\/span>output<\/span><\/span><\/a>.<\/span><\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"content","content":"
Here’s the<\/span> output<\/a>.<\/span>\u00a0<\/span><\/p>\n
Here’s the output<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"