Sessions is temporarily moving to YouTube, check out all our new videos here.

JavaScript, 3D, and the World of Mapping

Sean McGee speaking at JS Monthly London in January, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Esri builds ArcGIS, the most powerful mapping software in the world. In this talk we look at their new 3D JavaScript API, by showcasing some of their current tech research innovation projects and exploring some new and upcoming features.


So, just by a raise of hands, before I do this, to start with, how many of you have actually heard of Esri? I guess there's a couple of you. Okay, cool. Have you used our API, by any chance? Those that raised their hands. Okay, cool. One half way, I kind of see that. Okay. So I'm Sean McGee. I'm a Developer Evangelist at Esri UK, and this talk is going to be specifically about the JavaScript API, 3D, and the world of mapping. And a little bit about myself, so about me. So I've worked for Esri for about a year, but before that I was a 3D journalist for about 10 years, also doing some stuff for Microsoft, more on like the script-y, app design-y stuff. And specifying mostly in 3D. So my YouTube channel's got over 100 million views just on tutorials on 3ds Max, that kind of stuff. So I'm quite nerdy. I'm quite focused on the 3D side of things. So my job at Esri UK is to work in tech research. So innovation projects, testing the API, and kind of seeing what's new. And just a little bit of an overview. When you think of Esri, you should try and think of the ArcGIS platform. The center being the cloud, so that's where all the data's going to be hosted. There's Enterprise Version, which is like an on-premise solution, and it's connected to everything from there. So the online contents and services, I'll go into a little bit of that later on. But it's things like the Living Atlas. So it's where people can upload information, so there's a nice layer there of, actually, satellite imagery that's updated every single day of the world, in an actual graphic, which is pretty cool. Okay, so what is ArcGIS API for JavaScript? So it's actually something that's super new, especially the 3D version, because it came out a couple of months ago. And there's even a new version since that, 4.2, that came out two weeks ago. So it's generally next-gen stuff. So it's JavaScript. Widgets can be written in Angular or React, and it's 3D using WebGL. All right. So this is the ArcGIS API Sandbox. Yeah, that should be good. Thank you. So when people think of maps, this is what I assume, they think of something like this on the right-hand side. So generally, it's going to be a graphic, and it's satellite imagery. Usually, you can do things like go from A to B, that type of stuff. It's generally what you think of. And this background, so this thing I'm toggling here, is actually called a basemap, in geography and mapping terms. So if you scroll down to here, it just says basemap is topographical, "topo." Now I'm just going to change this to, let's say, "osm" and "national geographic," just to show you how kind of simple it is to update this. Okey dokey, and just two lines of code change and you've changed the whole graphic. Pretty impressive and pretty easy. But one of the new features is something called a vector basemap. So I'm assuming a lot of you are familiar with vectors. Yep, some nods here and there. So a vector basemap, if you spell "gray" correctly, is...basically, when you zoom in, it keeps its resolution. So a bitmap would kind of get pixelated the further you go in. A vector should keep its resolution. So there's another few advantages of that. So if I keep zooming in now, I'll show you this, you see it keeps increasing in detail. So it starts with one level of detail, and it gets clearer and clearer the further you go in. There's a few advantages. One being that the labels are technically strings. They're text. So that means we can convert between languages pretty easy, compared to if it was a bitmap before. So I'd have to go in and manually change that for the whole world, for each tile layer. So this is definitely an easier and quicker way of doing it. As well as all of these RGB values can be changed. So if you have a customer or a client that has a specific set of coloring, you could just change all of the vector basemap graphics there. Okay, so one of the last things I'm going to quickly showcase in the Sandbox here. This is kind of just like the overview of mapping. I thought I'd just give you that at the very, very start. Let's have a look here. So I'm also going to be changing the map into a scene. That's the best way to describe it. Thank you. Okay, so what a scene is, is it's the world in 3D. People seeing stuff? Okay, cool. It should be loading there. Oh, I spelled "hybrid" wrong. Oh God. How did I spell it? What a disaster. Let's have a look here. And also, the console is good for debugging [inaudible 00:05:18]. That was on purpose. Just to make sure I can show that F12 menu there. Okay, so hybrid. It's like one of the easiest words to spell. Okay. Okay, so a hybrid is basically text as well as satellite data. And I've added something called the world elevation layer as well. So if I just quickly just zoom into a part of the UK...let's just jump in here. What the world elevation layer should do is, for most places in the world, it actually has two-meter accuracy. So this will come into play a little bit later on. But the world is in 3D, so it's actually like an elevation, it's like a height data of the world in 3D. So if we let this buffer, this is...for about 8% of the UK, it's two-meter accuracy, which I think is pretty cool. You know, just for adding a little line of code in, I think it's pretty cool. So it's just a little overview. And the last thing I'm going to mention about the basics of mapping is that you don't even need a basemap. There's something called points, lines, and polygons. So this is a little project we did. This is more of a style map, I should call it. And this showcases that all you need is lines, polygons, and points. So points has data, the polygons being, you know, the fully closed building here, and the lines to draw into specific rooms. One cool thing about this is there isn't a basemap, but it's GPS-accurate. So what we did was we could track people as they walked around the building. So we did this live for a demo, which I think is a pretty cool showcase of it. So the ArcGIS API is asynchronous, and it's client-side geometry engine. So it's actually some pretty powerful stuff. You can do things like intersection, nearest vertex. So that means if I select anywhere in the world, it would jump to the nearest polygon or point on that map. There's tons of preset widgets, so there's things like live tracking. So as I mentioned before, your GPS location. There's also navigation, so the simple routing and things like that are available, as well as searching postcodes and reverse geocode, that kind of stuff. I'll go into a bit more detail, rather than just a quick skim over, because I've got some cool demos to show you regarding this. So this was a project. It's called pin the tail on the map. And the idea is, is you're given an address, and you select where you think it's actually going to be. It's quite a simple app. But when you first think of it, you're like, "Okay, Math.random() on postcode. Bob's you're uncle. App's done." But when you get down to it, if we did something like that, then it's the cities that are always going to be hit, because it's the clustered areas. So what we've done is we've created something that's based on the geometry. So wherever you draw a polygon in the world, it will create this app dynamically, based in that specific area. So this is great for taxis trying to learn an area. You just draw the polygon there. App's changed completely. And it's done by using the geometry engine. So I'm going to play this again, just to show you how bad my geography skills are. But okay, [inaudible 00:08:27]. Should know where that is, because that's where I live. It's around here somewhere. You see on the bottom left, it's using our REST API to query [inaudible 00:08:35] place. And what kind of happens is the polygon is drawn, and it will get two random vertices, and then it would densify that line, and then grab a random point on that densified line. That's kind of how it works in the background there, and it happens pretty quick. And it's client-side, too, so it's pretty cool. Okay, and the next one I'm going to show, I think it's one of our funniest ones internally, is something called Map Racer 3000. So what it is, is it's the very simplest terms of GIS. So it's a point moving along a map. And what's kind of cool about this is it's actually on a polygon. So if I go off the road here, on purpose, you see it drops to 60 miles an hour. At the end of the day, this is as basic as you can get. It's like on the polygon, off the polygon. It's to show that you can actually move and interact while doing some GIS stuff. There's a really cool soundtrack to this, too. But this is a nice little app just to showcase that. Okey dokey. So you see that that's kind of got a styling. And I mentioned earlier, I said you can style the vectors by changing the RGB there. But when it comes to satellite data, you can't. So we created internally something called HipstaMap, which is now on GitHub. It's quite a cool name. And it's literally just applying filters to the whole webpage and the styling for it. Because I attend a lot of hackathons. I'm usually the guy that, you know, attends the hackathons and tries to give students help. And I often got the question, "I want to style it. What's the easy way I can style it?" So we created this. It had a nice little slider, and you can literally customize how you want the map, and just copy and paste this code, just whacking off the top of the project. So again, all of these last ones are actually on GitHub, by the way. Okay, I'm going to go into some a little bit more serious stuff. So we're going to go into some more serious stuff regarding the REST API and live data. Some of you have probably seen the elections. So Hillary and Trump are still kind of relevant at the moment. You'd be quite surprised that this is actually powered by our technology in a lot of media sites and news sites. This one was specifically on <i>The Times</i>. And all the information for the results were pumped into our API and refreshed every five seconds, and a live interactive map was visible. So this kind of shows that it's good to be scalable. Because this was hosted on cloud, and I think we had like millions of hits all of a sudden, just at once. We could handle it no problem. We didn't have to bring up some more service. It's nothing we even had to worry about. And the same thing with the UK elections, actually. So for Brexit, we did the Brexit map from the hexagons, and, you know. You've probably used our stuff without realizing it. And this last little demo, this section, is something probably a little bit more geographical. So this is something called a geodesic line. So basically, it's a straight line in a 3D world. So if you'll look up here, this is basically all the coastal views if you just went in a straight line. It's a good display of showing that the world is round, because a lot of people forget that. It's true. And if you went in a straight line there, how you'd laugh that the world is completely. And this, again, is using the geometry engine. It's just using collisions and some cool technology. Let's have a look here. So we do a lot of stuff in the media, as you've probably noticed. So the Brexit maps. We did a whole thing with Tim Peake, so, explorer. And this was done in 2D and 3D, so based on your device. So a lot of people go on news websites, these days, on their phone. It would toggle straight to 2D without giving you the option, but there is a whole 3D option for this. And you can just basically explore where he took pictures. And this is a nice, easy way to visualize data and information. So this is just a good way to show you that maps can help tell a story, if that made sense. Okey dokey. So the new 4.2 release. So it has the vector tile support, which I mentioned a little bit earlier. It has goTo() animations. So in the 3D world, you have cameras, and you can go to specific coordinates. And now, you can do really fancy animations for that. So you can do smoothing. You can do durations. You can literally do like a mini-movie in the API itself by just giving it specific coordinates and durations of when it should hit those points. Also, the custom widget development. But I think some of the coolest stuff is to query the elevation method, which sounds a little bit weird at first. I'm going to show you a video here, that I'd seen posted on Twitter this morning, that explains this really well. Okay. So what this person has done is he's predicted, or made an app where if he built a dam in this reservoir, where the water would build up. And this is live in the web, using our JavaScript API. So what he does here first, I'll skip through a little bit, is he draws where he thinks the dam should be. And if I skip along, you can kind of see how the tiles are thinking about, you know, "Okay, so there's water here. Let's move to the next tile. Is it going to flow?" And at the very end, it generates the water of where it should be. And I think this is some pretty cool stuff, considering it's the web. This is just using the JavaScript API. Some pretty cool and powerful stuff. This was, like I said, on Twitter this morning. I just thought I'd showcase it there. Okay. So you can use it with other libraries. So I imagine some of you have come across things like three.js and Cannon.js, and like physics engines or render engines. CityEngine is more of a 3D gamer's world or movie world. So basically, you can generate cities using code, kind of dynamically and automatically. It's usually based on height data. You could just generate these whole massive cities. And that actually can be plugged in. So if we just jump into this one here, it's plugged into the API. I probably should have brought a mouse. It would have been easier to navigate. But you can see how smooth and easy it is to navigate around, that there's quite a cluster of buildings and geometry inside a scene. And one of the cool things about it is that it's live and it's accurate, in terms of data and in terms of time. So not only is the shadowing correct to the time and date, but it's all accurate. So I think that's pretty cool stuff. So we can actually change the time over here. Let's just do it. Just do it a little bit earlier. You should see it should be sunrise now instead of 8 a.m. It should be 7 a.m. I think that was sunrise. So you can get architecture using this kind of tech to showcase things like white of light, which I didn't know was a thing until like a year ago. So some pretty cool stuff, pretty powerful. And on the last on that PowerPoint was...if we just jump down here, was point cloud data. And point cloud anyone familiar with that kind of technology, by any chance? So it's like LiDAR information, if that made sense. So it's getting a specific X, Y, and Z in a display of an area, if that made sense. And this is something that's genuinely brand-new to the API since two weeks ago. What I'm going to quickly do is just take away this div. Hope we don't break anything. I just went through and removed that thing on the right there. So point cloud data is like a cluster of just points. And the level of detail will change based on how close you are to a certain object. So let's say if we zoom in here... I've got to remember where some of the boats and some of the stuff are. You can see how it gets more and more detail. So this is generally used for preservation. And again, it's more of an architecture type of thing. But it's still cool and powerful to know this is done in the web, and it's quite simple to do, to be honest, in terms of lines of codes and stuff, so. Okay, so one of the last things I'm going to showcase is going to be the physics engines. So this is hooking up with... I think this was with Cannon.js. And this is just using our elevation data as a plane, as a collision object. And again, this is on GitHub, too. If we try and zoom in somewhere on this mountain, wherever I select, it should generate some specific objects. Try and zoom in some more here. Which will collide into the layer, the basemap. So this is, I think, some pretty cool and powerful stuff. So we've seen people use this to create driving simulators, and flight simulators, and some pretty interesting...and again, I think it's really cool that it's in a browser. I have to admit. Because I come kind of from a game designing background, like Unity and things like that. And it's cool to know that you can just do this in the browser there. Okey dokey. So I think that's generally it. So let's go over this. So we've covered the basics of mapping and GIS. We're kind of seeing that it's moving at definitely a fast pace. It's going for more of a 3D side of things. I've showed you some of the innovation apps that we've created, and a lot of those are actually going to be on GitHub. So if I just go to this next slide, this is our GitHub link. This is our Twitter account. And most of the things I've showcased is actually going to be on our labs page, if you want to find out more information. So, any questions? - [Man] What's the browsers called? - Sorry? - [inaudible 00:18:49]. - Which one, sorry? - Browsers. - Oh, browsers. Oh, any browsers. You can use it on any device. The only limitation would be it's got to be OpenGL. So mobile can support the 2D version, but it won't technically now support the 3D version, because it's OpenGL and not all mobile devices support that. So, any browsers. And actually, we have separate products that do deal with specific mobile, like SDKs, so. - [inaudible 00:19:22]. - It's probably worth mentioning as well that this is free to develop with. I thought I'd just chuck that out there as well. It's free to develop with. - [inaudible 00:19:34]. - So, what was that, sorry? - [inaudible 00:19:42]. - Yes. So again, you can use any device, if that made sense, without any issues. I think that was the question. - [inaudible 00:19:55]. - Yes. Yeah, because it's all browser-based. Yeah. Cool. Any questions, feel free to ask me at the pub as well. - [Man] Thank you very much. - Thank you.