ArcGIS API for JavaScript: Getting Started with Web Development

greetings my name is jose vanuelos and i'm here with my partner heather gonzago we are both product engineers for the arcgis api for javascript and we are pleased to welcome you to our presentation for getting started with web development and the arcgis api for javascript this presentation is geared towards those who are new to working with the api or those who have started working with it but are still learning some of the fundamentals of course this does not mean that someone with a little more experience with the abi api is not welcome everyone is welcome because we will be demonstrating some neat features of the api and additionally we'll be we will be building out a standalone application piece by piece throughout our demos our goal is to show how to get started from having no experience with the rhs api for javascript and end up with an application we all work together to build while learning some of the fundamentals on the way the slides of this presentation and demo applications will all be available here so don't sweat it if you feel like you missed some information it happens and you can always just go back through the presentation and source code we provide at your own time in the agenda for today we will take you through the initial setup of the api we will walk you through the first steps of adding your first map to your web application we will also talk about the new api keys that were added in a recent release to access some cool new base maps we will then add a layer to our map followed by adding a couple widgets to our application so you will get some practice on that as well we will then add a render to the data to help visualize the data in the layer more uniquely we will introduce the concept of client-side filtering and show an example of this by adding this feature to our application finally we will take advantage of another widget the feature table widget to give our application a very useful feature i know we have a lot to cover so let's go ahead and get started before we dive into the concepts and code i would first like to take you through a brief overview of your best resource and new best friend the arcgis api for javascript documentation so let me go ahead and introduce you to it you will learn to love it and no matter how much experience you have you will be using this resource the documentation has the resources needed for getting started from the get started page and the install and setup which walk you through your initial setup with the javascript api which we will do together in our presentation there's also a tutorial section where there are examples that walk you step by step through utilizing and adding some features to your application from scratch here we have the api reference where we can see all the properties methods and events that are available available for each class we use for instance let's take a look at the map classes properties that we can use base map property and the layers property which we will be using in our demos we can also take a look at some of the methods as well my personal favorite page is the sample code page where you have access to several sample applications which highlight the features of the api there's pretty much a sample app for every feature in the api for example let's check out the intro to map view sample which we see here so these samples contain a sandbox so you can manually test some code directly on the site before you add the code to your application as well so for instance let's go ahead and change the base map property value from topographical vector to a dark gray base map i'm going to change the centering on the map view let's go to these coordinates we will click refresh and we will instantaneously see those changes directly on the map so this is a cool tool that i personally like to use to test out some small features or code that i want to test out directly on the sandbox before i add it directly onto my applications so now let's pass it along to my partner heather where she will take us through the initial setup with the javascript api thanks jose so my name is heather i'm also a product engineer here on the javascript api team next we're going to talk a bit about the developer setup that you're going to want to work with or trying to determine which ide would be best for you some examples of an ide are things like atom sublime visual studio code it's really just important to pick the one that you're most comfortable with mainly because it's going to be where you're going to be spending most of your development time i personally use visual studio code mainly because i like the easy integration that it has with github and i find that the ui is just it's a little bit more user friendly and it's just easier for me to understand there's a little nifty page if you're so inclined um i have this linked here it's basically just what are the best javascript ides or editors and again it's just you know i'm assuming it's polling someone somewhere so it tells you the um the pricing and so forth so just a little something to look into if you're so inclined all right so another thing that you're going to get familiarized with is our javascript api resources um the github repository that we have so in this repository it's basically just a helpful collection of resources um that you can use to view like if you need to get the typescript definition files if you're looking to do maybe some custom builds of the api maybe if you are looking to work with in this case we have a little callback that you can use an html file that you can use if you're working with oauth but just another basically just another um a set of resources that you as a developer can use to try to make your life a little bit easier as well i'm not going to go into all the details on this but there is a lot of good documentation and the readme files do go into specifics on what you can do or what what you would need to have and work with to get um to get these running on your end okay so next we actually have to get the api um there's a couple different ways to do this i'm going to go ahead and pull up the page in our sdk um this is the first way that you're going to get you to get the api basically is you're going to work with using the cdn so we have this page within our within our sdk for installation and setting setting up the api if you're brand new to everything you're probably going to go directly to the amd modules via the arcgis cdn basically all you need to do in this case is just copy and paste a link to our main css file and to a reference to our latest in this case we are currently on 4 18 soon to be releasing 419. you can go ahead and just point to whichever version it is that you need and we continuously have those running on our side as long as you have an internet connection and you can access this you have access then to our api uh the next option that you can use is if you wanted to use npm to run custom builds whether that's to use if you're going to be working with amd modules or whether if you're going to be working with es modules our es modules is a relatively newer option if you are interested in that basically i would just point you back to that resources github repo that i just talked about in the previous slide and it does it discusses that and the steps that you need to to take to get that up and running we also have a section if you needed to to work with amd modules as well via npm we can also again this is just another one another option is if you wanted to work with es modules using the cdn again this generally isn't something right now that we would recommend just like it mentions here it's really just if you're going to be working with development and prototyping and then lastly if you wanted to or if you need to i should say you can download the amd modules for our api and you can host them locally excuse me you can host them locally on your end on a server accessible server many times you'll see this in particular instances maybe let's say if you're you're in a secure environment and you may not have the best internet access limited internet access or maybe no internet access or outside internet access i should say maybe this in this particular case uh downloading and hosting the modules would be the the the scenario that you would want to take all right so um i mentioned in the previous slide that you know you can go ahead and copy and paste a reference to uh the css location for our um when working with our api there are a couple different options as well when it comes to which css it is that you may or how you want to work with your css we have links here within our development or our developer sdk that talks about specifically about styling and some of the things that you can do when if you want to change or work with updating or modifying how your styles actually uh display within your applications so by default you can just get the main css so as i showed you the previous slide and also in this one if you reference the main.css that's going to give you everything so you've got reference to all of it you may not need that and if that's the case you can create your own custom css using sas we do have um a reference to that and um some examples as well within our styling section uh within the the sdk or on the developer side in addition to the customizing the css using sas you can also go and set your css to be a specific theme usually what you'll notice the most at least with our samples that we have on our within our site is you're going to notice a lot of light or dark by default so if you you know if you go in and you reference main.css it's going to reference the light css you can change it to a dark theme and then these are some of the other themes as well that you can also choose from once you reference this so in this case shows you here how you would reference the theme once you reference this within your html file you do not have to also reference that main css class the theme has all of that it takes care of it for you we will show you um an example of a different theme besides light or dark towards the end of our presentation okay so with that all said i'm going to pass things back over to jose and he's going to go ahead and get started showing you uh some demonstrations on how we can go ahead and get a new application up and running thanks heather i know we are all excited to get straight to the code but we also need to talk about how our app will be written the samples on our documentation contain all the code for the html css and javascript in a single file this is to make it easier for everyone to see all the code needed for the entire application at once in our demos we are separating the files the way web applications normally do we will keep the css files in a separate folder our javascript files in their own folder and the index.html file in the root directory of the applications this helps keep your application organized and clutter-free as the number of lines of code in your app grows the most important part of a mapping application is its map the map will contain the data including the base map and its operational layers the map view and scene view will display 2d and 3d view of the map instance so these views provide a way of viewing and interacting with the components of the map for example with the map view we can change the scale or zoom level in which a user views the map but the data itself will not be modified these views render the map and its layers and that is what makes the map visible to the user the map view will render the map in 2d while the scene view will render the map in 3d the app we are making in this presentation will be utilizing the map view so let's go ahead and get started before jumping straight into our demo i wanted to briefly introduce the new api keys and how we will utilize them with our application api keys are required to access base maps and location services these location services are the geocoding routing service show enrichment and several others the base maps we can access are some of the new api key based maps the list of these base maps is found in api reference for the map class under the properties we'll go to the base map property and as you can see here the list of all the base maps we can use with the new api keys and we also have the list of the base maps that do not require any extra configuration at the moment so we can use these without an api key to create a new api key all you need to do is visit your arcgis developers dashboard and click new api key similar to the screenshot here you can add a referrer to restrict which domains can utilize the key as well we won't be going into much detail in this presentation as there's a presentation dedicated towards explaining these new api keys all we will show in our demo is how to add the key generated in your application to access some of these cool base maps before we view our first application let's go straight into our code as mentioned before this is going to be our folder structure for each demo we have the files divided into our css folder our js folder and our index.html file so this is what our index.html file is going to look like we have our stylesheet here using the dark red theme we have our own css file where we have our own custom styling here we have the javascript api version 4.18 and we have our own javascript file right here so this is where all our code will be going if we look at the body of the html file we will have a div with an id of you div so this div will act as the container for our map view so we will be loading our map here if we take a look at the css file notice that the view div is using a height and width of a hundred percent so the map's gonna take up the entire page onto our main.js file the first step is to reference the map and map view modules in our require statement if you have not memorized by heart the full module names you can always use the api reference as a cheat sheet so if you take a look at a documentation each class will contain the import module string at the top so if you don't remember what that string is you can always go back and reference the documentation to grab that next we add the corresponding function parameters for each module these parameters can have any name you would like to provide but it makes it easier to keep track if we just keep the name of the parameter the same as the actual class for instance this map name we can use my map but if we do that here we have to also make the change whenever we reference the map so you can name these parameters whatever you like you just have to remember which goes with which so it's easier just to keep the same name consistent as your module that you imported for this demo we will be demonstrating how to add a base map that requires an api key so we will need to import the config module we are naming the config modules corresponding function parameter name as as reconfig as there are a handful of names that may potentially conflict with existing web application variables and config is one of those variables that could cause some issues so we just rename it to a unique esri config next we will use the api key property of the esri config and assign the api key that we generated from our arcgis developers account now that we have an api key we can utilize one of the api key base maps so i will use the arcgis dark gray base map i would like to mention that the api key used in this demo has been deleted so you would need to create your own api key and load it into these demos if you do not have a key or would rather wait to create one later you can just swap this base map with a different base map that doesn't need the extra configuration for example instead of using the arcgis dark gray base map we can just utilize the dark gray base map so this doesn't require an api key to load we now move on to the map view where we set our container to the id of the div we have in our html file that view div we talked about earlier we then set an extent on the map view to a region we want to be zoomed to initially on our map i initially set an extent similar to los angeles county in california we could have easily set a center with a specific coordinates and a zoom to a specific level of detail on the base map as well but i wanted to showcase that we could do something very similar using the extent property and not use the center and zoom so now let's take a look at our application here we have our first map with the base map our current extent is the extent we specified on the map view which is near los angeles county so you can just zoom and pan around the map now so easy right so let's move on to some common mistakes that we usually run into when we first getting started with the api as you continue to build amazing web applications using the api there are some common mistakes we all make when we first get started number one we add our modules to use the classes we need in our app but we forget that in the order in which the modules are placed in the require statement is the same order needed for the function parameters so let me show you what i mean i'll go ahead and swap the order of the map and map view function parameters and we will go back to our application and see what kind of error we see now so let's go ahead and reload our application on initial load we won't see anything so getting familiar with the browser developer tools will be very helpful to finding most of the issues you run into since i'm using chrome browser i will go ahead and go into our settings more tools developer tools and we will be taking a look at our console tab so normally when we run into issues we normally see an error in the console tab but in this example where the order of the function parameter names don't match the modules we are not seeing an error so this is one of the common gotchas that is useful to know so you're not pulling your hair and trying to find out what the particular issue is if you don't get any error in your console so we know that the fix for this is just to swap the order of the map and map view which we modified back to its original position that matches the order of the modules so that should be map and we should have the map view another common mistake is forgetting to add a module in the first place i'm guilty of still running into this mistake constantly because i get way too eager to see my code work i actually ran into this issue while making these demos so don't worry if you run into this issue because i still do so for instance let's say we forgot to add the map view all together now let's go to our application and see what we whatever we can find so let's go ahead and reload our application we're going to go to the developer tools once again more tools developer tools and now we see an error in our console there we're getting is map view is not defined this is the error we will receive when we forget to add a module so if at any point while you're working on your application you receive an error where a particular class is not defined it's a big hint that you may not be adding that module in your require statement the fix would just just simply go back load our map view module add that function parameter and we would be good to go finally another mistake you may run into is forgetting the stylesheet to load the css from the cdn for this mistake the map will still load but you will notice that the zoom buttons and the attribution at the bottom of the page will be gone it's easier to remember to load the javascript api but don't forget to load your style sheet as well now let's talk about adding your data to the map in the form of a layer to add data to our maps we normally use operational layers and in this demo we're going to focus on the feature layer of course there are several other layers that you can utilize in your mapping applications and in order to view some of these other layers we can go to the documentation and see the list of layers that are supported by the api as we see here we can use the map image layer the csv layer geo json layer vector tile layer and etc there are several layers that we can use as operational layers however despite there being so many layers the way we load these layers is the same process the operational layers are loaded via the module under the esri layers prefix followed by the layer type so in this screenshot it's the esri layers followed by the feature layer we can access and set their properties in the same way as well these layers can also be loaded whether you are using a map view or a scene view so 2d or 3d so the process of adding our operational layers onto our map is similar and we can access and set their properties similarly as well the only thing that will vary is the actual properties that are available for each layer in regards to the available class properties there are a couple ways to set them number one you can set them individually outside of the class as we see in the screenshot here and number two we can set them within the constructor as you instantiate your class as we can see in the screenshot example here as well you do not need to worry about using a get and set methods because you can directly assign new values to certain properties as long as they are not read only properties there is a section in the arcgis api for javascript documentation that talks about the programming patterns and it goes into some more detail on getting and setting properties a very useful concept that i personally enjoy using is watching for property changes the watch method does what its name implies it watches for property changes of an instance you can compare it to an event listener that you may have on the button click whenever the button is clicked the event is fired and a callback function will execute each time the button was clicked this is the same functionality that can be achieved so you can easily watch for property changes to track changes on the objects you choose for example the map view class contains a scale property you can watch for changes in a scale so anytime a user zooms in or out of the map the callback function for the watch will fire and you can now see the new scale after you a user zoomed into or out of the map so you can easily add an html element to your app where you're displaying the map use current scale letting the users know at which current scale they currently are on the map this screenshot here indicates how we can also watch for a layer's load status property to see when it has finished loading or if it has or if it failed to load we can take advantage of the wash utils class methods to watch for specific property changes updates and others as well we also have a sample where we can see how the watch util methods can be used in your application so you can take a look at this and use it as reference now we move on to our demo to demonstrate how to add data in the form of a feature layer to our application before we jump to the demo i wanted to first give a shout out to the black girls map community for letting us utilize some of their data that we will be using in our demos to showcase the features of the api if you were not already aware black girls map is a community focused group that connects and empowers women of color in the field of gis and enables marginalized communities to visualize various social issues and empowers these communities with information to help them make informed decisions using gis this community is doing some great work so you can all take a look at the projects they have done and are currently working on the data we borrowed is a service containing black owned business locations in the united states the community already has their own application to showcase this black businesses california application we are building our own unique version that highlights the features of the arcgis api for javascript in our demos so thanks again to black girls map and now let's go ahead and load this data that we borrowed into our application in order to add our feature layer to our application the first step we're going to do is to add the feature layer module to our require statement we will add its corresponding function parameter as well next we're going to initialize our feature layer we're going to provide a title for the layer we're going to assign the url var variable that contains the service url to our data in our constructor next we will use the map layers property to add the feature layer to our map and that is it let's go back and take a look at our application now this is our application now with our data in the form of a feature layer added to our map so the data actually is part of the entire united states but since we're focusing mainly on the extent assigned on the map view of the los angeles region now we will pass it along to heather as she's going to show us how to configure a pop-up template to our feature layer and display that in our app so passing it over to younow heather great so now that jose showed you how to add base map work with api keys and add a feature layer as an operational layer on top of your base map we're going to go ahead and show you how you can add some interaction some user interaction um with your data in your map and we're going to do this by you through the use of pop-ups basically what all pop-up does is just like it says here it just responds to your mouse click so you click on a specific feature and based upon that feature you click on it can provide you information um specific to that feature maybe some underlying attribute data it can also provide information um just specific content that you set within that pop-up itself um so there's a couple different ways of actually doing this you can get like it says you can get the information directly within your feature attributes um you can get maybe the location of the feature so that that returned coordinate location maybe you'd want to get that x and y you can get that you can get that returned back in within a pop-up search results so if you're working maybe with like the search widget you type in an area or a specific feature that you want to search for that search result that you get will can also go ahead and be um selected with an associated pop-up as well all the pop-ups the the pop-ups that you create they are customizable we will go into a little bit of detail and show you how to do this um i actually am doing another demo theater with my colleague kelly and we're going to talk about specifically customizing pop-ups and some of the different things that you can do with it we're not going to go into all of that within this particular session but just know that that information is out there so there are a few different ways of working with the the content uh within that pop-up and setting or accessing the pop-up the first thing to remember is that every view has the has a default instance of your pop-up so in our particular case we're working with the map so we have our map view has that pop-up uh property instance directly off of it that we can get access to the feature layer also has an associated pop-up template property pop-up templates actually really um nice because it allows you to go in and configure how you want this these the pop-up to display um based upon you know whether you want to show maybe some of the attributes and i don't know specific field formats maybe you want to show some data you know it's data driven so you want to show some charts within your pop-up you can show images um attachments and you can even customize it too based upon you know mix and match and different types of elements that you want to have within the actual pop-up so if we take a look at the pop-up in the api reference you'll see here that um it gives us a reference to actually what we're in we're in the view so we have the pop-up property within the view class and then from there you'll notice here that we can go in and within that pop-up you should be able to get access to all of the properties and so forth off of it that you need the pop-up template is where you're probably going to go in if you're working specifically if you're working with um data like feature layer data data that you want to um show within your application this is where you would go in and specify and set the configuration for how you want to have this displayed so the main thing to remember when working with a pop-up template um we're not going to go into all of it mainly just because there's a lot of information in here but the main thing to consider or to keep in mind when working with this is that you can set your pop-up template um it's the content is where you're going to be setting all of how you want this to display so you can specifically set it directly in the content itself you know just maybe as just straight html or what you could do and probably what i find to be a little bit more easier to manage at least when you're writing your code is to break it out into separate elements so basically we have you can work with attachments you can work with fields media such as charts um and images text and you can also do create your own custom content too which is a it's a newer way of handling it basically allows you to go and kind of like mix and match and i can show you or i will show you in a moment here where you can access a bunch of different samples that show you different ways of working with the pop-up content but basically what you would need to do is um really going to be dependent upon the data that you're working with and how you want to display this within within your application so in this case um if you just go to the sample code and take a look on the left hand side you will notice here that we have a section specifically that deals with pop-ups we start you off with an intro and work your way on down here with various types of scenarios with what you may want to do with your pop-up and then lastly another thing to keep in mind is that we do allow you the ability to position the pop-up as well so we have a doc options property off of the pop-up class and you can set that within the pop-up so you can tell it hey i i want this dot i want this to be docked um only in this particular part or location of your uh application i want or i i don't want it to be dot at all like i want it to be floating based upon where i click i want that pop-up to show where i click and again we have samples that show how to do all of that so i am going to show you a very quick demo um and basically take the existing app that jose created and now in addition to having that feature layer we're also going to go ahead and show how to create a pop-up on top of that so i'm going to go in here and like we mentioned at the very very beginning we're going to give you a lot of information in this session but with that being said we also have all of the demos and these slides provided in my github repos so you can at your own leisure go in and play around with things and just kind of get yourself a little bit more familiarized with how all of this works okay so we have southern california los angeles we're going to click on one of these locations and we can see here that i get a pop-up that comes up the way that i formatted this pop-up is based on some information stored within my feature layer so i've got some address information and i have the industry that it is i also have a field that provides um some webs the website for this particular business there are multiple features that i clicked on actually since i'm zoomed out pretty far so you can see here that i actually have six that um that hit test basically it's a tolerance it's a hit test it grabs where you click on it and anything that falls within that tolerance is going to show up so we've got six here so if we take a look um i'm going to go to the code behind this and open up that javascript file and what you can see here is i again i just have a reference to this feature layer so everything here that jose added earlier but now what we're doing is we're in addition to that we are also creating a new reference to a pop-up template in this pop-up template we're passing in the reference to the name so this is an actual field the field of um the field within that layer is called name if we were not sure all we would do just go in here take a look at the layer of the service and we can take a look at the fields and in here i should have a name field and i do it's right there so we're going to take a look at i'm sorry we're going to go ahead and set the title of that pop-up to the name of that business and here um since this is editable data that's a word this is editable data what happens is there is a field in there that actually will show you by default it's set to true that's going to show you when the that feature was last edited i don't really care in this particular case to know when that was so i can set this to false and this is where i actually specify or pass in the content to what we want to display within our pop-up so remember how i mentioned before we have different types of elements so i'm going to be in this particular one i am working with in our fields so i am going to show two fields i'm going to show the address field and the type of industry that it is and then i'm also going to show just some bass a basic text element okay and in this case i'm actually working with text that also has an arcade expression on top of it so basically a little bit of logic that goes in and it's checking to see whether or not the um the field that we have if there's a website field in this layer if that website field actually has a valid website and go ahead and show it we're not going to go into detail on how arcade and expressions work within this particular session there are plenty of others that are going to be provided with this developer summit and recorded that you can go back in and get additional information on we do have a lot of good tutorials that talk about all of this as well within our sdk so the main thing to keep in mind here is i have a text element and i have two fields and then lastly what i'm doing is is i'm passing in the template that i just created here and i'm passing that in to my feature layers pop-up template once i do that i can now go in here and click on one of these features based upon what i click on it's going to go take you know specify that content so what i have set within that template so i had two fields the address in the industry and then show me and in this case it does have an associated website with this particular feature so it's going to go ahead and show that i can click on that and it should bring up the page for that restaurant okay all right so we talked a little bit about uh pop-ups now we're going to talk a little bit about widgets so when you hear the word widget basically all it means is that it's a bit of functionality that's just encapsulated so earlier i mentioned the search widget that is search functionality for your application that's encapsulated within um with this specific widget class uh you might have a directions we've got um we've got the search um we have the legend widget we've got a feature table widget so there's a a bunch of different widgets that you can work with um based upon what you actually need the functionality that you need within your application um here are just a few of them so again like you know your editor when i was saying geocode that's like your locate pop-ups so pop-up technically is a widget um so yeah so in this particular case what we're gonna do is um i'm going to show you a really quick uh demo but one of the the main thing as well and this is kind of something that we reiterate throughout this session is that regardless um it's kind of like what jose was saying earlier regardless of what type of layer it is that you're using the pattern for working with the layers and loading layers is always going to be the same same premise goes when working with widgets it doesn't matter what widget it is that you're working with the coding pattern of working with the widgets it's pretty much going to be very similar across the board so mainly what that's going to be is you're going to create um or you're going to require the reference to it instantiate so create a new reference to it so in this case we have a legend you're going to want to pass in these uh the appropriate properties that are needed to work with it so for the most case usually you're going to work you're going to need to have a view so it needs to know what view that widget is associated with and then um in this particular case we need to tell it hey what dom node like what the container which is the dot this div what are we going to associate where is this legend going to be associated with and where is it going to be how is it going to be handled within that html so we pass in that container so what we have here is just basically a legend we also have an expand widget which allows you to minimize and maximize to show various amounts of widgets um within like a like a broader container and then on top of it what we have is the view has um you can work off the view ui and basically what that does is it's just an easy way of allowing you as a developer to like it says here just adding and removing um moving widgets around it makes it a lot easier um i don't know them kind of dating myself here but if you worked in prior versions back in three we didn't have this um it was a little bit harder to do that so here in the forex api the in this particular case all we're having to do is just say like hey view ui ad pass in the name of the widget that you're adding and then where you want that widget to be located within your application so we're going to go ahead i'm going to show you a very quick demo on how to add widgets to that existing applications that i or to that application that i just showed you so in this particular case um we have it's very large because i blew up my um i made my screen a little bit larger here but we have the expand widget and by default i have it set to automatically be opened when i open up my application so this is the expand widget right here in the upper right so if i it's right now it's expanded i can collapse it so if i don't want to see things open that up and what i'm seeing here right now is just the legend so there's a legend is associated um with the view and in that legend um i have the uh the correct feature layers that i want to have displayed based upon what is in my application so again if we just take a quick look at that code behind this what you're going to see here is i've added a couple additional classes reference to these so i've got the esri widgets legends and expand okay so again i'm just adding on to the existing code that we already had prior to this so we have our pop-ups we've got our feature layer in addition to that what we're going to do here towards the end is we're going to add this legend and add that expand widget so we're going to create a new reference to the a legend we're going to pass in a reference to our view and it's going to take all of the layers and everything that we have associated within that map within this view we're going to tell it hey i want you to set the legend in this div that i've had set up outside of this called legend div and then in addition to that what i'm also going to do here is i am going to create an expand widget basically setting the same type of properties here i also want it to be automatically expanded by default and then lastly i need to add that widget to the view so remember how i said before that the steps pretty much going to remain the same you instantiate it you set the properties and then you need to make sure that you add that widget to where whatever location it is that you need within your view so we are setting the expand widget to the top right and that expand widget already is going to have a reference to that legend all right so i've talked enough i'm going to go ahead and pass it over now to jose where he is going to talk a bit more about querying the data thank you heather so let's now talk about renders a render defines how to visually represent each feature in a layer it helps a user get more information visually out of the data they are seeing on the map without having to know the attribute information for each feature there are several types of renders available from the unique value render class breaks render heat map render as well as a few others each layer that is published as a service contains its own default render so the layers in the api whether it's feature layer map image layer etc will contain a renderer property that contains the drawing information for the layer if you don't believe me let's go ahead and take a look at the service url for the point layer we added to our map so as we can see the layer has its drawing info where we can see the render and in this case it's using a simple render and the symbol that is using is a esri picture marker symbol that's what the s3 pms means so the picture so the symbol for each point in this layer is using an image and we can see that image url here as well we can override the default render of a layer by assigning the render property the new render we created in our code for instance the screenshot below demonstrates how we can create a new unique value renderer and assign it directly to a feature layer this this screen capture demonstrates an md constructor but in our demo we will demonstrate how to set up a unique value render ourselves to visualize our point data differently each render contains its own symbol for instance the point layer we just looked at contained a simple render with a picture marker symbol as its symbol the symbols for each renderer will also depend on whether the geometry of the features in the layer are point polylines or polygons we cannot use a picture marker symbol to symbolize a polyline and vice versa we cannot symbolize a point with a polyline symbol the render also has a visual variables property that allows a feature symbol size color opacity and rotation to change depending on the field value specified for each feature for instance in the screenshot below we're utilizing the size visual variable and the field we're using is the wind speed so the size of the symbol for this particular features will depend on the wind speed field of the feature if you would like to learn how to use visual variables in your application the following documentation will be very useful as well as some of our sample applications that we have for visual variables as well so this next feature of the api auto casting is not specific to rendering and symbols this is a concept and feature that's available for the entire api and its properties so auto casting is used to cast javascript objects as arcgis api for javascript class types without the need for these classes to be loaded in the required this is helpful to reduce the amount of code you write and i will be showing you an example of auto casting in our next demo as we autocast the unique value render if you are not sure which properties can be autocasted you can just take a look at the documentation and look to see if there's an autocast tag for the property you are looking at you can read more about auto casting from the documentation page and the programming patterns but we will also get our hands dirty and utilize this in our next demo so for instance here we have an example of code that we normally would write to import each individual module that we're going to be using in our code and now we see how the amount of code that we reduce by using auto casting so all we have to do is actually just import the feature layer so again we're just going to show an example in our next demo now let's go ahead and add the unique value render to our feature layer as we can see here we are taking advantage of the auto casting feature to initialize our unique value render without having to import the unique value render module in our require statement all we have to do is create a javascript object assign the unique value type and add some of the properties that we would like to specify that are part of our unique value render the unique value render allows you to symbolize features in a layer based on one or more matching attribute values from a specified field the features with similar values will be represented with unique colors fill styles or images we need to specify the field we will be using in the field property in this case we are going to be using the industry field each type and its associated symbol must also be defined using the unique value inflows property we first set our default symbol so that any feature with an industry field value that we do not that we do not specify in our unique value infos property will default to the simple marker symbol with the light gray color so here we are specifying the field values with our corresponding symbols so we're going to be taking care of features that have an industry field value of accessories and clothing arts and culture auto food and beverage and so on we are also adding a label to display in our legend widget that heather showed us how to add these are just some of the feel values that we're going to be accounting for so now let's directly assign a render to our feature layer render property right here and now that that's done let's take a look at our application now with our render applied this is our application now with the unique value render applied as you can see by using the legend and the symbology of the points in this layer we can already identify which features correspond with a particular industry this gives the user valuable information immediately without having to interact with the map and its features we will now move on to client-side filtering to be able to filter out the points that we want to just focus on in our application so let's learn about filtering data we can achieve client-side filtering using the feature filter and the feature filter defines parameters for setting a client-side filter on a layer view and the layer view represents the view for a single layer after it has been added to either the map view or a scene view with the layer view the features it displays will be stored on the client side so any filters or queries to it will not require a server request which could additionally improve some performance you can set filters by attributes time geometry and geometry with distance only the features that meet the requirements specified in the filter will be displayed so let's jump to our code to see how we can add client-side filtering to our application let's take a look at the html file and i went ahead and added a select element or drop down each option in the drop down represents one of the field attribute values from the unique value inflows we specified we have accessories and clothing arts and culture food and beverage and etc this is the drop down we will utilize to select the features we want to filter and view on our map now let's go to our javascript file so in order to access our layer view we utilize the view.when layerview method so whenever the callback function here gets called we will have access to that layer view we added an event listener on the select element so any time a user changes the option in the drop down this event will be fired and the following callback function will be called for the layer view filter down here we will utilize the where property to filter the features based off a sql query expression we generate in the first if statement we check if the user selected the all option which has a value of one is equal to one this means that all the features will be displayed next we check if the other option is selected so that means the features that are not specified by the drop down options will be the only ones that appear this sql expression is generated from the generate other sql string function that we created down here we won't focus on how this code is done but you can review the code on your own time finally if a user selects one of the specified options the sql expression will return only the features with the particular industry field value that is all we need to achieve client-side filtering so just to summarize we need the we needed the layer view to filter out its features on the client side with the sql expression we set on its filters where property this is now our application with client-side filtering if we take a look at our drop down we can filter by specific industries accessories and clothing arts and culture and we're only seeing the features that satisfy the query we set on our layer view so to prove that client-side filtering does not send additional requests to the server i will open up the developer tools and go to the network tab here we can monitor monitor the server requests that our application sends out notice that there are no server requests to the service to fetch any features after each filter we perform to show this network tab is working i will zoom into the map so we can see the app fetch some base map tiles we are almost done with our application thank you for hanging out with us this long let me pass it over one more time to heather so she can show us how to add a feature table to this app and finalize it over to you heather great so i'm going to finish up here and briefly touch upon just one more widget um we talked a little bit about how widgets work you know they all pretty much follow the same uh basic steps when working with widgets you know instantiating it setting the properties adding it to um to the to the view um in this particular case we're going to work with our feature table um the feature table it's not new it's a relatively newer widget i would say um we are constantly um improving and working on it um it's it's got a lot to it let's just say but what the feature table actually does is is it provides us or it provides the the audience away the audience of your application it provides them a way of viewing the attribute information of the feature layers that you're working or the features within your feature layers that you're working with within a tabular or table like tabular format so if we take a quick look here i have just a very basic demo and again it's the same exact one we're just building upon it we have um this feature layer that was just you know we have a renderer now and everything set on it in addition to that though we have added um the feature table widget so this widget is basically what we're seeing here on the bottom of the screen within this application okay so what we have is when i set up the or passed in the properties for this feature table you can specify and just say hey i want you to take in you know take this entire layer and it will bring in basically all the fields or you can configure that and make it so that it only shows um specific fields that you set within the um the feature tables properties so in this case i am showing i want to see the business name i want to give it i want to see the address perhaps maybe the website industry and then the phone number i do have the ability to go in here as i can sort the names ascending or descending um in addition to that i can go in here and i can show specific columns um or hide them yeah all right so very very basic um if i go in here let's just say i click on one of these guys you'll notice here that it automatically will go in and select the under the the associated feature that i uh selected or checked on here within the feature table one thing um let's go ahead and i'll just show you the underlying code it'll make things a little bit easier alrighty make that a little bit bigger okay so we're adding the feature table so we have that feature table there getting a reference and then here when the view is ready we are going to create a new instance of that feature table pass in a reference to the layer and then here this is where i am specifying what fields it is because i don't want to see all of them there was quite a few and i don't need all of that in there so i'm only telling it hey i want to see a few of these fields and then i'm going to set the container so i'm telling it where i want this table div to to be displayed within my application one thing to keep in mind and this is important is that you need to make sure that you set the view within the properties some widgets i generally like to do it if the view is there you should basically you should associate it um not all have that but in this particular case if you do not set the view that feature highlight will not work because it's not going to know how to associate that selected feature which um which view it needs to pass that selection to so what we're doing is is we're calling the or we're listening for the selection change event on that feature table and when it calls that we're going to go in and we're going to zoom to those selected features and that's basically it there is more that you can do with it um again um i don't know if you noticed or not i had a pop-up earlier that that if i click if you click on this you can actually wire it up so that if you click on a pop-up you can have that associated feature the record show up as selected within your feature table we do have a sample within our sdk that actually shows how to do that if you go to the sample code and go to pop-ups and feature table widget with pop-up interaction this will show you how you can go in and basically toggle between the two um click on one and um it will have the associated um um row within the feature table selected as well okay so we just gave you guys a ton of information um and i know that's a lot to process all within one hour you're probably going to have a lot more questions as time goes on so thing to keep in mind is where can you get additional information later on down the line if anything that you get from this hopefully just remember please bookmark that sdk documentation because that is going to be where you're going to go to basically find your samples to get basic uh conceptual types of questions answered and any of your api reference information properties meth member or the members of it methods events and so forth um we have related trainings webinars so go in just it's all listed we'll have everything there it we have that um especially now in the days of covid everything is online so um please just keep track of what we have within our on esri.com um we do have you know just outside of us there are um online training some free some not so free for just basic javascript and then lastly and this is um i can't stress how really useful these forums are we have the geonet forum which is ours the esri one and this is where basically people will come in and just ask basic questions like hey i'm trying to do this i'm not quite sure i've you know maybe you can post some code someone will come in there and help you out you know maybe sometimes people just come in and they just like to show off a little bit of some of the really cool things that they've made and that's that's great too i um i go in occasionally we'll check things out see maybe you know sometimes we'll find bugs you know things that were you know maybe something that we just didn't catch in a release and a a user like yourself may go in here find it say hey i'm not sure if this is supposed to be acting this way you know is this a problem is this a bug sure enough you know this is also a good place generally we like people to go through support for that type of stuff but a lot of times we'll see issues pop up here too as well and that's fine um so yeah so definitely just make sure um take note that there is the communities page where you can go in here and get some of your questions answered um the stack exchange that's just in general you know you can google something the stack exchange is generally one of the first things that pop up you've got the spatial community in slack so there's a lot of different places where you can get some additional information if you run into some issues so um we gave you a lot of info we really appreciate your time if you don't mind please provide any feedback that you have for this session there should be a link below this um again we appreciate it and um hopefully uh we should hopefully we can see you guys in person real soon thanks

Channel: Esri Events

Views: 26,224

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System, Javascript, Getting started, Web development, Debugging

Id: z9kIZjUjsZ4

Length: 68min 40sec (4120 seconds)

Published: Fri May 21 2021