App of the Month: COSMOS

Happy New Year everyone! As 2020 begins, many of us are setting New Year’s resolutions. One of mine is to build customized apps with ArcGIS API for JavaScript, which allows you to build compelling location intelligence apps. An excellent example is our app of the month for January, the City of Surrey Mapping Online System (COSMOS).

City of Surrey is British Columbia’s second-largest city, next to Vancouver, and has more than 520,000 residents. It supports its Smart City Strategy by using geographic information system (GIS) technology to improve the delivery of municipal services.

The City needed a way to display and give access to large sets of cadastral data for different types of audiences. Since most of these datasets were spatial, the City leveraged their existing spatial data infrastructure and ArcGIS API for JavaScript to build COSMOS, a customized application that allows the public to explore over 200 layers of information, annotate their own maps and search for underground infrastructure near their property.

When you first open the application, you are prompted with a splash screen that asks you to select a map type. Once a map type is picked, the layers for that particular map type would load, and the user can zoom in to their area of interest to see the map content on the maps. COSMOS makes effective use of the splash screen. Aside from empowering the user with the ability to choose the material they want to see, the splash screen also increases the app’s performance by loading only the layers that are relevant. This is a smart approach for efficiently loading big datasets. Aside from choosing the map type, the splash screen also provides access to help and tutorials and information on how to touch base with the City.

With the flexibility of a custom app, the City has added several features, which make the app more user-friendly. For example, the “Help Me” tool on the top-left panel includes links to videos with easy-to-follow instructions for using each functionality of the app. This is very helpful as not all users may be familiar with mapping software.

Another impressive feature of COSMOS is its high performance. I tried using the Document Search tool and the speed in which the results were generated based on the drawing filter search was amazingly fast! Once the results were served up, I was able to easily download the corresponding drawing. This level of accessibility and efficiency of retrieving data helps save time for the City as well as for people requiring as-built drawings.

With the customized app, they’ve also added a map drawing functionality that allows users to create their own illustrations. You can use the application to draw a line, area, text and point on the map. After the necessary drawings are made to the map, the user can then print, export, bookmark or save the drawing as a text file. The remarkable thing with the text file is that it acts as a memory file (a JSON text file of all the customized drawings you have added to the map) where you can pick up from your last drawing, or share that drawing with someone so they can continue drawing on top of your existing drawing.

Lastly, the City customized the app interface (colour, theme) to be consistent with their branding and also added the necessary graphics. These capabilities are usually limited in an out-of-the-box app.

Since launching COSMOS, City of Surrey has received positive feedback on the application, which is used by staff and residents as an important information resource on a daily basis. The app is accessed by more than 20,000 users per month!

As for lessons learned, Shenglin Xu, a GIS analyst from City of Surrey says, “when creating a customized app, it’s important to do a thorough code review and conduct more testing before deploying the app to production to ensure the app works effectively.”

Spend time on the necessary processes, such as planning the user interface. To begin, identify the purpose and audience of the application. Figuring this out helps determine which tools can be used.  ArcGIS API for JavaScript includes ready-to-use widgets that can help you develop apps with rich functionality.

If you want to dive right into it, check out this video. You can also read this blog post on how to create an app visualization of earthquakes using ArcGIS API for JavaScript.