 Hi everyone. I'm David. I'm also like John Gibral from Web Development in Massive Course at General Assembly. So I don't know today's talk is brought to you by General Assembly or something. But yeah, so today I will talk about implementation of visual data visualization using LTA's API. So this is how it looks like. I'm running locally. Yeah, so basically it shows you basically how many lots there are. So if it's less than 50, it shows rates. So if you're ever like driving around town, you know, you're like, oh man, usually Cate is always full. You want to be sure? You just log on to, oh, so this is the life site, carpux.sg, carpux-sghero cool. You can see it. So yeah, before I dive in straight, maybe one get a sense from you guys. Okay, hold on. Let me just, what is this? Okay, full screen mode. All right, let's do this. So, okay, the URL is over there. So bit.ly, 2-A-R-D-A-F-O. If you can't see from the back, you can get that. Just get a sense from you guys. How many have played with like LTA Data Mall API before Hands Up? Okay. So, okay, a few. Very good. How many have set up like Express Server? Server using Express before? Okay, also a few. And how many of you used leaflet.js before for map visualizations? Okay, very cool. So I think the talk would be kind of useful for different people at different times. I'm going to talk about all these three. Yeah. So just very quickly about me. Okay, GA student, I used to be a trade policy analyst, which means I have a really boring job. So that's why I switched to GA and a policy science graduate. And some of the projects I've done before, this kind of snake game, like 3-3-1-0, there's a little Star Wars icon there. Yeah. And yeah, some kind of web design stuff. So okay, today in four steps, we just quickly go through how we can consume LTA Data Mall's API and how we can serve that in front end using leaflet. And also, so LTA Data Mall is really awesome documentation. The website is crap. Like, I don't know, it's from like 1995 or something, but it's great documentation, all the instructions on how to get your keys and stuff like that are all there. So just look beneath that and you will get data on taxi availability, car park, ERP rates and all the cool stuff. So I chose car park availability because I think everybody has done cool projects on LTA Data Mall before. Like, I think there's a taxi heat map that went viral. There's the bus stops stuff. So I was like, man, it's nothing left for me except car park data. So yeah, it's pretty cool. And how many of you guys have used like postman or similar stuff for making like quick Ajax API requests? Okay, so I won't go through that since you guys kind of know. So it's a quick dirty way of kind of, you know, if you just put in the API endpoint and your account key, don't remember this, you know, you can easily get kind of get a sense of what data you're getting. So this, you know, your longitudinal attitude, shopping mall name, number of lots. And yeah, and in the data mall website, they have other endpoints. So this one is traffic accidents. It's quite cool as well. So you can see like, you know, things popping up like, Oh, like five minutes ago, there was a X naught PIE or something like that. No, give you the details and longitudinal attitude, which is very nifty for using that in leaflet. Am I going too fast? It's okay. All right. Okay, so why, why do we need to set up a seven express? Why not just, you know, make a Ajax request on the front end and get the map data, sorry, the data? Because, because of this thing called cross origin resource sharing, or rather, you know, same origin policy basically, when you are making an API request or Ajax request from foul dot slash slash to HTTP, they will, the browser wouldn't allow you to do that. Or if you're calling from, I don't know. Yeah, I know all these cross origin requests are not supported. So we have to set up a quick server on HTTPS and on local hosts. And then that will communicate with the LTA data, the LTA API. And then I hosted as my API serve. I'm tripping on my own words, but let me just let the, let do the talking. So this guy make the call hosted here. And my front end calls my back end local 3000 slash API. Okay, okay. So if you ever get this like, you know, message, just, you know, set up a server on express really fast. Okay. So this little bit of code here is what kind of gets around that problem of a cross origin request. Yep. And so this is where we make the API call, the keys, start environment variables. And all this on GitHub so you can like slowly look through it or chat with me after this. And then we send it to the front end where I just make a Ajax request to my slash API and, you know, visualize it using leaflet. Okay. And then leaflet was a bit intimidating at first. After I read the taxi he met article that went through his repo and I was like, Oh man, where do you start? Everything is confusing. But after going through it, it's actually just two steps. You load a base map and, you know, you put the markers on it. So actually, I had a guy at Python last month explaining, you know, what the base map is. So it's pretty cool. So like you load Google Maps, right? You know, you can click and drag and everything, but it's actually just 16 images, 16 squares, 256 by 256. So, you know, the moment you zoom in and your browser tracks like where your longitude and latitude is and it serves different degree of resolution to you based on how much you're zooming in. So you realize you can't always zoom, you know, like at an infinite gradient, right? It's always like steps. So this is kind of why that is so. So using leaflet, if any of you guys are interested, your HTML, this is all of leaflet's awesomeness. We will just append itself here. And all we need to do is to choose a base map. And Mapbox has really cool base maps you can play around with. So I'll just quickly do a short demo. So right now, it's kind of a practical map, you know, it shows, you know, your street name, shopping mall names and stuff like that. But there is, there is kind of a market website with like base maps they can play around with. So if I was to just change this tile layer to this kind of fancy looking tile layer, I kind of like it. It doesn't tell much about the geography, but it looks kind of cool, right? So I saw it on Chinese New Stature the other day. I was like, hey, man, I know where you got this from. So yeah, it's kind of cool. If anybody who has like art projects or, you know, some kind of creative design stuff, this would be really awesome. And the link to this is on my presentation. So you just have access to that. So yeah, basically, you are just loading a different base map. And this is where you kind of choose your base map. And you can set your, where you want to map the center. Singapore is one north, right? So one point, something that's our, I don't know, one of longitude or latitude. And then, yeah, there's the, you just need to get an API key from Mac box. Yep. And so you load the base map. And next thing you want to do is to visualize the data that LTA gives us, right? So it's very kindly give us longitude latitude data so we don't have to do any kind of geocoding or anything like that. So that's nifty. And here there are two things happening. We sort, sort of data and then basically this L leaflet, L dot circle, you just pass it the longitudinal letter you return from the Ajax request. And that gives you one circle. And then we append it to the map. And we also bind a pop up message saying how many lots there are left. The way I define message was just data shopping mall name and then numbers, number of lots left. So I've been told I have like half a minute left. So yeah, you basically just learn how to build a simple map app with LTSD API. Thank you. Any questions? Yes, why not Google Maps? I don't know. I didn't really explore Google Maps API, but I know leaflet gave me kind of markers and you know, things I can append. Yeah, kind of a nice documentation. And also I think Google Maps if I called, let's say if I want to reverse geocode, right, I'm okay I have a new tree to launch latitude. It gives me 200 and 2500 requests a day. So it means I refresh my page like 50 times and that's my start. I got to like start charging my card. So that's why I use my box. And leaflet. Any other questions? Caching? Yeah, I don't persist any data. So it's kind of just calling the server every time it refreshes. Well, the good thing about the data, the APIs that serve up time is like terrific. It's awesome. Like it never went down in the whole like, you know, three weeks I was working on this. Sorry. I don't remember from the documentation, but I make my request once per minute. And I think for other APIs on data.gov, they have limits like max 50 or something, but not for LTA data more. And the documentation I have the link in my slides so you can look it up. Cool. Thank you.