Getting Started with Web Development and the ArcGIS API for JavaScript

so good morning thank you for coming this session is called getting started with web development and the RCS API for JavaScript so my name is Noah Sager I'm a product engineer on the JavaScript team and I'm here with Heather Gonzaga again I'm a product engineer with JavaScript team and yeah that's it alright so let's start off with a quick show of hands how many people here I've already done some web development using javascript all right almost everyone awesome now how many of you have done the same development using the JavaScript API a three dot X version okay a couple people and the four dot X version a couple people cool okay so we have a bunch of web developers you're used to JavaScript but the API is going to be kind of new so there's gonna be a getting started session we're gonna cover a big overview of what's going on with the API I'm just curious how many are geographer it's bitrate and we're told they need to figure all of this stuff out yeah okay that was me like eighteen years ago so I get it I get it so this is a good one for you all right so this is our agenda first we're gonna go over the set up and that's both in terms of web development and in terms of developing with the arcgis api for javascript so we'll give you the very basics and then we're gonna do something kind of cool instead of just showering you with code snippets and useful tidbits of information we're gonna build an app from scratch so each segment we'll go over the principles and the fundamentals behind it and then we'll add layers of complexity to our applications we'll work with layers whatever symbology and renderers may make the map a little interactive use a portal lowercase P portal and add some widgets to it and you'll see how we go from nothing all the way to a fully functional web application so a quick bit of housekeeping so we're gonna be talking about the four dot X version of the API today the current version is 4.6 a lot of the principles are going to apply to the 3x version of the API and we'll get into some of the differences between the 3x version and the foitx version later on the session but all these this presentation and ones that heather has done in past which does cover the 3x version of the API that's all gonna be available on github so if you want to take a moment and take a picture just jot down this URL or you can google github heather gonzaga and you'll find her dev summit presentation repository the 3x1 is a little old but again like you said it you know updated data and so forth but that is actually not coming into the dev summit if you go to a just my age gonzaga repo i think there should be one for you they user conference that i did so if you want to take a look back on there you should be able to to access that as well and this will be the presentations and all the demos that we're gonna show today and the ones that are shown in the past so this can be a good learning repository alright so we'll move on so where do I begin so the first place we recommend beginning is the developers website developers arcgis.com four slash JavaScript you'll notice when you first open it up it opens up at the four dot X version of the API over on the right side there's a little blue box that'll bring you to the 3 X version of the API but this is the main landing page that's been completely revamped at the four that X version and we're pretty proud of it so there's a couple sections I want to highlight the first is the guide this is a conceptual guide area and it'll make it a little bit bigger it has a lot of good information about fundamentals for working with the API and things like you know the release notes for the current version or the system requirements that are necessary to actually develop applications we have a migrating from 3 X topic and then we have a lot of really useful topics about working with the API everything from arcade to promises to actually developing your own custom widget this is all written in English with some code snippets and links to samples but it's really to give you that conceptual foundation to actually begin working with the API now we have a section on visualization and then we have a handy reference section for things like proxy pages or a localization all that useful stuff is right there the next section I want to highlight is the API reference this is kind of like a cookbook for making those delicious web applications and the really cool part about it if you're coming from the 3x world we've added a search bar here so if I'm working with pop-ups and I know that you know I need pop-ups for my map I can just do a search for a pop-up show me all the classes and all the different modules that have pop-up properties or that implement pop-ups and then I can easily navigate into any one of these classes the next tab is the sample code this is where all of our samples are and it's organized by category you can see in the table of contents but it also has the same ability to search so I can search for a pop-up and since show me there's 13 samples that use pop-ups and each of these samples will have descriptions about what the sample does and then shows you an actually fully interactive application and the last thing to point out is the community tab so how many people here are familiar with or havelis heard about GeoNet okay cool a good portion of you so GeoNet is the ESRI community ever in place it as a reformed site if you're familiar with that and actually has more functionality than the ESRI forum site it's a great place to post questions to post answers post ideas and kind of get helped in the community and it's also free so if you're a student or if you're working on your own you don't have to pay money to join the ESRI community there's a bunch of other online forms like it but this is Ezra's version of it and it's it's really awesome alright so question which version of the API is best so I alluded to in the beginning that we have a 3x version and a 4 dot X version and technically those are both current versions of the API the for docs version is we've completely rebuilt the API when we we completely rebuilt the API at the 4 LX version but we still have functionality being added at the 3x version but most of our development resources are being put in the for that X version there will come a time in the future we don't know when yet but it will be you know eventually that 3x will stop being worked on and 4 dot X will be the main version of the API so if you're sitting there wondering which version should I start with this page is really helpful to choose between the version page if you have requirements to make a web application that says that say needs to be in 3d you can immediately tell that 3 X does not have support for 3d but for added X does so that tells you you should start working with afford X version of the API but if you need to work with something like time enabled data we don't have that yet at 4 decks so you're gonna want to start working with the 3 X version of the API so this page is great when you're getting it started to see which version you can work with all things being equal you should work with the Forex version unless you need to use 3x another cool thing here if you're coming from the 3x world or you have an old code you need to migrate we have a functionality matrix so a lot of modules have either been removed added or renamed in the migration from 3 to 4 and you can find what those naming conventions are now so my favorite layer is the ArcGIS dynamic map service layer it's a bit of a mouthful we still have it at 4 decks but it's been renamed to map image layer so if you want to port your code from 3 to 4 I think you can kind of get the sense that it's not as easy as just replacing a few classes it's gonna be a complete rewrite so this table can be really helpful to find those functions and methods that you're usually used to working with all right so now developers setup so if you've come from a different language if say if you've worked with iOS you've been programming with Swift or objective-c or you've done some Android or Java development you're really limited in the IDs that you can use and that's not so with JavaScript you have a lot of options if you just do a google for the best JavaScript ID you'll find a bajillion articles this is a nice one that we found recently that we like to show off the first one at the top of the list is visual studio code this is being used a lot on our team it's free it's fairly lightweight and it's a really good job of working with projects other ones that I personally like are things like sublime or notepad plus plus a bit more lightweight fewer bells and whistles but they open up real quick and just let you kind of dive into the code and then if you're like more tools if you like all the bells and whistles webstorm is a great option we have some developers that use that and you can do everything that you want so there's a lot of a lot of different options out there and there is no one correct answer for which one is best okay more resources so I showed you the developers darkest comm page we also have a jsapi resources page on github this has a lot of cool stuff this is things like if you want help with working with other frameworks like bower or you want some help with oh oh or you wanna learn more about typescript or Jas hint we have a lot of cool resources here on this github page and there are links to it within the developer page but this is the URL to the actual page on github there's a lot of cool stuff here that can kind of help you your projects alright getting the API so the three ways to actually work with the JavaScript API the most popular is the CDN version this is the content delivery network that ESRI hosts so we maintain access to the API 24/7 so all you have to do is add this URL in and you'll see this on the developer page and at every sample a link to the URL and then we update that when a new version comes out another thing you can do is actually make a custom build so we have things like bower now if you're familiar with that you can package your own build of the API one of the benefits to this is if you know exactly the functionality you want and you want a bit of a smaller payload for loading the API you just grab the modules that you want and package them together and then download that the only caveat there is if you make changes to your application or you want to add functionality you're going to need to do a new download so if you do that quite often that could be a pain but if you know exactly what you're doing this is a great option as well and the last option is to actually download and host it yourself so we have a lot of customers that work in secure environments and they don't want to be making web requests to outside their network so you can download the API and the SDK and host it on your own machine so you could have our documentation you can have our samples and have the API reference that you can just call locally in your web application again the caveat there is when new versions come out you'll have to download it again and set it up again it's a very small amount of effort to actually set it up but it is a bit of effort compared to just calling URL alright same thing with the CSS so we have two different CSS files you can again use the CDN version where you just make the call - to where ESRI hosted the main dot CSS is the easiest because it has everything anything you would want a style for ESRI as in the main dot CSS file so that makes her really straightforward however if you're doing some more lighter weight things you don't want to have to download or make requests to the entire CSS file you can use the view dot CSS the view dot CSS is good for a simple map or just using a couple widgets that's a little bit lighter but still gives you the functionality that you need and then the last thing you can do which I always find kind of neat is themes so if you've ever seen a web application that doesn't have the default coloring on the widgets or on the zoom bar things like that you can actually define the theme you can make it purple or green or kind of customize it a bit if your company has a certain branding or if you have a favorite color it's pretty straightforward as the documentation says to do you just make a call to the theme CSS file and just insert a theme name in this string here alright that I'm gonna turn it over to Heather and she's gonna take you through the first steps to making the application all right so all of that out of the way let's actually go in and create this thing so one of the first thing is that you're probably gonna want to thank consider is hire act your app is actually going to be written if you take a look at our developer site you'll notice that all of our samples are written and won we just have them in one HTML file just for simplicity's sake so if we open up this map you see we have everything all of it in one file all right well once you see your application starts to get a little bit larger you're probably gonna want to go in and start breaking it down more module modularize it so that's what I that's what we've done for all of our demos just to show you I have everything in here in so I have a CSS file stored here in my CSS folder I've got a JavaScript file which is gonna hold the actual JavaScript the the that has all of our stuff in this main dot J's file that's in this JavaScript folder and then the index dot HTML files to that markup okay so that's how we do it within our demos you know have to do it that way but just just to kind of give you an idea of once again you know the larger your projects get you're probably want to go in and work on it this way all right so first things first [Music] open one up alright so this is a really ugly map but it is map what we have here is basically just looking at my main J's file and I have an extension on my machine to make things look a little bit easier alright so what we have here is a required statement and I'm passing in the ESRI map and a map view okay and then I'm passing in the arguments for this so this this function call map and map view all right these are the variable names for a min map my map view or for that argument I should say I'm sorry now I'm gonna go in I'm an instantiated create the new map set my base map to one of the given base maps that we have provided for you just hosted ArcGIS online base maps and there's a bunch of them this one is just the gray vector and then we've got a map view the map view is a little bit different if you aren't familiar with 4x and you've only worked with 3x in the past the the map is is what is the container that's what's holding all of your data so all of your layers are gonna get added directly to your map but the map view itself is how that data is rendered how it's actually displayed all right it's the view of that map or how you view that map one of the cool things between going from 3 to 4 is this is something that people used to ask a lot back in 3 was I want to be able to have multiple maps within my application you could do it it was just a bit of work you can do it now with for a much easier by having multiple you can have multiple views referencing the same map just maybe in a different location different extent whatever it may be but it can be referencing that saying that I'm gonna come back to Noah you you give here analogy I like it he told me this once he's like this is how I think of the map you and I was like I want you to say that during the and sessions so so if it's if it's confusing to you and it certainly was to me though I used to think about it is a map is kind of like your backyard and so you'd have some data back there like a garden maybe you have a swing set and some trees and the view on the map is like a window from your house so you could have a downstairs window you could have an upstairs window you could have a stained glass window in your garage and your backyard or your map is gonna look different depending on your view or on your window so each window or each of you can have a different view of the same map once you play around with a little bit more I think it gets easier as well so all right so what I want to show you is if we actually take a look let's look at the code go into the index file because this is actually what's what gets loaded up first so within that index file I am referencing our JavaScript API I'm referencing this from the CDN okay so if you're not sure this of the syntax of how to actually do this you're gonna go to the developers help front page just copy and paste we have the same thing equivalent we have the equivalent of that within 3 as well on the front page so just copy and paste and then put that here within your markup okay I'm also adding the J's main J's file as well all right and we also have a CSS file that I'm working with so the CSS is basically just how that markup is being styled all right so I'm basically just telling it hey I want this view div element that I have which is what my map is in I want it to take up the full height and width of my application so it's going to take up everything alright so down here I'm also have this div that I created this view div that's important because that is what you pass in to the container property off of the mat field so it knows hey we're creating this map view we're gonna put it into this view div and within this map view we're gonna show the map with this gray vector base map I could actually go in here and change this out I probably need to clear my cache yeah and you can see here that it just changed it out and this is the actual streets base map layer you if you have your own base maps that you want to use you can configure that and use those as well and all of that's written up within our documentation so this is not probably going to help you guys out all that much though I mean it's huge your zoomed out so far so what you won't want to do I'm going to show you a couple little tips and tricks here so I'm gonna zoom into a location okay so we just got just have Mia the United States alright so if I open up my in this case I'm in chrome can open up your developer tools and if you're not familiar with in developer tools and you haven't used that it doesn't mean you don't have to use chrome every browser has them get familiarized with it because it is definitely going to be of it you're gonna be in it on a daily basis so if you open up your developer tools which I have here in this case I'm gonna go in and take a look scroll up a little bit let's refresh okay you can see here in this main file I have this VAR view I have this global variable that I created okay and the reason I made that a global variable is because I want to be able to run this application and I want to be able to go in and and and inspect certain properties after I run it so I want to inspect some view properties so what I'm gonna do is within the console tab let's zoom in again it's kind of hard with that there we go there okay so within that console tab if I did view dot center dot latitude I could type latitude you'll see here it's given me the latitude of my center location on that view that I'm currently looking at I can do the same thing for longitude as well I'm pretty lazy this makes things a lot easier for me a lot of times you don't want to have to go in you're working with your app you don't know the extent you can set the extent as well when you first when you first create your application you can set the extent off of that view or in this case you can set like the scale and the center location which is what we're gonna do there's also few scale you grab the scale so I've done this before or prior to this so I just wanted to go ahead and just copy this out put it back in my code save it and now you can see that instead of having that full huge extent it's zoomed in further to the United States one thing I didn't mention and I know it's gonna talk about it a bit more in depth was these properties that I set are directly off the constructor itself so that's another really cool thing when working with 4x is that you can do all of this when instantiating your instance of like in this case the map view all right am I missing anything else on that I think we're good okay I always feel like I've got so much I want to save in it I'm not sure how much time okay so I talked a little bit about the knot a little bit I talked about the map view you can do the same thing on the same concepts apply when working with a scene view alright so if you're working with 3d data same exact concepts create that new scene view and then pass the container in and then again you just pass that map in just like what you did with the map view the properties are different but all of that is documented within our documentation so you can just go in there and you know if that is something that you're interested in you can just play around with that and see what works best for you all right so some of the things that I wanted to talk about here and I absolutely guarantee that at least one a person in here will do it if not you have done it already when you work with your applications the module order and how you set up like your require statements so for example require ESRI map require as reviews map view oh I'm actually I'm gonna go backwards just one second I forgot to show you guys this if you go back to the documentation I knew I was forgetting something if you go to the documentation I'm just gonna search for map I showed you how those require statements how do you know what to actually put in how do you know where they where everything belongs what's the right syntax you're gonna get that the very at the very top of each class we provide that syntax for you so require ESRI forward slash map casein does matter in this case because I have gotten myself thrown off many times but the lowercase M and it doesn't work and then we just call these are the preferred aliases you can actually call this anything you want my map this map it's a map doesn't matter as long as the order in how you specify these require statements and you're very of the arguments is exactly the same so if you went in here and said all right map you map and then started to use some of the map classes off of it says that's basically what's gonna happen it's gonna think hey this is a map you're trying to use map view functionality off of the map so if we run it sometimes you get errors sometimes just nothing happens so in this particular case I'm gonna just be able to refresh yeah nothing happens all right and it's just mainly because it's such a basic application but a lot of times you'll get errors like property not found or property not defined you get things like that that's the very very first thing take a look at maybe you missed you were doing some copying and pasting you decided you didn't need to use certain functionality so you removed some of it but you forgot to take it out of the required statements so now your you've got five required statements but four four arguments that you're passing in all right the Dom ready I should probably mention that doesn't have one so don't worry about that that will just be that's gonna be empty that's all you just that's gonna be at the end all right um what else here I think gotchas okay another one is if you don't if it can't find your CSS file so for example let's say I'm gonna add there or not doesn't matter we'll add just something weird in there I changed the URL for the main CSS file so if I go in here oh did I update this make sure I updated this no I didn't okay all right empty that cash all right it still shows it and you may see that sometimes sometimes you'll see empty tiles but what you may notice here is well you know it's the error message I'm getting but another thing is you'll notice is that I don't get the default zoom in and zoom out buttons I don't get the attribution that shows up that comes in by default off of the view UI and it is dependent upon that CSS so if you can't see it it's not gonna show up so that's that's one thing any other ones okay yeah I think that's it so those are the two big ones but mainly that module order just keep that in mind cuz I like I said I guarantee you you will want a person in here will get stuff on that alright so we added our map that's great there's a base map data in there but that's you probably need to actually do something with it you might have your own operational layers that you're working with so you can we provide various layer types that you can use to access your operational layers and bring them in and overlay them on your map there's a bunch of different types that we provide for you within the API reference if you just go in and take a look for ESRI layers you'll see your you'll see all of them listed here I mean they range everywhere from like georss layers to tile layers vector tile layers and so forth okay so basically it's going to be dependent upon the type of layer that you're actually working on in our particular demo we're working with feature layers the thing that I want you to keep in mind it does not matter the type of layer that you're working on the the sequence of events that you need to do within your code is always going to remain the same so you need to load your module so basically meaning go in and require that ESRI layers feature layer or ESRI layers vector tile layer or whatever it is that you're working with you're going to instantiate that so like in this case bar I've got a point layer that I'm using instantiate that and then set whatever properties it is that you want to set within your layer and then lastly you're gonna want to make sure then it's not gonna do a whole lot until you add that to your Mac okay so there's a couple different ways no one's gonna show you but you're gonna want to make sure you require it correctly you instantiate it you set the properties and then you add it to your map alright so you wanna show sure talk a little bit I guess not property right okay so speaking of setting properties that let's dive in real quick there's some cool things you can do it for decks when you're setting and getting properties and one of them is actually defining them in the constructor so at the top here I have some statements that set the properties and individual lines so I create a variable called map I set the map dot base map to be streets the map ground to world elevation then I create a view and set the view dot Center to an array of points and then the view dot zoom to zoom value contrastingly I could just set all those up in the Maps constructor so below I have a VAR map equals new map and I can pass in a series of properties and values there I can define the base map and the ground being the world elevation and the same thing for the view I define what the map is that I'm using the center in the zoom and so of course what I really want to point out is you all seem to have the experience with JavaScript so what we really help will be the guide topic on these things that we're talking about so we have a ton of these guide topics when it's specific to working with properties and this is a very readable way to kind of dive in and get more familiar with getting and setting properties using the foil X version of the API so this code snippets and a lot of really readable English okay so another thing you want to do with properties is watch when they change so if you're coming from 3x you're used to events we used to have map events when we had on click events and double click events and zoom events and pan events all these ways that your users might interact with your web application you all might want to have the application do something with those events at 3x it was a little limited because if we didn't expose an event and the API then you couldn't do anything with it at four dot X you can watch for any property that's defined so all you have to do is create a watch statement tell it the property you want to watch and then tell it to do something so in this lair hero watching for the load status on a layer and the code snippet and then we have a function that's gonna do something once the map is loaded so you might want to have a dependency waiting for a map to be loaded or you might want to have a little fun pop up when someone clicks on your map that tells them you know some useful information and of course we have a whole guide topic about watch for changes and we have a really cool sample here that can highlight the functionality so this is pretty straightforward you're just gonna watch for a bunch of layer added properties to fire off and if the extent gets changed so on the right they have a div whether it's gonna print out all that information and if I you know pan and zoom the map that's gonna get more messages over on the right side so this might not be what you want to do in your enterprise application but it's a good proof of concept that shows you how you can wash for all these different variable properties and how you can actually do something with them so that's a useful sample to have okay so now let's see another demo where we actually add the layer to the map so as I showed you a map before that was a nice light grey based map and now we've actually added a layer of data to it so it's pretty straightforward we're just adding one level of complexity but let's open up the developer tools and see what that code actually looks like so initially it's gonna show the add the index page and if you've ever worked with JavaScript you know sometimes it's not gonna show you the JavaScript files right away so if i refresh it it should come up in just a moment that's a JavaScript folder and so this is what it looks like so it's pretty straightforward I have two points I have and just so you have a frame of reference we're gonna be looking at private school attendance and public school attendance as our sample data for these examples so I have one layer that's gonna be points and I create a feature layer barb private school point equal a new feature layer and then I have a polygon layer bar private school poly equals new feature layer and I just assign it to a URL and this is being hosted in ArcGIS online I can get the rest endpoint and just easily create a feature layer from it and then all I have to do is once the view has been loaded on the use of view dot when statement to actually add the layer to the map so all this information the map and the view is the same as the first example but I'm taking a one step further and just adding one layer to the map and so again this might not be you know your ultimate goal but we're just showing levels of complexity getting added okay now renderers so we added a layer and that was using the default symbology that was captured when the layer was created but maybe actually want to style it so rendering is a way to define a set of rules for how your information is going to be visualized on the map so you typically need one render per type of layer so you can have a renderer for a point layer renderer for a polygon layer renderer for a polyline layer and then you can use a set of symbology that's going to tell the map how to display the data so in this code snippet this is very basic I'm going to create a renderer it's gonna be unique value renderer which means apply different symbology to a different type of data I'm going to tell it which layer to use the URL is going to the feature layer URL and then I'm actually going to pass in the render in my feature layer constructor l vendors I created up here to that renderer and of course if you're interested in rendering and gain more information we have a whole visualization topic that will go much more to detail on how to do rendering and all the different layer types that we have we're going to show you a basic example but you have the renderer and what you want to use with the render is a symbol you actually want to symbolize the data so let's take a look at a some symbology so in this code snippet I'm gonna create a new symbol and it's gonna be a simple marker symbol and again you can dig into the API reference see all the different symbols that we have I'm gonna create my renderer and I'm gonna use as a default symbol this symbol here so basically in a renderer that I'm gonna show you in a minute you're gonna see a couple different classes there for different types of data but it's nice to have a default symbol for any data you have that doesn't quite fall into those categories so basically some symbols and renderers work hand in hand okay and the last thing to touch on that you're gonna see in the sample it's gonna be auto casting so Heather mentioned the importance of modules you have them in the require statement and you give them a local argument name but not all classes in the for dot X version the API have to have a require statement they can be auto cast an auto cast means that the API is smart enough to know that when you create something like a unique value render you don't have to require unique value around your give it name it'll know how to get automatically we're always adding more classes to be Auto castable and the way that you'll know is if you go into the API reference you're gonna see this auto cast image here next to it and that tells you you don't have to actually require it you still can sometimes Heather likes to require anyway it's not gonna hurt anything but you don't have to do it and of course we have a whole auto casting guide if you wanna learn more about that the nice thing about our samples is that if a property can be auto cast you're gonna see a comment in the code telling you this can be auto cast that's why you don't see it in the required statement so you'll quickly get comfortable with how auto caption works but it's really nice because it gives you fewer lines of code and it makes your code a little bit easier to read so let's go ahead and look at the example okay so now we're going to combine the power of auto casting with rendering and symbology so this again is that same map but if you notice it looks a little bit different we've got some nice shades of color there and we have a cool little image for our points layer let's actually open that up and see what the code is doing here okay so the index.html file hasn't changed very much all the magic is gonna happen in the dot j/s file once that loads up we'll go ahead and take a look at it and the Wi-Fi is is a little slow here but you can already see that we've just added one render to it and we still have the same map we have the same base map where we're looking at the same extents we're just gonna symbolize the data a little bit differently so now we can see okay so the first thing we're gonna do is we create our default symbol but we have right up here it's going to be a simple fill symbol and then we're going to give it a color and a width for the outline of the symbol that's our default symbology for information that doesn't fall into our categories next thing we do is create our render and I'll pull this up a little bit more make it easier to see so we're gonna have a simple render and you see right in the comments it's Auto cast this new simple renderer so you could go in the API reference and find a require statement for symbol render but you don't have to the symbol we're gonna fall a sign is the default symbology we set up above we're going to give it a label and we're gonna use something called visual variables which is a really cool way of rendering information visual variables basically lets you create a continuous color ramp from the starting value to the ending value or you can actually assign specific colors for specific values so here I have these stops set up and so for values of point zero four four or less it's gonna give it this color for values of this magnitude is going to give you this color and so on so if you know your data well you can say this is how I want to symbolize it I want to go from like a light blue to a dark purple light blue will be less dark purple will be more I mean that tell it's a very easy story to understand so now I'm gonna have so sorry that was for the polygon layer that you saw before now we're gonna create a renderer for the point layer we're actually use a simple marker symbol for that so I'm gonna create a var centroid renderer that's gonna be type simple the symbol is going to be a pixel marker which I define a URL for so you can find a URL for a PNG file on the internet or you can actually host one locally I mean you can assign that to your data so if you have a really cool image that you worked on for your company or perhaps for your school system you can apply your own custom image to your point value and then you can assign your own width and height and obviously based on the dimension of the actual image you want to play around with that to see what looks best okay so we have our default symbology we have two pretty sweet renders now we're actually gonna add that to our layers so we have our points layer which is a new feature layer we just applied the URL and then we tell it what renderer to have and it's done then we do the same thing for a polygon layer we create a new feature layer from the polygons we give it a URL and we apply the render and that's done we also a few things here like out fields which will be helpful when we talk about pop-ups later and opacity opacity is like transparency the opacity can also be assigned in the render but here we can also do it in the feature layer so then the setup is the same we create our of our map we create our new map view and then we add using a few dot when statement we add both those layers to the map what we're left is is this beautiful representation of private and public school attendance in the United States alright so what that I'm going to turn over to Heather and she's gonna take you through some pop ups all right so now we've have our maps we added our layers we've get every we have everything rendered the way we want it to be that's great and all but we probably need you're gonna want to have some sort of interaction with that map as well so that's where pop-ups come into play pop up it basically allows you to interact with your map your map based on your mouse click so wherever you click you're gonna get a pop up to display specific information that you have specified within your application so pop up you can get to pop up directly off of the view itself and set content directly within that pop up off of the view you can also set your content using the pop up template that you get off of a feature layer so if we take a look at the feature layer if I can type feature layer class and go to a pop-up template you'll see it basically just takes us it takes a reference to a pop-up template and then from here and as you can see based on this tiny little scroll bar there is a lot of information of how you can go in here and specify and set the content that you're working with in our example we're settings our content based off of field information that we have within our feature layer so you can pass in fields you can also set your pop-up equivalent to like you can set in charts you can pass in images that would be a media type of an element that you would add within your pop-up you can set content for your pop-up based off of some function calls that you have so whatever that function returns you can pass that into your pop-up promises once your promise is resolved you can pass that into the content of your pop-up you can even pass in Dom notes to content as content of your pop-up if we take a look so that feature click that I was telling you about it's gonna get in this case we have it gives you the information on your attribute it's also you can also get the location of where you clicked and another thing is is when you're if you're working with let's say the search widget which we'll talking about just quickly you can also set up the pop up template for the results that you get from that search okay and it is fully customizable as well so I do want to show you an example of this one other things here so I talked about all this we can position the pop up as well using there's a doc options property off of the view pop-up class okay so using the doc options we can say hey I want the pop-up to be positioned in the upper left lower left upper right whatever it may be we have a view you eyes provided to you you can set then how you want that pop up to to automatically show or maybe you don't want it to just be hovering around by that feature that you clicked on maybe you want to have it automatically docked to a specific location you can do that as well so let's go in and take a quick look all right so the same app but now let's go in I remember looking at this data and I think Pennsylvania was at the top so it's a concentration of private school enrollment and I have the popups configured to work with the polygon layer so if I click on it you'll see here I have it automatically set so that it docks here on the right hand side and what I have here is I have an array of fields that I'm showing so a few different fields and then I have a couple charts so I'm showing a pie chart and I'm showing a bar chart okay so how do I actually have this written if you take a look at the code all right you'll see here I'm creating a new instance of a pop-up template passing in the title and this is where it sits it's quite a bit if you take a look at the content property you can pass in an array of in this case I have field information so you just specify the type which is fields and then I'm passing in what it is that I want to actually have shown up within my my display so what the field name is and then how I want to have that labeled so I have quite a few fields in here and then I'm passing in an array of media info so in this case I'm working with charts I could also be working with images as well you need to make sure that you specify the right type in this case it's media and then I'm just passing in the fields that I want these charts to be representing these are just two different types of elements you can work with attachments you can work with just straight text and can and and put in some whatever HTML customizations that you want to have displayed you can set all of that within your content and again all of that is written up directly within the pop-up template a CK documentation so if we go back to the code you'll see here so I just created that pop-up template and now in that private schools poly feature layer that we have you'll notice here I have an additional pop-up template property where I am specifying that pop-up template that I just created above here and that's it alright okay yeah so you may want to we just talked a little bit about pop-ups so now we can talk a little bit about filtering out your data you can filter out your data based upon definition expressions so only show data based upon a certain you might set up a sequel query and say where what specify how that data should be displayed based upon this query statement a lot of times again you're gonna want to use these that like if you have large data sets and just want to narrow some things down you also can filter data based out based upon actual feature layer queries itself so if we take a quick look at a demo here I gotta make this smaller that's too big all right if we take a look here at this demo you'll see here I have a drop-down listing all the states if I click on one go to Pennsylvania you can see here just zooms to that location so if we take a quick look at the code behind it and I'm just gonna do a quick search for query I know that so basically what my view is ready I'm gonna watch for one this this polygon layer is fully loaded once that layer is fully loaded I'm gonna query all of the features that's an empty I'm not passing any query in here so this is basically saying query all of features once those features are queried return those results we're gonna iterate through all of these results and I'm gonna get my feature ID and then the state name that unique value so I'm gonna query out my features and based upon this I'm gonna create that Dom that you saw for all that drop-down once I have that I'm gonna go in here and then select whatever state that I've selected I'm gonna go in and set that definition expression based upon whatever the F ID was okay and then view we have a go-to method off of the view that'll zoom to that location all right okay there you go all right so we're looking at some really awesome coding examples of how to do a lot of cool visualizes visualizations and add data to the map there is another way though so how many people here are familiar with ArcGIS online okay a good number of you one of the cool things about ArcGIS online is you can create rendering you can create symbology you can create pop-ups all the work that we've just shown you can be done in ArcGIS online and then you can save it to your web map what's cool about the jobs of api's and you can consume that web map and be done so this can really limit the amount of coding that you need to do on a project one web map can be shared with multiple people or with multiple applications so here is the code snippet that shows you the entire power of working with the API you simply create a new web map and assign it to your variable map and then you add in a portal item which is auto cast so you don't need to worry about that module and give it that long gnarly string and then you'll have a beautiful web application that you created so let's take a look at a demo of what that will look like and believe it or not it's gonna look really similar to the sample that you saw before so prior to the conference Heather went in and made a web map that uses the exact same code that we used before except she use the GUI interface and ArcGIS online and to prove it we can go into the console and we can look at the actual code that was in there and I'll refresh it again it's so much faster on your machine yeah smart all right and you see we just have a couple statements we create our web map we assign it portal item give it that long gnarly item ID and then just add that map to the view and we're done and so sometimes your projects don't involve a lot of coding you can actually do it easily in ArcGIS online or you know using ArcGIS Enterprise if you're using that viewers for your organization so there's another alternative to writing code is actually just to use a little bit of a code snippet open up that again click on some of the areas show the pop-ups oh that's right so the popups are also like a little smaller there in here as well the same as they were with the application that we showed you earlier so you can come in here and interact with it just the same as before yeah cool all right with that I'm gonna turn it back over to Heather and she's gonna take it home yeah just as a side note I always say tell people if at all possible I always go that route now it's just so much easier if all you're trying to do is just bring in a pre-rendered map you wanna you don't wanna have to worry about writing out all the code for the the customizations and the pop-up and so forth I mean look at all of this look at all these lines I have this is just the rendering all right and all you have to do is just pass in the web map ID and specify the portal item number that's it so just keep that in mind just a few lines of code as opposed to a lot more on this end so we talked a little bit about the map interactivity we talked about rendering and so forth now let's actually talk a little bit about working with widgets so all of which it is is an encapsulate specific functionality within a widget or a class a widget class so we have a bunch of predefined widgets that are provided to you within the API in 3and and for the four widgets that we have here and there are gonna be very similar to what you had in three like directions search zoom pop-up sprints and so forth okay in this particular demo we're gonna focus on the legend widget and the search widget so one thing I wanted to mention and touch upon was the coding patterns that you use or and work with when you're working with widgets are gonna be similar it doesn't matter the type of widget that you're working with the coding pattern is always going to remain the same so again you know member back with the feature layers just coding patterns remain the same regardless of the feature layer even see it you require instantiate properties add widgets same exact thing you require the correct widget you instantiate the widget you set the properties for the widget and then you add the widget to the view back with three you had to create a view you had to create a div within your markup and then you would pass that source Dom node property of that widget for the div into that into when you instantiate it your view you can still do that but there is an easier way now we actually provide you a view UI a default view UI which allows you to work and add your widgets just right off the bat so you just view UI dot add you can move them so if you if I have a responsive app you can move your widgets based upon some certain function out here are some certain conditions that you have set or you can remove them you can tell it then so in this particular case we're saying add the legend add the search widget I'm telling it then the location so we have predefined locations that you can set it to as well and again all of that in the documentation with some samples and some syntax to show you how to do that so let's take a quick look I have this open already so what I've done here is I've created the legend widget to show the private school enrollment and then I'm just showing because this is just centroids of the same exact data I'm just showing a legend of this particular layer of that polygon layer and then I have a search widget in here so this search widget it's kind of cool about the search widget is that you can configure sources within the search widget to search either based on a location like a locator service by default that's gonna go to the ArcGIS online geocoding world the world geocoding service or you can pass in a feature layer and set what it is like what what you want to search for within that feature layer so in this particular case I have it set that within my search widget I'm gonna search based upon that state name the state name for this polygon layer that we're working with so if I went in you'll see I've got my autos my suggestions that show up click on Pennsylvania and it automatically zooms to that location and there's a pop up template property that you can pass in that search widget so I basically just took up the took that pop up template that I have from this data and set that then to show instead as the default for that search widget all right so if we look at the code you'll see here I stuck with using the portal item alright it's just to try to make things a little bit easier to shorten that code up a little bit so we're working with that portal item that no it just showed you and then what I have here is I have this map dot layers get item at so I'm getting the first layer within that that map that we just got that we just brought in now I'm gonna create a legend I'm gonna pass the view and so the view you're always gonna see this view property you need to pass that view property in so it knows which widget which view to associate this widget with because you again like I said you can have multiple views within your application and then you have a layer infos property and you can pass an array of layers we're only working with one in this particular case and that's that polygon one and then here we have our search widget so remember I was talking about the sources so I pass in that sources property I'm passing in my feature layer and I'm getting the URL off of that school to polygon layer and I'm using that passing that in for the URL up a feature layer I need to give it out field so it has all of the fields that it can access pass it in my pop-up template and then some of the just the additional information like what I actually want to search based off of if it needs to have an exact match and so forth and then lastly I'm telling it where exactly I want these widgets to be placed so at the bottom left top right so forth so again like I mentioned it doesn't really matter which would it is that you're working with but the concepts are gonna remain the same all right so we just dumped a whole lot of information on you guys at one time I know it's a lot to process especially if you guys are brand new to all of this so before if anything you can get from this step this this this session is where the SDK documentation is and how to go about getting through it so definitely definitely take note of the API reference the samples guide topics it is where you should be going first and foremost if you have any questions we have trainings we've got webinars some some page some you need to pay for some you don't there is a lot of online training that you can do within JavaScript not just our stuff javascript is huge there's different flavors across the board so there's all types of training so definitely just get on in there don't be afraid just play around we've got again Noah talked about the GeoNet forum we've got spatial communities and slack that's a good one so again just and we don't have these additional sessions anymore so again thank you we we take your feedback really seriously and we use that when we are making these sessions we try to improve on them so please fill out the survey we have a few minutes for questions that there is no one else I don't yeah there's no one else coming in after this so we can stick around and answer some questions or if you want to ask a question right now and do it you know if you're if you're not shy that's fine as well so anybody y'all are hungry okay I get it so go get some lunch and thank you for your time to hold me up here yeah

Channel: Esri Events

Views: 7,871

Rating: 4.9411764 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Heather Gonzago, Noah Sager, Esri Developers Summit 2018, Esri DevSummit 2018, Esri Technical Sessions, ArcGIS API for JavaScript, SDK

Id: _sBcbDZKcVU

Length: 56min 55sec (3415 seconds)

Published: Fri Apr 27 2018