Make a Web App with ArcGIS Web AppBuilder

all right so the goal of this video is to show you how to produce a simple app using the ArcGIS or ESRI ArcGIS online tools so we're gonna start off here with nothing and work our way up to a web app in roughly 10-15 minutes so you should so as you'll see this is actually a fairly simple tasks and it's pretty powerful okay so the goal is to make a web page where people can our users can look at a hill shade image to try to find landslides or slope failures and put a point at that location so it's effectively a website where you can take an image landslide inventory and this will be for the state of West Virginia okay so what we're going to start off with is creating a new blank layer that we could draw into so or that any user could draw into so there's different ways to do this I'm going to use the ArcGIS for developers website so one this website I'm going to go to new layer and this will allow us to create a layer if you have some type of template file you want to use like a Geo JSON or CSV or zip shapefile you can do that we're just going to start off from scratch so to do that you just go to create an empty layer okay so we could give it a title let's call this slope failure points oh my guess I already used that name we'll call it slopes failure points - I've ran through this already and then you have to give it some tags this makes us more searchable in your organization or on our JSON line so we'll just use some common tasks to do slope slope failure I'd also want to do landslides geo morphology okay that's that so now we have a name and we have a set of tags then we'll go to geometry and here you can set the geometry so we have points lines or polygons so here I just want people to put point features on the map so we'll stick with points but if you wanted them to draw lines or polygons you could change it then you can set the spatial reference use one of a code so this case it uses the European petroleum survey group codes generally if you're working in a web environment you should use one of two reference systems so you should use wgs84 datum which is what you know like GPS units generally used by default or you should use web Mercator which is the common projection used by web Maps so I'm just going to stick with wgs84 which again is the code is for three to six and again you should use one of those two codes if you're using data on the web generally okay so now we can add some fields so we would like users to be able to enter a couple things first we'd like to be able to enter a date so I'm going to create a field called date and the alias is just an easier name I'm just going to use date uppercase there and then the type so we'll make this state and then we'll add that field we also would want them to tell us the type of Earth material that potentially move so there's three options Rock or debris or Earth so we really only want the user to be able to enter those three potential types so we can set that up using coded values so I'm going to create a field called material and we'll just leave the alias material we'll get a capital m and we'll use string so it'll be text and we'll use coded values okay so our options are Rock will give that of code of zero we'll add it and our debris and a code of one and oops wanted to do I'm apparently oh I messed that up start over say uh alright guys know we can just edit it edit domains so we have ice art hate throwing things a rock zero debris one ad and then we want to do earth to add okay sorry I had messed it up so we'll do safe so we should have those now all right and then we'll move another field which is the type of movement so we'll do movement and then again we'll just capitalize it for the alias and again a string we use coded values again because we have a defined set of allowable values so we'll do a fall which will go to zero and then we'll do a topple which will code as one and then a slide ritual code is 2 and then Latin then we'll have a spread three and fall so ready at fall flow as four at zero one two three four okay that's short and then we'll add that field and then lastly we'll make a field where you can put in comments and we'll just make that a string or text field we and there's no defined values there okay so we have a set of four fields with domain setup for two of them both using coded values in this case we're going to make the date field required so they have to enter something there the material and movement type but they don't have to enter a comment if they don't want to so we'll leave that is not required okay so let's go to next or the next space was just settings okay so this page is important because you have to you can make changes after the fact but you have to have certain settings if you want anyone to be able to actually edit into this layer so right now this is just accessible by me but I would like to have anyone be able to add it into so I'm going to set this the public note I could also use my organization which is W okay we don't need to set any groups we have to make sure enable editing is set because if you don't able editing it can't be edited okay so keep track of created and updated features keep track of who created the and last updated features will do that and able sync that's good if people want to work offline they're gonna feel the unit the rest of this should be fine again this just controls what people can actually change in the data layer all right so that's setup so if we hit create layer now it should generate that layer so it's create layer ok so what's happening is this created what's called a hosted feature layer which is going to be stored in my content on our chess online all right so now we have that new layer so I'm going to go over to ArcGIS online and I'm gonna go to map alright so this opens a new blank map with nothing in it but a base map and here we have one of the default ESRI basemaps so I'm gonna add start adding some layers to this start building a web map so the first thing I do is add that layer that I just created so I'm going to do search for layers by default this is gonna go into your content so there's the layer I'm just gonna hit add ok so that layers been add to the map however as you can see it didn't really add anything because we haven't drawn anything into it yet well the most useful layer that we have in the state for interpreting landslide events would probably be a hill shade so in the in West Virginia we have a 1 meter resolution hillshade and that's been provided as a map service from the West Virginia Jazz Tech Center so I would like to add that service to this map so that it can be interpreted by users so to do that we have to know the address for that data set so I'm going to go to the West Virginia Jazz data services webpage and find that layer so here we have some imagery coach address geo code errs here we go elevation raster's one meter hillshade 2018 so if i go to arrest service here this is effectively the link to that object so if I grab this and add a ton of app it should add that hillshade let's go back to the map I'm going to add it so now I go to add add from web and then I give it a URL and then it looks like I found it and we'll hit add layer ok so that added that hillshade to the map so if we zoom in here you can see this is a pretty detailed hillshade that's being served over as you know basically raster tiles at variable resolution depending on how you zoom in and out okay so we basically have what we need in terms of layers so I'm going to save this map I'm going to call it slope failure failure map to again give it some tags will do landslides slides geomorphology what else oops realize that I spilled landslides wrong there do that again landslides and then slope failure you see it had those words already because I had already used them and in summary we'll call this in slope failure data collection and this is going to be saved into my content and let's hit save map apparently already use that so let's do three there we go alright so we have a save map but a note that in arc GIS maps are not webpages or apps so now we have to create a app from it and there's a couple of different ways to do it what I'm going to generate is the ArcGIS web app builder which I find pretty easy to use because the other aquire like any coding knowledge but it's also a little customizable okay so I'm going to go to share now note that if you really want people to use this map and the the data and you're going to share with the public so did that if you just want people in your organization to be able to change you could just use your organization and then I'm going to go to create a web app note that if you want you could also embed this into a website it will give you the required CSS and HTML code to do that let me go to create a web app okay there's configurable apps we could use one of those but I'm going to do is use the web app builder you click on web app builder will call this slope failure data collection app you don't know you pulled in the tags and stuff from the map and then we'll hit get started and that'll allow us to configure our page okay so you can change the theme if you'd like this seems fine if you change the collar I'll use green but again you can mess around with that you can also change the layout you know the positions of things I like the first one so we'll just stick with that okay this is the map that is linked to we have it linked to that map that we just created you could change it if you want one thing I'd like to do is maybe change the default extent so that when the page loads it loads to the extent of the hillshade or the state so we'll do this use current map view and then it'll now use that as the default extent we don't really need to send anything else on that page so now we'll go to widgets okay so here we can add some tools or widgets that make the page a little more functional note we do have to add a couple tools that we wanted to the users to be able to edit into it specifically we need to add it add the edit tool so for this first widget I'm gonna set that to the edit tool okay so that will allow people to actually draw into that landslide layer okay and we don't really need to change anything there so let's hit OK and then we may want them to be able to draw on the map so let's add the drawing tool that'll work and add that and we probably want them to be able to toggle layers on and off so that's already actually up here and the legend so we don't really actually need to add that smoothly that we want a measuring tool and make measurements like the dimensions of a slide that they find for example they may want to print something if they find something interesting so add a print widget and then let's see do we want to add any additional tools let's add a base map that will allow them to change the base map okay and note you can pick your own custom base maps if you want here it just has act you have access to the ESRI basemaps so hit OK there all right so we have a bunch of tools we have search bar zoom in and out go to Home locate if you have your location-based services this allows you to look at the legend this looks at the layers list you turn layers on and off okay so I think we're good there and then under attributes we can change the name and the icon or what not so let's make up a name that's a little bit more user friendly and here we have underscores and whatnot that's probably not great so do West Virginia slope failure inventory app I'll leave this subtitle there and I'm gonna change the logo we'll do custom upload and I'm going to grab this logo this is the logo for West Virginia view and if we wanted we could actually add the link actually let's do that so West Virginia View and that's our West Virginia view web page so we'll go back to there okay alright so I think that did it so let's save our app you see it's saving so again that will get saved to your content and ArcGIS online and now let's see if our page actually works the way that we think it's supposed to so let's hit launch so that'll open up a web page this is what you've generated you basically generated a web page with a map on it and some tools okay so let's see we can see our legend we have our slope points we have our hill shade that could probably be cleaned up let's find for now here's our layer list so for example if we wanted to turn the hill shade off we could we can change our base map just change it to that real quick imagery we can make measurements length area draw on the map so the most important thing is whether or not we can actually add data points to this land side layer because that's the whole point of the page so let's see if that will work let's zoom in here I'm just trying to find a landslide I know exists here we go so this is a landslide and horseshoe run just north of Parsons so you can see fairly well-defined slide there here's the the scarp in the toe so pretty obvious landslide so I just want to put a data point there on the on the head scarp to note that it is a landslide so if I click on this okay it will let us enter that so report there and it brings up a window this is the date so I'm just going to pick the current date see it is the 6th there you can pick a time you don't have to oh I guess you do have to run I'm just gonna put a time in here it's two materials required so I'm not really sure we're gonna say it's debris and then we're gonna say it's a slide probably actually was to earth slide and then I could say interpreted large slide so if they also could do a couple other things note that you can add attachments so if I wanted to add like off a photo or I believe like an audio file or video file I could but it's nothing really to add so if a text there we now added a data point to our layer our first data point so it seems like we have a pretty funky so as you can see this to take very long we went from no data to creating a file then to setting up our file going into our pro creating a map and then go creating an app from that map in like 15 minutes there's other things you might want to do like clean up the legend and clean up the visibility scales maybe configure pop-ups but again this is a pretty simple process you can get some pretty usable output without having to know any like JavaScript or CSS or HTML to do any web development so in short I hope you found this useful and the best way to learn is to practice so if you want to do this just try to make some web Maps if ArcGIS online

Channel: Aaron Maxwell

Views: 828

Rating: 5 out of 5

Keywords: ArcGIS, ArcGIS Online, Web Mapping, Web AppBuilder, Web GIS, GIS

Id: rbcG7jEBBdk

Length: 18min 16sec (1096 seconds)

Published: Sun Jun 09 2019