 What I'm going to do today is to introduce some of the things that we've been doing at Mapbox, and also show some of the really new things that we've been doing to make maps really work well on the phone. So a bit about Mapbox, we're a four-year-old company. We build open source tools to make maps, including things you can do, you can point locations on a map. So Foursquare uses our maps, Pinterest uses our maps. But this means that the tools that we build are developer facing, right? We don't build any of these maps for everyone. We build tools so that people can build maps on top of it. Now, this doesn't mean that we do only traditional mapping systems. We also do tools that lets you make data-rich visualizations, right? For instance, Washington Post. And there are a lot of people in the room that I know who also use Mapbox's tools to make visualizations. We do this by using a very powerful open source project called OpenStreetMap. How many of you has heard about OpenStreetMap? That's awesome. So we have set up shop in Bangalore since January, focusing on content improvement in OpenStreetMap. And I'm part of the team here. So at Mapbox, we kind of have tools in the entire data pipeline, right? Data collection, analysis, design, web publishing, and feedback. And all of this is open source, right? There are JavaScript libraries, there are rendering libraries, the design, the styles, the CSS libraries that you can use, and everything. All of this is open. So to kind of get into the meat of the stock, it's important to understand how maps work in your browser, right? Have you guys thought about how maps work in the browser? Yes, one. OK, I'm going to show two approaches to how maps work in the browser, and why one's better than the other, and how this kind of affects the mobile space, right? So now the traditional way of serving maps in your browser is this. Have you guys seen these square pieces of maps come into your browser? If you look into your network tab, when a map is loading, you can see these square images showing up, right? Now, the reason why this happens is these are pre-rendered maps served from whatever your server is. But to kind of reduce the amount of data that you're sending into the client side, this massive map is cut into small square pieces, usually 256 by 256 pixels. And that's really how this works, right? And then you send specific tiles for a specific area that you're looking at. You don't send the whole world map into your browser at the same time, because the browser is not going to like that, right? Now, there are two ways of interacting with these maps. What are the two ways that you do usually on a map? You pan the map, and you zoom in and out, right? So now, this is a very interesting aspect of making web maps, right? So when you pan the map, these tiles get loaded and they get stitched together so that you get a very seamless experience. You don't see these styles. You don't see the gaps between the tiles, right? Now, what happens when you zoom in and zoom out? You get different details on the map, right? So depending on which zoom level you are, you get to see a different kind of map. You get to see different details. Sometimes you get street names. Sometimes when you're looking really far away, you get regional locality names, right? So this makes a lot of difference in terms of performance. And this is a raster rendering map-serving mechanism, right? Now, this works really well for traditional web browsers because they are cacheable. These small images can be cached in your browser. So the moment you visit a particular location in your browser, those styles are already cached, right? So the next time you visit, you don't make those requests. You just show it from your browser. It's faster. Now, they're progressive. This fits together very nicely so that you get a very seamless experience. You don't see the gaps between these styles. You don't notice these are actually like dials. And they're very simple. It's a very simple process. You get some data. You run it through some efficiency plus plus libraries, cut them into small pieces, and then serve it, right? Now, when it comes to the phone, you have very limited resources, right? You're running on low battery most of the time. You have very little memory. So the problem with using raster dials, I don't know if you guys can read this. So let's say we're looking at Bangalore between Zoom level 13 and 20. That means that you get to see some streets, a lot of neighborhoods, parks, a lot of land use features. So you're actually looking at around 61,000 dials on the client side, right? Now, this means you need these 61,000 images in your browser to actually see the map properly. And if you want to make this offline, if you actually want to disconnect from the internet and still look at these maps, this takes about 20 to 25 minutes to download 61 of these images into your browser, into your phone. And that's unacceptable, right? You lose, people get frustrated because the map doesn't show up. And most of you must have noticed, right? If you're on a very slow internet connection, some parts of the map will show up. Some blocks will still be gray, right? Now, the way we solve this problem is by moving the way we render the maps to the client side, right? Now we render the maps on the server side and send the images onto the client. Now we're gonna move that and say, hey, I'm gonna send the data to the client side and then render them on the phone, in your device, right? So this gives us a lot of advantages. Now, this is a vector way of rendering. This is really performing. You can leverage the GPUs, right? It's much more efficient than depending all on the CPU. This is flexible. I'll show you how flexible this is. And you get the same experience. This is really interactive. You can do search. You can do all the usual map interactions that you do. And this is all open. So the Mapbox is vector tile specification is open and the Esri mapping giant, they recently adopted our vector tile specification. This is solid technology that's proven. Now, if you look at any of the Mapbox's tools, we've completely moved to the vector side of things. We don't serve raster tiles at all anymore. Okay, this is, so I'm gonna show you a really small example how this works. So this is United States and I'm loading a 100 MB Geo JSON file. It's JSON, but with map elements in it, right? So map features in your browser. This is client-side rendering, 100 MB Geo JSON file. I didn't wanna do a demo, so I just do a screencast where I can show you if anyone wants to see this. This is where it gets interesting. So far, we've been rendering using HTML canvas, right? When you have vectors that come into the client side, you, the usual ways to just render using HTML canvas. Now, what if we move this to WebGL? What do you get? You can do stuff like this. Seamless pan zoom, very smooth. Do you see the smooth interaction, which you don't get with a raster rendering? And this is important. You can change the style on the fly, on the client side, which you never could do when you were rendering those images from the server side, right? So this is kind of one major bottle like that the customers at Mapbox come to us with, right? Listen, I've been using Google Maps, but I can't change the style. I can't change the design, right? Now, this is super easy because you can switch these styles within the client side, depending on your use case. Now, this is possible because the styles are also a JSON, has a JSON structure, and it's very lightweight, right? So I've put the links for all of these things, so if you guys want to take a look at it, please go for it. So this is a very simple JSON structure. You define all the elements that you want to use, and then just apply the style for the elements. Now, what it means to serve vector tiles into the client side means you can send the whole data as it is as a JSON structure, but when you're talking about a really large area, for instance, this area, it means that you're sending quite a bit of geometries, actually like polygons, lines, or points, which gets rendered in the browser. So that's not really ideal to send the full JSON all the time. So what we use is to compress this data in a binary format called protocol buffers. I'm not gonna go into the details of protocol buffers, but hit me up if you have any questions. And so that's really small. You compress the whole thing in a very small binary format, and then unpack them on the client side, right? Now, when you go to WebGL, you can render these maps at 60 FPS on the web. We've been also working on a lot of these tools to make them more native, so we have an iOS SDK and Android SDK, that's something that's interesting. So what we're looking at is around 25% less data on the client side in terms of maps, and this is huge. This gives you more room to do other things on the map, so you can do stuff like this. So have you guys tried rotating the Google Maps app on your phone? It changes the label position and stuff automatically, and that's because of vector tiles, right? You can render things on the client side, and it's fast. So you can do stuff like that, change colors, you know, zoom and zoom out, change the style on the fly, contour maps, and I'm not saying that all of this works right now really well, and this is all work in progress. This is probably the first presentation that I'm making here in this part of the world around vector tiles. And if you want to take a look at how we're doing this, feel free to come and take a look at our GitHub issues. There's still a lot of work pending. Yeah, we're still looking at mobile touch events, or like, you know, pinch zoom, rotate, and stuff like that. So yeah, if you have questions or, and we're looking for help, so if you're interested in this kind of work, hit me up. Questions? Hello? Yeah, so about WebGL rendering and can you hear me? I don't see you. Oh, there? Yeah. So about WebGL rendering and protocol buffers and all that stuff, so is this only specific to Mapbox or does Google Maps also use those technologies? Correct, so Google Maps uses similar technology and protocol buffers is something that Google's been working on for so long, and it's open, right? Google Maps is completely serving vector tiles these days, and what we're trying to do is to make this open, right? Now, if you have your own data and you want to serve vector tiles in the browser, you can use these tools to, you know, actually make those, make that data get into vector tiles and not depend on Google's technologies. Okay, thank you. So question? So from a consumer's perspective, let's assume I'm say Zomato, I have a bunch of points of interest, food places around my house, and I want them to be offline and offline available. So as a user, what advantages do I get? Most of your stuff is about the coolness of the technology from a usability on mobile, offline, online data, I guess. What are the upsides from a user experience perspective? So everything I spoke about is sort of from a performance angle, and that completely like, you know, directly translates to user experience, right? You don't want the battery to get, you know, drained because you're looking at maps all day. And when it comes to vector tiles, it's easy to cache them in your app. So if you're constantly looking at maps within Bangalore, you don't need to necessarily download the same map from the server all the time, right? And you can pack them within your app all the time. So it's faster, right? And also it's really good quality. They're not raster images that are coming from the server side. These are vectors that are rendered within your phone. You're saying, you know, taking advantage of the GPU, right? So you get really good quality maps, right? Yeah. Hi. Yeah. So when we are creating, suppose if I'm planning to create app for this conference center, okay? So here if I'll create an internal map with, using SBZ, I want to use it in my iPhone app. Then how I'll incorporate that in my app and which can be accessible with the GPS, means I'll use that app. And if I walk on this floor, it will tell me like where I am there. I'm in that particular map. That's kind of tangential to this talk. But to quickly answer, there are tools that you can use to, you know, distinguish. I want to know that, like, how we can generate that with. So you're talking about rendering SVG in the browser? No, SVG, suppose SVG will create that map. Okay. That map is ready with SVG. You will use Illustrator or anything to create that. Okay. Then what is the technology to convert that to an interactive, it's the best way to. Right, so you can use the open source map rendering libraries called leaflet.js, leaflet.js or mapbox.js. They're very similar. So you just load in your SVG and boom, you have it. Okay, so is it a paid thing or is it like? No, it's all open source. It's a JavaScript library. Okay, thanks.