Creating a Smart 3D City Web App

welcome everybody so this session called creating a smart 3d city web app and my name is Pascal I'm director of the SE R&D center in Zurich where we develop the 3d part of JavaScript API team your CD engine and also some few other apps and here with me is Joe Schmidt he is the development lead on our side on JavaScript and yeah so we will talk about how we built and this custom planning application using the child Script API and you might have seen it in the plenary session very quickly and we will also explain a bit like how how this the one hand how how how the whole data processing worked and on the other hand yeah how this work influenced the whole careering and filtering mechanisms which we have now in the JavaScript API so but before I start um yeah some credits so Joe and I are actually and presenting stuff here for for these two guys so on the left side is Lisa she was actually as intern working on this and we hired her now as product engineer so she has an urban planning background and she did all the work here and Xavier he's our back engineering lead he actually and he was he was supervising this and thriving it so oh yeah we are presenting basically their work here so yeah so or from an overview point of view where are we here the one hand we I we first talked a bit about like how we used Pro and see the engine to and publish the stuff in Portal and the required layers for this term planning application then on the other hand we talked about how we used jsapi to create an application so let's have a look at the application and so Joe is going to make some live demos afterwards and I shall smoothie here which basically shows this application called sea fruit so just that you get before you access start get an idea of the whole thing in more detail and also the motivation behind it from an urban planning point of view so what you see here is the city of Surak and so I think these are about 300,000 buildings and here and there we have practically per floor we have spaces so-called spaces where we have each usage so like we do teach meaning like residential or the office or is it industrial storage these kind of usages so means it's quite a lot of features which we have here and what you see here now is some unique value renders applied all in real time on this and now you see you can go click here on this on basically the legend on the right side then and in real time it highlights it highlights the corresponding and class of of features and the wins we really wanted to have this interactive workflow where actually also people which don't have a big GIS background can go and really go in and explore a CD and especially / - what's interesting is is the is is actually a what are the usages of these of these buildings so here's a typical example an urban planner is doing so typically first let's let's go into more detail here at least application so here you can go and you can select just a building so before we did we work on the whole city so now we just selected one building and the meantime we also is coming up there's there's some more highlighting stuff but this is more like for the for the session tomorrow for the road now but they are you so here now I go in and see for this building I see the statistics on the right side what is the usage can I can look at the stuff in more detail so the city of Zurich really has its per per story they know like okay 30% is parking 50% is residential so they know this they have this information but this is also part of this talk is that there are different area city has it in a different way tip so here you also see the actual gross floor areas and so you see small and the distribution of spaces some bigger spaces and smaller spaces etc so here now and what Lisa is doing here is now she's actually now inspecting this open space here so now she we have multi selection so now five five building some now she selects more so here we have this open space called the limit block in Zurich and when you want to really figure out from our planning perspective does doesn't open space work means is it is it liveable it has a high quality of life it's about like how many people are there is that it lives are there people walking around and to actually figure that out what drives this are basically the moment pop stores we like small stores you want to have time you want to have many small stores on the ground floor so currently what they do to figure this out is they currently do is and they want to figure out like how good is this from from this kind of quality quality of living point of view how good is this pace what they do is they bet we take an intern and tell him like go to that space and then walk around and and and write down the the number of moment moment top stores you see there that's seriously that's that's how how they do it actually Lisa had to do that before she saw us so so that's not really how other currently is because it's this data is so distributed in different departments nobody has access to it's horrible so what we see now here is after we selected the surrounding buildings we go in and we just select the ground floor because the ground floor is of interest for for the quality of the of the of this space here and now now we go in and we select only the retail and to just show me the retail ones and now we can actually even go in and filter small retail stores so because you actually want to have small retail stores like again this moment pop stores now you see there are quite a few here around space so this is why you actually can say just by looking at this kind of data that and this is this is a livable space and that's a good plant space and this is also what the herb diners - they go in and say like we want to have more retail here or we want to have more office here or motor residential so so that's kind of the idea of this application and and yeah it's really an and we showed this and - a few urban planners and they were all super super excited because there's really nothing available like this yet and especially what you see here this is all in the browser this is um and it just works it's just it's very simple to use and it really gets access to an understanding of the actual like like why like a for an urban planner how does the city work here you see the one big building in Zurich prime tower of course most of it is office and and yeah so so here's see the the different spaces and here again like it's interactive selection the I am charts which are at the same time I use this legend and selection tool so yeah I hope that gives you kind of an idea of this of this application we did so to to summarize so our motivation for doing this was so we did this as an R&D project in Zurich on the one hand we also because a city engine we work mainly this the city urban planning department and that they have so much data however I know we have all the information models and and and in ski masks however in the real world they actually they typically they don't use that stuff so they it's always kind of like sometimes they take a bit of that and the technical is that so we were wondering like how can we combine stuff there the other thing was really like the urban planners who didn't have really access to that kind of data easily so really provide easy access to this and also confront term damage it's such a tool then because currently they say we don't need this because they don't see that it's so it's theirs that they don't know that this would be possible then and going kind of in the same way is is what I mentioned already that the stuff is not accessible also for the public of course it's an accessible internally we use that also internally basically otherwise one of the our tests our tests how we developed new JavaScript API teachers to F example making the query fast and and all this kind of stuff so this is kind of like how we work internally in ESRI like the others kind of try to also make at the same time I live is lob something we try to make some use cases and real-world use cases and then see how it how it works so the workflow and yeah we have some data set of the cities let me do some data processing with all kinds of tools I'm going to talk more about the detail we publish the data this goes to portal and then afterwards and Joe will talk about actual application so I will talk about about five minutes about the whole data processing part and and and here what we what we did so we did actually we tried three data sets down and the at Zurich Vancouver and two bay and all were completely different data sets Surak was the whole CD explains and they and their they really have per floor data for for usage this is like there are not many cities a Chester Vancouver and they have so this is from as a Canada it's a beautiful data set thank you for real estate but there we have rooms and every room and as a type like no elevator or the camping so it's not not the actual permit on usage it's the actual room type but it's a huge data set with lots of lots of yeah Bruce and then we have two bay which which is more kind of a BIM case where we have very detailed and 11 buildings which very detailed geometries and where we kind of ride out is kind of use context also so yeah so the application by the way is called see-through and and I'm going to talk now a bit about the data processing part and so yeah be warned it's not easy something so but you see here that we are really doing these processes to actually really figure out what are the pain points and then try to fix it so here now we basically present you the workflow like what we did so basically we have we have some led to and led to and models here on the left from from for for the sick of Surak then what we what we needed was we needed per floor features and then and then yeah once you have to put four features we actually really need to put attributes in there so how did we do that going basically for melody - - and some some attributed spaces so first we used Pro to basically clean up the data and and then actually with some SQL stuff they had the data number of floors was in another City of Surrey cat addresses so on but that was in another - database or actually it was it was just a database in Excel action so we had to make all these kind of table joins and stuff but then at some point you have you added num we were able to add the actual real number of floors there which was to the led to data set so this is very already very important like there are these led to things then there is the number of floors where we also not connected so this is your problem number one and however yes you can do that then we use CD engine to vertically and clean up and the cherry trees then another problem was that these that these shapes were below ground so I'm going to talk a bit more about that and so you have you have to do some magic with the vista on the ground floors also cetera then so we we managed to do that and then we went back to probe and and there because we don't have a table join in see the engine so then we actually added the per floor data which then there's another somewhere database of the city of Zurich where they actually know in the third floor of this building there is 40% is is used for residential so at the very end it was just the table join but again so then once you have a data per floor we then have to split the floor into n into features according these percentages and there we actually I think I hope we fixed up now so there had a program in pro so we had to go to see the engine again so back to Syria splitted into floors and then again got back here and the late table join Mary actually at the actual attributes the usages to every feature so yeah you know that's not a deal we work on it but this is just like how it is in cities today and of course we try to improve that and and make this these work flows better and here's some details and so here you see the led to which city of circles we added the data so we have upper and lower slower data then in CD engine we what you actually have to do is we have to figure out where is to where it's actually the grounds because this led to data sets which they had they were just like going like twenty meters below they didn't care about the actual underground floors they just went down so again this is just this is in every city different so they purchase this data from somewhere and and and their data just went down because I whatever I don't know and so yeah we had to cut it at the actual grant for level then we had to yeah so here this detection is cutting a visualized and then what we did is we had the in the data in the in the database we knew the number of underground floors so we then what we do is then the top we just take the existing energy to and split that then on the bottom we really extrude the number of lower floors and that's then how we got basically our approximation of the reality so this is all to the engine then again then back to pro and very than this did and they're not very angry ended up doing this so we did this so so this was sort of Surak example every asset every everything is a bit different so for Vancouver for Vancouver yeah we had to do some once about it on some other tricks and stuff here and there and and to buy that was actually very well prepared actually by meth dealer here so there we didn't have to do much actually so so yeah so now we have this um this data set here in as multipaths two databases and and then we need to publish them so and again this was I think more than half a year ago so in the meantime that also got improved a lot so yeah we we had we had to publish it using web layers back then because these were the only ones which which come with a feature layer so and back then so and only on portal um so but in the meantime and all this stuff is on access online I think even this is similar packages and yeah we're we are working on this that we have more and more feature layers like so means you always many other seem layer thin layers are good for visualizations and they are fast detector however if all the stuff which Joe is going to show not all of it most of it requires a requires a feature layer where you actually really have the data and and this can be no to speak of course be connected to your geo database and so yeah um what we then so here you see the the actual web scene then which was published with pro so yeah that was basically the whole preparation step and any kind of shows like what what cities are also the challenges which we as as we have to and explain to cities like what they can do and what they have what kind of data they have and what they can do with this so yeah and that was my preparation plan and I gave it to Joe I'll just briefly start here but then I have to move over for the demos and so I'm just moving and I actually can talk about that actually I would like to start with that so here's the application that you've already seen and it's actually kind of split up into component when you I mean I don't know how many of you built actually I'd like to know how many of you have used the JavaScript API for X in its room okay all right so when you build a larger application you have to kind of think about how you want to structure your code and this is kind of I would say a medium small medium application but it's split up into several components and each of those components is something visually on screen I'm going to go through them but they also reflect a module in the in JavaScript application so it's kind of component that area split into components the application the the main one is the the viewport this is essentially what the JavaScript API will draw for you so that thing is the scene view that you instantiate in a JavaScript API and then there's a number of UI tools grouped around it there's some that are overlaid into the view for example the search window on the top there and some of these are actually available as which is from the JavaScript API including the search widget this below-ground button really briefly what that does later I think it's also a JavaScript API which is actually this but it's used a little differently as its intent it's you I think it's a base map switcher in the JavaScript API but here it's used for something else oh sorry and then on the top right there's the selection which is which essentially just shows you how many how many buildings are selected and then the visualization widget which has charts but also controls the way that the selected buildings are rendered in the viewport so as you click the button like usage or or area you've seen that the visualization changes in the viewport as well so we just for the software architecture decided that the visualization which is the guy that tells the view how to render which building and finally there's a filtering widget that allows you to narrow down after you've selected a building not allows you to narrow down the selection you in further alright and so like the previous slide there's a couple of components that went into making this application the JavaScript API for X and then a.m. charts for for all of the charts there's many chart libraries out there that you could use we just picked up a m charts because they look really nice and we had it available but I'm sure you could be happy with with many other alternatives and then some help for sliders and for fonts and layout alright so actually for the remainder of this session I'm going to talk about code and it's mainly going to be about the scene layers how you use the scene layers to make these things happen because the this is kind of essential I mean if you don't know the scene as Pascal as already mentioned it's a it those are layers built for visualization in 3d originally order the first layer that we had was the mesh layer so this was to where this is the way to get 3d objects 3d meshes into the JavaScript API and but now we're extending it with other data types like the we also can do points we have the point cloud indicate point clouds into gradient meshes but in this presentation I'm going to talk only about the 3d mesh or 3d object scene layers so when we look at the application as you've already seen in the video one central element is selection so users can select one building or then they can extend our holding shift they can extend a selection and add and select multiple pinning buildings and and one thing you'll notice is that the selected buildings are rendered differently and only the currently selected buildings are affected by the the visualization tool right so if I unselect it actually it uses it applies the visualization of the visualization tool into every building but also these statistics if we look at the statistics computed here like for example number of units you'll see that grow as I add more building to the selection so the visualizations will really kind of operate on a current selection and but then you still have the other buildings in the background all the unselected ones and there are multiple ways that you could implement that but the way we are these on Javier chose to implement it for for this example is that they actually added the same data set twice they created two scene layers and point to both to the same portal item or same URL and one of the scene layer is is a it's designed to hold the axis which means in selected buildings or the selected features and the other scene layer is all the inactive ones so and this is where the first feature comes in that that I would like to highlight this is the filtering because now we want the active scene there to only show those buildings which are currently selected and the background or past they've seen there all the other buildings and that's done by simply setting a filter for the currently selected buildings on the active layer and then the inverse filter on the on the passive or on the background layer ok and then talk a little bit about the visualization about the rendering kind of the coloring of the units as you start the application up or as long as you here in the visual visualize by none it just uses a simple render so the active layer assigns one symbol essentially one blue fill symbol and the passive layer the background layer always has this kind of gray or white simple render and fill symbol that is applied to it now as I switch to usage you can see that the buildings are colored by usage and we use a unique value render to to obtain that I can show you the SDK sample actually that shows that one nicely so this is from the JavaScript SDK one of the samples that you can look at it's a very simple sample we have buildings and they have the usage type in this bit weirdly named attribute and then what we do in the API is we create three different symbols one symbol for residential and I am sorry forgot to mention this is actually using a feature layer and we exclude the buildings in that case but that's important to note that you can use the simple the renders that you can use for feature layers you can also use them for scene layers and similarly with the symbols there's actually for the scene there there's only a single symbol that you can use that's the mesh symbol 3d combined with the fill symbol layer that you can assign a color to the buildings so to the features but when you use a unique value render like this one here you can say that I want the color or sorry I want the features to be symbolized based on an attribute so you give it a field name and then you can say for each field value what should be the symbol that I want to assign to that feature and in this case we have these three different types we have residential which will create an orange filled symbol condominium which will create this purple filled symbol and then anything else this is the default symbol will be will be rendered in green so that's the that's the code that we use also in see-through to assign different colours to different usages and then when you select area sorry I should switch back and forth when you go to the area visualization the render that we use is a simple render but we use this concept of visual variables this allows you to color to define the color of each feature based on a continuous color ramp for a specific attribute so I can actually see that okay you can change the range within this color at within which this color ramp happens so now it's from zero to three hundred and seventy square meters we go from yellow to like this kind of darker blue and if I change this if I change the filter it will rescale the color ramp to go between zero and eighty and it allows a filter here remove all of the features which do not fall into that category but that's done using filter that's not the render on the section after you could do the render as well but that's not the point sorry so what's done there the way this is an employment into this code is as I said when you switch to the visualization by area we again assign a simple render with a mesh symbol three-e-and-a fill symbol layer and we don't actually give any parameters to the fill symbol layer that would typically not look like actually it will take a white as a default color but then we create this visual variable we say this should control the color and the fields that we want to color by is the area and then we define two color sub one for the minimum area that we want to visualize the one for the maximum area and we give to two colors at the two extremes and then the render will interpolate the color between the minimum and the maximum value for the visualization all right so I've already talked about it a little bit but the filtering is one of these new features that we've introduced in 4:3 based on the research that we did with this application and it's actually surprising like this is an extremely simple feature all it is it all it does is it adds this definition expression property to the scene layer which you may already know from feature layer that's exactly the same there but this is actually huge enabler for these types of visualization so this we notice that this was a very important feature it's I guess it's easily explained you give it a sequel expression in here and where you can use the attributes of the features for example here I'm saying that I want all the I want the scene layer only to show the features which are of usage type residential and have a total height of smaller than five meters or feet or whatever feet would make sense I guess whatever the data happens to be in your in your database you can then like so this is shown here you can do this in the constructor this will mean that like initially as I seen their loads it'll already be narrowed down to that selection but at any point in time in your application you can just assign a new definition expression to the layer and then it'll automatically update immediately update so here this is like switching out and actually showing the now show in the buildings that are larger than 50 meters and this is the example that I was referring to before this is how we made how we use to two layers and make them show the entire data set only once but the active layer will contain some feature and the background layers will contain all the features that the active layer does not contain so again this is just a simple sequel expression you can you can look up the documentation for future layer for foreseen layer how to do that and here it says okay in the active layer I want to have only this build with these two buildings two buildings with these object IDs or building IDs and in the background layer I want all the other buildings essentially so in see-through the filtering is used for selection in the sense that I've just told you about in the sense that we have these two layer and one layer contains its selection the other one the two non selection and we use filtering to kind of assign the features to one of these layers you can also filter by floor in see-through it's used to filter by floor so I haven't shown this but it's been in the video you can see here specify that I only want to see all the units of a specific floor you could filter by specific usage only it's probably more visible when I want to switch to usage here and then you can filter by by the floor area so these are the kind of filters that we have in see-through but obviously you can use this for to filter any of your attributes like whatever question you'd like to answer with your application and whatever values you have available in your data you can you can use that as a filter basis some other use cases or other ideas for uses that you could do with this filtering is the one is you can mask out buildings from a scene layer let's assume that this kind of a typical use case is this redevelopment scenario where you have one data set that contains all the buildings of the entire city and now there's a certain area which is going redeveloped and you want to evaluate for example different scenarios so one way you could do is you could take that data and publish a specific scene layer that contains only the buildings around it but not the ones that you want to actually swap in and out in the application because it's different redevelopment scenarios but that may take a lot of space because these scene layers can be huge if you have like thousands or hundred thousands millions of buildings so the other way to do it now with the filtering is you can just filter out all of the buildings from that sort of base map scene layer that you are going to tear down and where you want to show that the new buildings and so and that's what it looks like and all the red buildings are removed and instead you add in a second scene layer that contains only buildings in that development area you could also use this potentially to have like you could if you want to bake multiple scenarios into one scene layer and then use filtering to switch between them but I would actually advise I mean there may be some use case where it is is great it's probably better to just bake individual or create individual scene layers for each scenario and then just turn these scene layers on and off you can just toggle visible on the scene layers that's better because one of the things I need to mention about filtering is that this is done on the client side so it will always download the entire data set or at least the data set for the current view that you're in and then only at in the client side decide that oh I'm not going to show that and that in that feature so you cannot use filtering to optimize the download preferment performance of the of the scene it will always download everything and it also means that if you're if you have a huge scene layer but you only show a single feature of it it may take a while and until that feature appears because it's going to load all the data around it and you don't know at what time that feature comes in all right so much about filtering now let's move on to queering this is again a new feature in the 4:3 JavaScript API and there are four methods query features query future count query object IDs and query extent and they are available on the scene layer and on the scene layer view now since many of you I haven't actually used the 4x JavaScript API this is the layer and layer view is a new concept that we introduced we did this because you can use the API both in 2d and in 3d and we wanted to have like one part of the API that is common among among both among 2d and 3d and that is the map and the layer that's kind of here data interface you create a map and then you add layers to it and the layers define what kind of data that you want to load like to point to a certain URL you can put the definition expression there you can actually put the renderer there but then for every one you actually want to see that map so if you just instantiate that map it doesn't show anything that's just a data container so when you actually want to see something you have to create the view and in the 3d case you want to create a scene view and then attach the one to the other so that and then now the scene view shows all of the data in the map and you can actually you can actually create multiple views you can for example have both Matthew and the scene you pointing to the same map and put it in your application at the same time they will show the same data but they will you can move around in them individually and then for each layer that you have in the map the scene we are the view will internally create a layer view so just like the scene view is kind of the view on the map the layer view is then the view on the layer so this is a bit complex but it was just necessary to introduce this abstraction to be flexible in the terms of 2d and 3d and having multiple views on the same data now for the only one you want to when you want to obtain the layer view the layer is what you create yourself in your application you say new scene layer give the URL and then you do map that add layer and you've seen view you also created yourself you say new scene view and here's my map but the layer views are automatically created generators whenever you add a layer to the map and there's a scene view it will automatically I'm going to create a layer of view for it but then later on if you want to interact with them and we will see a few reasons why you might want to here's the way that you can obtain the layer view you have to call this function when layer view and this is an asynchronous function is returned to promise because at the moment in time when you call this the layer of you may not yet have being created this may be loaded in dynamically so this is just a hoop that you have to go through whenever you want to use the layer views all right so why am I telling about this because all of these queries features are available both in the scene layer and in the scene layer view and they behave a little differently and depending on what you want to do you may want to use the one or the other so obviously the question is when to use which and unfortunately the story is not so simple I'm going to try to simplify it in the end but here's kind of like the gory details first of all when you execute a query on the scene layer it will be executed on the entire data set that query will actually go to the feature service and will be executed on the server and will return the information there however when you execute it on the layer view it is only executed client-side on the features that are currently loaded for display the scene layer query kind of supports all different query types by creative type I mean you can you can give it a we'll see that later actually you can give it a sequel wear cloth but you can also say I just want this in that object ID you can do a spatial query so there's kind of different query types the scene layer one supports all of them the theme their view is limited to what we have currently implemented in the in the layer of view this will likely glow grow over the future right now it's quite limited and you can see the documentation on scene the review for the for the individual query methods of what supported there so now the first two are kind of constraints on the scene layer view so so you might think why would I even want to use the seem they review now here's two reason why the scene layer one actually requires a surf server roundtrip so as I said that query is being sent to the server and then it comes back and if you have a large result it'll take them some time to actually stream down whereas the scene their view query is done on the client immediately or it's not it's also a synchronous function so it will be a promise and take a little bit of time but it tends to be much much faster than than the scene layer query call also the so this is the story that Pascal has talked about we actually need this feature layer in the back end of the scene layer to do this 15 layer queries and this is a bit like we're working on that this will be more more often the case when you publish from our chess pro it will always be there so it's always for you to use but if you for example as you know or as you may know the scene layers boosted in the backend we have this data format called I 3s and it's an open specification and we have partners writing out these SLP case containing I 3s and if one of these SLP case is published to a to two portal or to online then they I think currently do not have a backing feature layer working on that exactly that's what I thought so so depending on where you get the data from how you publish it it it may or may not be possible to do these kind of queries whereas the scene there you eyewriter it always works there's some again it depends on the I three s data containing all the attributes which is the case when you publish it from from City Engine it's also the case when you publish it from pro but depending on where you get get the data from it may not actually contain any data that you can query all right so let me try to simplify that when do you use which one as a rule of thumb when you need the entire data set to be queried then you have to use the same layer query however for example a typical case is that the user clicks on something and then you want to do something with that you want to obtain information about that and in that case you know for a fact that the future is in view so then you can use the seen layer view and and be faster or save this saving this requirement of having at the feature layer in the backend you can check the capabilities of the seen layer with this function gets filled usage info I'd like to refer to the documentation how it works exactly but that will as a response tell you whether you can do this query or not all right so now I'm going to step through a number of samples of how you could use this these query functionalities they're all very simple samples but I hope they will inspire you to actually create your complex use cases based on it so the first one is a it's very simple you have it's a database query right we have a number of features and we want to find out all of the features that have a specific usage for example so to obtain that we create the new query object and we tell it in this case that we want all of the attributes of the resulting features to be returned you could limit that down to only the attributes that you need and then we have we used this as sequel a where clause to say that we only want to get the buildings or we want to get all the buildings that have usage type office then you do layer that query features you pass that query into it as I said it's an asynchronous function it has this promise thing so it doesn't return immediately but you do that then and give it a function and then that function will be it's kind of the callback that will be called once the queries return and the result will contain a array of features so you can now iterate over these features and do with it whatever you like you can show it to the user do statistics on them things like that this is actually the way that the statistics are done in India we just would create the currently selected features and then we do the statistics on the client side down here I'm only going to show this once the query can fail for various reasons one of them is for example the capabilities aren't there I could be that it times out whatever and this is the way that you you catch that error and and then you deal with it oh one thing I forgot to say about the capabilities and about this get field uses usage info obviously the capabilities will remain the same for your data set after you've published it so typically you will not need to do this check in the in the application you may need to do this widely develop it to check oh actually that data set there can I use it but once you've determined that you can use it you don't have to worry about it anymore it's going to stay there all right so like finding features is a it's probably the simplest query example another example is if you want to get the attributes for specific features now maybe you if indicate that you already know which feature you want to get the attributes for you can just add use this object IDs array here in the query object and just give it the object ID and again you have the out field star and then that will return a single feature or actually maybe you'd have to really check I mean if you're sure that this object is in the database then then you're fine but maybe you need to check it actually returned one but then you have to feature and in the feature you have all the attributes that feature all right here's a more complex one here's the one where the user clicks on a feature and I'm I'd like to show you that one life so this is a sample actually it's based on a sample that we have in the API so this SDK sample that shows query and and filtering I've modified this a little bit the data set is the ESRI campus in Redlands and it has all of these individual rooms and the rooms come with attributes like the object IDs and then for building aim and so on so this click that the pop up that you see here this is the capability that the API has built in you don't have to implement that you just set the public pop-up template on the scene layer and you said pop-ups enabled and then it'll automatically pop up when you click on something but maybe you want to have a different behavior maybe you want to actually do something in your UI when user clicks on one so here's how you do that whenever the user clicks somewhere in the view this click event here is issued this is a very simple event all it gives you is the point the screen point in pixels that you are where user clicked on you might be having a cup of water is really straighter since it's back there Thanks sorry so make sure I can still talk after five minutes so then once you have the screen point you can call hit test that's a function that will actually test for a certain screen point what are the features we need that pixel we don't give you that information in the click event already because it's potentially expensive to compute so and when you don't need it we don't want to like spend that effort and figure it out and then you just throw it away Thanks so this means that if you want to know which feature was clicked you have to call this hit test method as a result you will get a number of hits in the scene we will actually always be one hit the frontmost one because in 3d typically you don't see what's behind it that's actually also the case in 2d and then based on that so the hit contains a graphic this kind of the feature but the graphic does not contain the attributes yet that is owed to these two the fact that we say that the theme there is is mainly for efficient visualization so when when we download the data from the server we don't download all of the attributes we only download the ones which are necessary for display if you have a render then we need to download that specific attribute for every feature but we don't download any of the other attributes so this means that in this graphic and the only attribute that you always have is the object ID and if you want to know if you need a specific field or attribute from the service you then need to go on and issue a query against the service so you say okay I know the object ID I want to have all fields for that object ID then you push this query into query features and here as a result I'm just printing the attribute to the console so we can see that if if I now click on on a certain building it will take some time it'll load some data but then it will print out all of the attributes that were stored in that feature all right so that's that use case next one is you may want to be you may want to know all of the distinct values for a given field that is the case for example in C through here in usage you see all of these strings here this is computed from this like this is not hard-coded but we actually fetch all of the different values that we see in the data and present those to the users and the way to achieve that is this property return distinct values that will cause the results to have one one feature result for each distinct value that it sees so it doesn't return all of them only returns one of them you specify the field that you want to get the distinct values for and at the moment you have to use this where 1 equals 1 I think actually that's a book I've been looking into that shouldn't be necessary we should do this for you but right now it's what you need if you want that and so then down here with the result what I do is I I use this map this is like new JavaScript yes it's kind of behavior work but what it does it just is extract all of the usage fields and what you get then is just an array with each all of the strings that are possible for usage all right and finally final example is to query the extent of a feature author it's actually in two final example you can query the extent of one or more features so the extent is kind of is the bounding box with the envelope and it the query in the query you I mean the query may match multiple features and the extent that you get back is only one and it envelopes all of the features that you specified let me demonstrate that as implemented that here that just if I click on a building I find out its object ID and I do this extent query and then I keep adding to that list of object IDs unless I click somewhere in the back I keep adding to that list of object IDs that I feed into the query extent and you can see what I get back is a 3d extent that envelopes all of the features that I've clicked on we can look at the code of that again I'm using the click event and then the hit test to find out which feature the users clicked on I'm sorry wrong source code here we go but nevertheless we use the click event we do the hit test I'm using this view that graphics array there this is a place where you can just put in like line polygon graphics and so on to annotate something interview I clear this so that so that I can prepare for a new selection and then if there is if I actually clicked on a graphic then I find its feature ID I push it into an array of a feature IDs and then I call this method curry and show extent if I didn't click on anything I'm going to empty it so that kind of resets the set the application so query ensure the extend what does it do it receives the number of object IDs that the currently selected buildings and then it calls query extent on the layer view so here's one example I could have done that in the previous example actually as well but here's one example where I know that when the user clicks on a feature it's going to be in the way of view so I'm using the extend and leave you what I get back is an extent and then I is just some code that generates lines for this box and I add the result to Utah graphics and then and that makes up this box here so there's one other important distinction between the query extent on the layer and the layer view again you can call it in both that query extent on the layer will return a to the extent only the horizontal extent whereas the the query extent on the layer view will return a 3d extent that you've said you've just seen and one thing that you could use this for is if you want to view to go to a specific area to a specific feature for example let's say you have like maybe a drop-down box for different buildings and when the user selects one you want to move the view there you can use the query extent to get the extent that that feature and then just to view that go to and then it'll move there automatically alright finally if you want to get not just the extent but let's say if you you want to do something more complex on it I mean one of the things that you see here is that the extent is always aligned with the like north-south east-west directions right so it's not really a good representation for that building it just gives you the generic area one of the things that you can do already what we actually do not have support for yet is for you to obtain the 3d geometry for a specific feature that's something we're working on but we don't have it right now what you can already do is you can query the geometry from the from the scene layer and that will return the footprint of that building it will return a 2d polygon with the footprint of that building so if you want it for example to compute a buffer to see like what are if there are any trees that are too close to the building you could query the geometry from the from with this return geometry here can then buffer the 2d polygon and then you can see if there's any features inside that sort of 2d or 2d geometry yeah and I think that's it that's all I have for you yeah pretty much as I said check check out these samples in the API actually that's the one that shows all of these things in yet another way called scene layer filter query and here you can see that on the one hand I can select by a floor so simple similar to see through but on the other hand we have this legend here that shows the different usages and you can see that the room count updates with my current filter and that is done using the query API all right so we have some time for questions yes LOD - yes this year that was this basically BIM data but in this case is that kind of an all the data set which we maintaining so I think these are basically policies and polygons for per level we have polygons and then every room we have polygons in this case here in the in the red landscape so that's our cache so they've been been building in which pending informational so the granularity of features is something you have to decide based on your applications if you want it to be one features one building or one features one floor one features one room or one feature is the chair in the room that is something that you need to decide based on and what what you want more questioning one answer with your application yes no no not yet we think about it because many people like it so much but yet it was for us it was really kind of like showcase and test example' but we have these kind of samples however when you're when you have a kind of important or interesting use case and contact dozens and you can see if you can do something yeah oh yeah I didn't talk about that because I didn't want to talk about I thought this one you mean so do you mean how do we deal with it in terms of visualization there's two ways actually there's right now there's only one way you can do it and it's not this one so this is the visualization that we use in the scene viewer it's not public API yet so so you cannot do it this way we are working on it this some some something like that will come what you can already do is in a local scene so if you use their own projector coordinate system in a local tea you can actually go on the ground and you can clip the surface so you can you can you could clip the surface to like a small park around the building and then you can just like turn the view around and look at any yes exactly this data does not seem so it would have to be the Zurich data the the Zurich data actually has has that so there's no limitation in the data that you cannot go on the ground the only problem is how do you visualize it to the user and as I said right now that's the only way that you can do it officially with the API is a user local scene clip the extent to around the building and then you can actually see underneath it yes yep you you have to go a pro for this they're there and have tools I could get KML into pro or CD engine and the engine I think you can import KML directly then your expert you can you can publish it as a nitrous layers in there so that's one way to do we would be possible yes and so in that was see create a complete piece teach a language which we have for the shape common language there you could say for example a morph if if if you would have this kind of data like you know the north side is 30 percent of the north one thing we also have new now is we didn't have to like damage the area split that means you have a you have a arbitrary polygon like and floor area can you say like okay maybe 20 percent or 500 square meters are in office on that floor in the south and we actually could really go and split it in a way that it's that the areas are perfect it could align it so it is on the south side this part not but the area split tool is described in the city engine help was in the CTA part of it so if you if you're into CTA and otherwise also and there's as a forum for CTA as a for versus eg engine and they're people are discussing such stuff and often people help each other this one not this one not this week we only have demo demo permissions here we don't have permission to give the data unfortunately ah by the way I should yeah I should say thanks to the Dubai Design District for letting us show this data to you but there for internal usages contactus a problem our third guy same problem um we are working on the under permissions for or for that okay all right thank you very much mmm [Music] [Applause]

Channel: Esri Events

Views: 10,809

Rating: 4.858407 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, web app, visualize, analyze, 3D, urban planning, Scene Layers

Id: 59ouYQQmM8w

Length: 61min 19sec (3679 seconds)

Published: Fri Mar 31 2017