 Hey, everyone. It's Sam here. On the last episode of the Santa Tracker developer diary for this year, I want to talk about the tracker itself. Now, this is what you see if you go to Santa Tracker on the 24th or 25th, as Santa is flying around the world, delivering presents to all the good boys and girls. Now, the tracker is made up of a couple of things. It's made up of the map itself. It's made up of the way we get data from the server to show where Santa is. And we also want to reuse the map throughout the site, which is pretty cool. Let's have a look. So this is the tracker itself. We can see Santa fly around the world here. We can see where he currently is. He's in San Francisco. And you can see that he's not delivered any presents, because this is actually a trial run. We can see a few other things, too, like the weather. And we can also play some games down here. So unlike the Village, which is very interactive, we keep this simple and show the games in a card layout. There's also a few secret games that aren't normally visible, but are just made available for the tracker itself, like this trivia game here. We also have a few videos to watch down the bottom and a social feed. So we fetch Santa's route in one of two ways, based on whether you're on the Android client or on the web. Obviously, this is a series about web, but on Android, we use the Firebase Remote Config API, which is actually really nice, as it allows us to send down a JSON blob to clients and actually update that fairly rapidly. That's really important, because if Santa changes his route on the fly, we can get a new version almost immediately. We do something very similar on the web. We've got an API server, which is internal, which kind of emulates the same thing. But in our case, we poll that every minute or so. And so this sync method here, on the Santa service object, actually does that work for us. So this is called every minute or so, and it requests our info object. And so that returns things like the current status, any upgrades that are required by the client, let's say your site's out of date. And then it also includes things like the route. So we then use the route method here, which builds on that data we already fetched, and we fetch the data, this route URL here. As you can see, we're actually storing it in local storage as well. The route's quite large. When it's not GZipped, it's about 500K. When it's GZipped, it's much smaller. But we still want to store that in local storage rather than fetching it every time a user navigates back to the site. And that JSON we store in Firebase Storage, Santa uploads it there when a new route is submitted. So how do we then use that route? So inside our new tracker scene, as opposed to our old tracker, as we've got some great naming right here, we actually call the Santa sync method when sync happens. And so that method, if we can find it, does a couple of things. It basically takes the data that we have and does a few more updates. There's a bit of a chain here as we can see. So as a result of Santa sync, we update Santa's state, which basically means placing Santa on the map. So that's really nice, right? You can see this is actually a really simple call here. We say this map Santa let long equals data dot position, which is the Santa's current position. But actually what's really cool is, while you obviously see the map here with everything around or the little cards and stuff like that, we can actually use this as a reusable component, which I think is really interesting. Let's look at this tracker demo page. All this does is take a reusable tracker map element and places it on the page here. So of course that's not very interesting. We don't know where Santa is. We haven't hooked it up to the API. But I think this is really cool because as someone who works on the web, I can take this component and reuse it in a bunch of places on my side. And in Santa Tracker, we do that. We use the map obviously in the tracker itself, but we also use a cut down version of the map in our cast experience because Chromecast is quite an underpowered device. We don't want to do too much on that. So we only want to show the map in Santa. We don't want to show other information about the social feed or other videos or things like that. So the way we can use this is... So I've created a thing called map, which is the object here. And I can say map.SantaLatLung equals... Let's pick a location. I also need to set mapSantaHeading equals, let's say 120. So great. This turns out to be the middle of the ocean, but we can see that Santa is flying in a certain direction. We can even turn him around. So this is quite cute. And we love the idea that we can reuse this custom element anywhere on our site. And this is something we get through Polymer. So while this is obviously a very simple example, this tracker map here is very powerful and it allows us to wrap up a bunch of the behavior and a bunch of the stuff we want to do with Santa Tracker every year, like show the markers of where Santa's been and show his route line. So every year, Santa visits about 500 different cities around the world, give or take. However, he is a bit magical and turns out he wants to deliver presents to everybody no matter where you are. What we actually do is take your GOIP. Now, GOIP is pretty coarse. It's only about city level detail. But we use that to make sure Santa visits your house no matter what. So if you're up late in the 24th this year, make sure you check out Santa Tracker. Santa might just be above your place. Thanks for watching this year. Have a happy holidays and I hope Santa's good to you. See you next year. You can subscribe to the Google Chrome Developer Channel down here. Or check out some other great videos along here.