Tutorial ArcGIS Experience Builder

hello everyone for you today a tutorial on how to use ArcGIS experience builder to build a website full of many interactive maps that you can use to go and share information about your different projects that have jas information in them so the website that we're going to make in the tutorial will look kind of like this one will include maps regarding geothermal energy and will have different attractive features where you can turn on and off different elements click on different items so that a pop-up will appear at some point and we'll have other kind of maps like this you can zoom in also again click on something and see a pop-up at some point giving an internet connection um great so this is the map there this is the kind of website also I'm going to show how you can embed other turn items inside complex's this for example is a story map hi you can embed other ArcGIS products inside your website and to create a nice synchronous thing and also you can use those same concepts to integrate 3d stuff and other things in your website so let us get started how do we use our JS experienced builder first you should go into your content page so go and figure out how to get here you should probably login to your RA yes homepage and then click on my content that should get you to a page like this one with all the things that you've made in the past then you go here to create and you move to the bottom and click on experience builder so I'm gonna do that right now and it is going to go and show me things I've made in the past that website we're gonna create a new one for this tutorial so I'm gonna click on create new and now you have many different templates that you can choose from right so if you want to do something that's really basic and just follow a certain template you can just here and it will make your life much easier but for this tutorial you're going to choose the blank scrolling page just like that any some idea about the different concepts that we have so first things first let's look at this setup so over here when it loads this is gonna be your work area here you insert different kinds of widgets like maps legends layers and also things down here which relate more to your layout over here we can again see dinner layout items so if you make several pages you would see that over here and you'll see that I'll will look at this again later you'll see outlines of different elements that you make then here I'm going to ready to do something is your data sources you want to out of here all the different data that you're going to use so I'm gonna go here and just add data and you go into public ok so now you have your a lot of public maps that you can put my website up in this tutorial we're gonna go and use two different maps that I've made one called where is geothermal located so I'm gonna type it in here where is geothermal located question right enter ok let's not the spirit and I know why it's not appear without the question mark but I clicked on it you see this checkmark over here and I'm going to click on done and now you can see that I've imported one map into my area over here great we're actually gonna be using two several Maps so let's click on Pat data and the second one that I would like to add is called tutorial geothermal ok so let's go here into public Maps and then type in tutorial a geothermal click enter and there it appears ok click done and now we can see here that we'll be able to later go and access these maps and put them into our work area over here here you can control the different kind of templates and you can customize it to get the perfect file but you want okay so let us get started so the first thing that I'm gonna do is put in here a row layout item and I like these row layout items because they let you control the spacing of different elements they put into the map into your website so I put it in but you can see that it's not extended all the way to the end so I can close i'm click on that square on the right and drag it all the way till it extends the full width of the screen ok so this is a a container that I'll then be using to put other things on it so for this case I'll like to put here some text and I got going actually extend this text all the way to the end the same way I'm gonna call this my beautiful title okay or you can also be here something else but let's say where is geothermal it's another option now you can double click in here and say ok let's make this size 33 up to small thing a little bigger 55 great put it over here very nice now I'm thinking the background it's it's pretty it's pretty white or grey so let's let's kind of spice that up so I knew was going click here on this section over here it says a little bit hard to click so sometimes I like to go here into the layout I can click on this block that I just created I want to give this whole block is certain background so I'm go here into a style and then I'm gonna go into the field now I feel a little image actually so I'm gonna yeah on browse now I have prepared for you and you'll see is in the description a URL with an image so copy and paste this and you can copy and paste it from the notes in the comments section now I go like this and this will hopefully connect us to an image that I put so this is kinda supposed to look kind of you know a geothermal map so we see that does not extend the full way so you wanna you know make a little nicer so instead of thick we're gonna do fill here it's no position now looks gorgeous let's actually change that may be me Bulls okay as you can see I'll let you guys figure out how exactly you want stylists so that it looks better but also you can see here when we're in the outline um position you can see it there's a block that's this and there's this row and inside it there is a text great let us move on and add more items into our map right now I'm going to add your a row okay another one I love rose those are great I can extend it all the way towards the end and then I'm going to add in here text okay and in this text so I'm gonna you know just make another pretty lame texting uh see where is your throne again okay you guys make this 33 just goes easier click the same number twice just to show you that you can have different fonts and then right here the following map shows you where your cell is located around the world great and then I'm gonna make it 16 and unfold it perfect now you are noticing if this is suctions taking a lot of area how do I make sure that you know it's only the size of my text you know Jo stick to size the text so I'm going to go here and click on this box okay again it's a little bit hard to click so let's go and click on the block over here and go into style now you can see here that it has a height that is predetermined in pixels now we don't want that you wanted to just adjust automatically so you can go here and click on oh wow look at that it just adjusted automatically and it's the right height perfect now we're finally coming along to the interactive part of this okay so we're going here it's clicking on Rome again you guys are ready the pros like this you can extend it all the way and then you're going to embed in here eMac okay so that's right over here on top and basic I put it here and then I'm gonna make it maybe a little bigger okay and this time I actually want to meet the block slightly larger so I'm gonna go here click on that block you can also good luck a name like map run blog yeah it's easier to you know figure out what you're doing I'm gonna you know make this height maybe six hundred much better I like my maps a little more square and actually let me move this map a little more towards the center so go like that and leave a little bit of a margin actually a little even margin here too it's always nice out margins I love margins okay now I want to put my data here so how do I do it I click on this map then I go into content I go into see left map okay and then the data that we already put there is already available so I can click on where is geothermal and now you gonna be shocked it will just appear over here it's gonna load the data in it's that easy that's wonderful so Isis loading it's kind of a heavy thing so it might take a while and not be as responsive as you like depending on your internet we're gonna go here and now add a few more items so but just load it actually pretty quickly right now and I wanna have be able to turn the map layers on and off so I'm gonna click here on map layers and I'm gonna put this map layers now actually instead of putting it on top of the map why don't we put it to the side of the map for this example so we squeeze a snap again back they take a snap layers and put it there okay so this is why the rows are so nice is that allows you to control the width of different items okay actually they mean again have that space over there so now I have map layers but how do I connect it to this map all I do is I click on my players okay and I say interact with the map widget perfect not one sucks this map over here you can also give it a name so that's not easily identifiable okay energy okay great and now we see okay we're at war what about those icons that turn I'm off I click on over here and then I say Oh what do we want so where are we toggle layer visibility and there we go oh this is great and actually we made a fair amount progress so saving is in order let's call this my first map experience builder experience builder okay something like that little short I can click on save really important save always great save successfully now I want to see this thing is working correctly so I can click on live view click here PMO's plates they're all appearing disappearing know what this websites already looking pretty slick I'm liking it syan click here and unclick live you nine continue downwards and we are going to go and make another map this one's going to have a slightly different widget in it so that we learned something new okay so I'm going here add another one of these rows now of course you should probably add some text in between the maps but this is just a quick tutorial so you'll have to do that yourself by adding text over here when you do a real website for yourself but for now we're just gonna put another map directly below so I'm gonna drag a map over here and then I'm gonna go and stretch it all the way here great and again I feel like making that block a bit wider so you see now I'm working in this block 3 okay which you can also give it a new name call us the second map lock okay I want it to be a little larger so for 20 let's make again some didn't ok perfect and now for this match I want to choose the other data set that we've uploaded so I am go here into content select map tutorial geothermal perfect it's loading in our data great this is actually geo throwing the US that could have been another title over here now I'm going in to select date select the widget and instead of this interactive widget item I would just want to have a legend that shows you'll know what these colors mean so I'm going click here on the legend widget okay I'm gonna make it a little bit skinnier and then I'm gonna click here select a map widget that's gonna interact okay so we called you or maybe called the previous map where's your thermals let's actually give us a name she'll turn on the US okay great and now I'm gonna click here and select the map widget general us Wow now it shows me immediately my my different items over here that's wonderful great Wow look at this worthy of another of saving great now we actually have only one more item that we're gonna go and practice here that is how to embed different other items from ArcGIS or from anywhere into your website so the way you do that is you click on the well first let's add a row I always like putting things into rows control spacing okay so I'm go and I'm gonna extend this row all the way and now I'm going to put in here an embedded widget great extend it all the way to this side you know maybe leave some like space on the sides again and like we did before and this is just repetitive a little bit I'm going to this block three and I'm gonna make it a bit bigger because that's how I like it now I think you can also do this you know with the GUI but by stretching you say it's stretched it like that but I like doing it just by clicking the block yeah easy okay so we have that in bed right URL and go here into content and now you can put here either that our website address or coke okay so for this case I have the website address or a different like Jas story map and I'm gonna go and copy this I put it into here then I'm gonna wait okay it's loading itself up Wow what we see over here and if I go into Y view I have this great story map that is just inside of this other website so you can have earth genius webpage inside of an rjs webchange also if you just noticed something that happened I I scrolled and then it immediately scrolled these items another thing that can sometimes be annoying if I go here and I travel Ivan you you can undo that by one of these this evil scroll zoom mean okay so because that could be annoying you know you're scrolling and then you're incidentally zooming in so basically what you want now what we see over here that I was just kind of annoying is that you had this title from that story map that you had in there and that was kind of annoying me when I did it so easy to saw this to go here all the way to the end of the URL and to let rjs know that if you want embed this you want the embedded version just click here okay I move the mouse and you're right and embed okay now this look it's gonna happen okay it's thinking about it oh the title is gone now it's in the embed version without the title there so that doesn't look weird you know having a title inside of your website that you don't want necessarily so this is great know how do I get this out of here how do I show this to all my friends and family click here on save okay save and then we want to preview it first to make sure that everything is good go here now it might take a few seconds to load because the data for this tutorial is a bit heavy so my apologies that's still thinking about it but after this preview goes on you can think okay does it look good is it operating like I want is it ready to be published okay so this is still thinking about life but let's just instead of waiting let's just assume that it's working as it should I can see here the map is starting to look kind of nice okay actually it's coming up so that's good that's good this this one came out fast is interacting like it should yeah it's moving between the different element in the story map so that's great perfect okay great I think it looks pretty good what do you say let's go and publish it so how do I do that I go back here and this is very easy you just click on publish okay and now it says polish successful you well so how do i how do I go and see it I go here copy published item link okay and copied it successfully I go here and open a new page I put in this new link I check it out and Wow it's it's there it's a real website it's on the web and now I can sure it's linked with everyone and everyone can see the gorgeous website I am eight and that is it guys I hope you enjoy this tutorial and that you learned something have a wonderful day

Channel: Ahinoam Pollack

Views: 5,506

Rating: 5 out of 5

Keywords:

Id: Xo6T_Qnt9Q4

Length: 18min 30sec (1110 seconds)

Published: Tue Jun 09 2020