Tailor end-user experience with interactive apps

Whether you’re an expert developer or app building beginner, discover how you can create bespoke, branded apps for any project. In this special GIS Day episode, Wayne, Ta and Josh share their top tips and must-use tools for transforming traditional web maps into aesthetically-pleasing and intuitive apps. 


Apple podcast badgeSpotify podcast badgePodbean badgeGoogle podcast badge

Subscribe for more short, sharp and immediately usable insights. 

Join the conversation on Twitter @esriaustralia.

Stay in the know

Be notified when new episodes go live and submit your topic ideas below.

  • Click to view the episode transcript

    The art of transforming maps into apps

    Wayne: This allows you to create mobile applications for whatever type of mobile device you're after, all with one single code base. You build it using AppStudio, you send it off to the cloud to be baked by the Esri gods, and they give you back your beautiful cake.

    Disclaimer: This podcast is brought to you by the team at Esri Australia. To get your hands on more short, sharp and immediately usable resources, head to the Esri Australia website and search for Goldmine.

    Wayne: Welcome along to a special GIS day episode of GIS Directions. I'm Wayne Lee Archer.

    Josh: I'm Josh Venman.

    Ta: And I'm Ta Taneka. Now just before we kick off, I also want to give a little shout out to our friends in Southeast Asia – happy GIS day everyone!

    Wayne: When does a web map become a web app? What makes a good one? And how do you make that transformation happen? That's what we're going to be navigating in today's episode.

    Josh: How about we start with a really simple question. Why? Why would you turn your web map into an application?

    Ta: I think that's the most important question here is why? The why should really underpin anything that we're doing, particularly in this spatial intelligence field. And before you pursue how to create your app, we have to consider the audience and the purpose.

    Josh: I'm right with you there Ta, it’s, the audience is not us. It's not app builders or cartographers, it's probably not. It's probably people who just want to make a decision or be informed by some geography.

    Ta: Why don't we take it back to basics? What's the very first thing that you can do when you're creating an app? keep it simple, right?

    Josh: Let me start there on super simple. You've got this web map in front of you. You've got an idea for the story you want it to tell, and let's say you've also got some areas of the map that are the sequence, that that story goes through to tell it. So, one really simple thing you could do with a web map or a 3D web scene, is to take advantage of bookmarks.

    Simple as it sounds, you can then turn those into slides and even share a presentation, which either automatically, or by the user clicking a ‘go forward’ button they can go through that sequence. So, that's something that a lot of people have never used, but if you just want to control the flow, absolutely simple. Just do it in the map viewer.

    Ta: Now I have seen on a couple of government websites, and I've actually seen just a web map embedded on the page, makes it really easy for me to zoom in and out and pan. They have a couple of bookmarks for locations. It's a great way to put location and spatial intelligence in the hands of the community, so that they can quickly and easily get access to relevant information.

    Wayne: Well, this is one I use all the time because I'm a developer. I like to get in, I love to cut some code. I need to write it myself. I'm going to write it from scratch.

    What that means for me is, I don't always have time to make those apps that I want. So I'm either the guy that just does a web map with some bookmarks, just like Josh said, and then goes and embeds it into some other product or into another news cycle. And it's really easy to do that these days especially with the Web Map classic up there up on ArcGIS Online and in Portal, you can actually get the HTML to embed your map into another website.

    Josh: And that embed code you're talking about is enough for a web site operator to take and make it part of the page. It's ready to go.

    Ta: Now we've talked about simplicity, but what if I want to do more with the web map I have? Now, I found that sharing is a pathway to many, many apps and everything from simple embed, to app builder and configurable apps and StoryMaps and dashboards.

    Now, what if I need more out of the specific map rather than panning and zooming and bookmarks, I need apps with more capability and purpose. So, what are we looking at there?

    Wayne: I think what you're talking about are the app application templates, Ta there's a whole bunch of application templates. So, I think the message here is, we're probably not as special as we each think we are. Sorry to say it, Ta.

    Ta: Ahh!

    Wayne: We're all GIS professionals and we all think we're doing something super special, but quite often we're treading the same ground as our partners and our colleagues in the industry.

    Have a look at some of the configurable application templates that are available on ArcGIS Online and throughout the resources. But there's already built templates that you can just throw your data and your map at that will probably get you like that 90% mark, as far as functionality is concerned.

    So, there are templates for community engagement, templates for locating items within the community, there's templates for getting feedback and providing reports on errors or things that people find in public. All of these kinds of things are the kinds of things that you would do with a web app, but they've already been done for you, just waiting for your data.

    Ta: Well, I really like this because I want more control of the user experience and I also want more functionality and I keep saying it, but you have to think about the audience. So, is it an app with buttons that I need to go to, or is it a map with narrative? So, am I thinking StoryMaps?

    And Wayne, I know you're a coder but for me I need loads of options without lifting a coding figure because I can't code, to save my life.

    Josh: This is kind of first base when you are not a coder and you want to add some functionality over and above what the web map can do. But it's also worth noting that, yeah, there's a bunch of these templates in ArcGIS Online and ArcGIS Enterprise, but if you customise one, make it look like the theme for your organisation, you can save that right back to where you got the original, so that it can become a template for everything else that you create. And then everybody's apps will adopt that theme.

    I'm going to raise the bar a little and say, where can we go next? Like that sharing menu has some other goodness in it, right? Ta, you mentioned StoryMaps but that's another, another winner straight from your web map in the Map Viewer right out to a StoryMap. Ready to go.

    Ta: I love a little bit of narrative around the specific image that I'm looking at. I have the opportunity to highlight the map that I have, but also add context to the information.

    Josh: On StoryMaps, there's something unique about them in that it combines the cartography, your web map, and the dialogue, the narrative around it. And I think that's sometimes something that you need. You need to be able to guide with words, somebody through the story the map tells. I'm going to introduce the concept of app builders here cause there's a few of them too.

    Wayne: And there's different types of app builder now, we've got our classic WebApp Builder or WAB that's been around for years, there's also the more modern sort of experience builder, which is called Experience Builder uh, funnily enough, that brings that new modern, sort material-esque flavour of applications, into play.

    Josh: Absolutely. And, Ta, you got excited when we said WebApp Builder, that's something you've used a bit?

    Ta: It is actually, I remember when we first started to put together information about SmarterWX, a great, great range of programs we have, I found that I used WebApp Builder to put together locations, and then to also add different widgets.

    So, widgets helped us to add in drivetime to find what was in near. I think I had about 10 widgets to begin with just because I could, so one drawback for me, I had to, again, hone in on my audience to select what they needed, not what was fun for me. So, all eight other widgets had to be dropped, which hurt me.

    Josh: No, the widget frenzy is understandable because wow, there's so much cool stuff in that palette, but couple of things, if you add all of them because you can, in that moment of madness you had Ta, you're assuming that, first of all your audience needs all of that, but also they're going to understand it's there. And for me, that's a big leap of faith.

    But just before we move on from app builders, let's just talk about what the difference is. You know, what's the difference between WebApp Builder and experience builder. If you ask Wayne, he's going to give you a codey code answer.

    Wayne: Well that's it, you ask me I've got an important perspective that I think it needs to be expressed and that is, it uses a different JavaScript API version.

    Josh: Right.

    Wayne: Oh, wow, I heard the boredom in your voice just then Josh!

    Josh: Well do tell!

    Wayne: Well, actually, what this means is that it's using the older or previous version of the JavaScript API for ArcGIS in the WebApp Builder, and in the new Experience Builder, it's using the new version four of that JavaScript API. And what that means is, you've got different amounts of capability. You can mix and match 3D and 2D in the version four API. You've got wonderful blend modes and all of the new features that have been coming out with, with the JavaScript APIs.

    Josh: One final observation about differences there is that, if you think about all the WebApp Builder apps you've seen, there's a map front and centre, right? So they're very map centric by design. Experience Builder's a little bit different, isn't it? Because you can create actually a micro website with loads of pages, and you might not have a map on any of them.

    You might have Survey123 widgets. You might have a navigation widget, but the idea is that you can create, as the name suggests an experience not just a map viewer. what about mobile? What can we do for mobile people?

    Wayne: Oh, I know the answer to this one. I know the answer to this one. Oh, pick me, Sir.

    Josh: Go on, go on Lee-Archer!

    Wayne: AppStudio. Basically, this allows you to create mobile applications for whatever type of mobile device you're after, whether it's iPads, whether it's your iPhone, whether it's your Androids, all with one single code base, and it allows it to be baked up by the Esri cloud itself, ready to deploy for you.

    So you don't have to go through all of the trouble you normally would, of becoming an, say an Apple developer or an Android developer and learning all of these new languages and learning how to build apps for mobile. You build it using AppStudio, you send it off to the cloud to be baked by the Esri gods, and they give you back your beautiful cake. It's wonderful.

    Josh: I'm just going to, kind of relay an example of how AppStudio can be used and it's kind of one of the, I guess the design goals of it. But let's assume you're a local counsellor and you've got, back in the day when you could do this, hopefully soon. You're running a, a street food market and you want to put out an app to your constituents in the LGA to help them navigate this market where all the cool stuff is. But you don't want to spend $50,000 on developing something that's going to be used once. So, AppStudio’s ideal for that.

    You can actually configure, from a tour template. And as you said, Wayne bake it in the cloud and make it available through the app stores and all without being a mobile developer.

    Ta: Now I do understand that WebApp Builder, Experience Building and AppStudio they all have developer modes, which Wayne, of course you appreciate. But just a cautionary tale, be careful you're not cracking a walnut with a sledgehammer.

    Wayne: You're absolutely right. You don't have to write everything from scratch.

    So I suppose I'm going to throw the question around and say, well when would you go and start doing stuff with the, you know, the SDKs and the APIs and writing your own code?

    Josh: I'd go across that line when I don't want to carry the baggage that would come with using what is essentially an app framework like WebApp Builder or Experience Builder, if what I want to do, I can do with a small chunk of JavaScript code without all the plumbing to support all the widgets and the good stuff that I can do in those builders, then that would be a turning point for me.

    Wayne: And you know what Josh you've hit the nail on the head I think with the ArcGIS platform that has been rolled out, there are whole heap of different ways that you can use the ArcGIS APIs in other frameworks. And, well let's face it, the Esri dojo framework can be pretty heavy at some points in time.

    If you're just after a nice light, fast application with a little bit of mapping experience in there, leaflet JS is very, very popular out in the marketplace. So is open layers and a whole bunch of these other libraries. And going down to the SDK and to the API level allows you to use your favorite libraries and still access all of that wonderful ArcGIS mappy goodness, in things like leaflet, which are very, very lightweight.

    Josh: We've covered a lot of ground here, but I want to challenge us all for some concrete tips to leave everyone with. So, I'm going to throw you under the bus Ta and say, tip number one from you?

    Ta: Okay. Tip number one from me and I can't stress this enough is, think about what you want the end user to experience and who they are. Your audience, your audience, your audience.

    Josh: My next one, or I guess my first one here is, don't neglect that simple is good approach of using bookmarks in a web map or web scene as a very simple but powerful way of driving, even the templated apps down the track, because those bookmarks will be carried through.

    Wayne: I'm going to steal that same one in, in a sort of way Josh, I'm going to say if you're doing, just simple web maps, don't forget about that embed capability.

    Ta: My second tip, consider and reconsider every tool you add to the map. Now I had a moment of being the mad mapper, definitely consider this, um, you know, whatever you're adding, will it enhance or confuse, or will it be used by the end user. Will it elevate or take away?

    Josh: That's a really good one. My next one. Back to basics and keep it simple. Just focus on making it simply work and work well.  

    Wayne: I’ll go next, I think if you do have to get down and dirty with the code, you need to get your hands dirty with some JavaScript. Then the JavaScript four API will work much, much faster than the JavaScript three API. So, if it helps to guide your experience, use experience builder over WebApp builder. WebApp Builder is not going anywhere, but experience builder will spit out the code that's fastest and more streamlined and is going to get you what you want on the web.

    Ta: My third and final tip, if your app has more than one button or maybe two, if you are a mad mapper like I was, consider a splash or onboarding screen that comes up first time.

    Josh: Tell them how to use it.

    Wayne: We should've started with that one, Ta!

    Ta: I like to go out with a bang.

    Wayne: Well, it's pretty amazing when you think of everything that we've covered today, we've evolved from the idea of creating a simple web map, right through WebApp Builders, right through to the lovely, homely land of the developer SDKs. A whole bunch of really good tips.

    Ta: And to help you with your transformation from map to app we'll include a bunch of useful links to get you started on the website at gisdirectionspodcast.com.au. Now, as I say this all the time, but we would definitely love to hear from you guys, so jump onto the website or connect with us through Twitter or LinkedIn, and make sure you follow us wherever you get your poddys and keep those five-star ratings coming. We're so excited.

    Wayne: Thanks for joining us for the international GIS day. Stay spatial

    Josh: Until next time.

    Ta: Happy mapping

    Disclaimer: The views and opinions expressed in this podcast are solely those of the hosts and do not necessarily represent the views or opinions of Esri Australia.

Subscribe to
Esri Australia news