Build an open source WebGL map using Mapbox and React.
- Hi everyone, I'm Alex so I'm Front End Developer at Trainline and tonight we talk about Webgl Map with Mapbox and React. So yeah you can find me on Twitter and on github with this. So just with using Web Map basically almost lot of companies with a very simple map on the contact page but some of big player in the tech scene are using it as a core component for the application like Deliveroo, Uber, Citymapper, Airbnb or Foursquare as well. So most of them use Google map but Airbnb China I think use Mapbox and Foursquare is using Mapbox as well. So, some big player are using this technology. So what's Mapbox? Mapbox is a company that started in the Silicon Valley, and now they are in India, China and almost everywhere. So they provide a complete geographic information system. So they provide a lot of tools to display a map on the web. So you have Android SDK, they have iOS SDK so that have a complete suite of tool. Also they tell based on the Open Street Map, which is a full open source map provided by the community. So anyone can go on Open Street Map and draw a road or building or anything, you can check the satellite image then on top of this satellite image you can draw anything you want and submit your change. So there are, when you want to display a map on the web there are two approaches. So the first one is using the Raster tiles. So these tiles are displayed on the DOM using simple image tag. The image are usually in PNG format and then one of the advantage is that the bundle size is quite small compared to the other approach, and it supports Service Site Rendering. And the other approach is using CANVAS and WebGl. So using Vector tiles so the format is SVG. It's more performance. We can interact with more data on the front end. And there is a zoom interpolation and it's highly customizable but I'm gonna show you this a bit later. That's an example of Raster map. So this is using Map Box Gl, not Map Box Glgs. I'm going to show you quickly all its raster tiles. So if I check the DOM, you can find the different tiles, so it's in here, so this is the tiles basically. It's a simple image tag. If I remove the tags, you can see that it's not there anymore. And if I un-zoom the map is loading the new tiles so it's refreshed and we have again the tiles. We can see that the zoom is not the best zoom because it has some different stage. So now if I show you what's a Webgl map you're gonna see the difference with the zoom. That's a Webgl map using Mapbox Gl. We've out react for now. If I show you the DOM again we can see that the map is rendered on the canvas. So yeah on the canvas using Webgl and shaders. So Mapbox give you all the shaders and everything you need you just have like a high level API that you just use. One of the advantage of Webgl map as well is that you can have like 3D buildings. So I'm gonna show you right now. So if I zoom, first the zoom is quite smooth as you can see compared to the previous map. Now you can see the buildings in 3D but we can also play with the camera and move a little bit. So the London Eye is a bit weird, just a square. But you can improve it, yes you can draw a proper circle. Yeah there are a lot of data missing. I don't know if you've seen but Google map have the same feature I think. They have way more data for London. But you can I think contribute and draw some, modelize some building if you want. And send it to Open Suite Map. So I'm gonna show you quickly how I implemented the previous example, it's very straightforward. 50 lines only, so we just import Map Box Gl. We set the access to cam we get from Map Box studio. I'm gonna show you just later how to use Map Box studio. We instantly see the map. We pass the style we designed on Map Box studio. We pass the centre, the zoom and the container, which is idea of DOM image. And then unload we gonna just add the layer very simple, 3D buildings, we define the extrusion. When we want to see the extrusion we mini zoom and yeah that's it. That's pretty much it. So that's quite nice. But you are very cutting edge and you are using React, you want to integrate using React. One of the advantage of React is that it does Declarative API, and all the updates are abstracted for you. So we could use this nice advantage of React to update our map and everything on the map. So basically I'm gonna show you how we could do that that's the simple React components. So we could just define a div tag and just set a reference for this tag. And then once the tag is run out we gonna just, React gonna trigger component demands, and on component demands we just spread the props we get from components to set up the different option of the map and we use container we previously referenced to render the canvas inside the container. And we could use it this way. So we pass just the style though sometimes the zoom, and it's very much declarative. So that's nice and actually and that's what React Mapbox GL is doing and does good. So React Mapbox GL is a library I started to write with Phil, which she gonna talk later. So I started this project one year ago and now some company are using it in production so I'm keep maintaining it. So it contain two different kind of components I would say, the projected components, so this ones are real components that they're all gonna render proper DOM in the end. And they, so with this components you can render a Popup, a Marker or a Cluster of Marker. Or you have this kind of "fake components" in the end they don't render anything on the DOM they just map the declarative API of the components to direct Mapbox API. And these components are Layer, Source or Features. And you can as well render marker with these ones, lines, polygons and so in the end this markers, lines and polygons gonna be rendered in the canvas. And the React Mapbox GL is referenced on mapbox.com on the plug in section. It's referenced as the React Integration of Mapbox GL. This a real world application, so it's an example with all the feature we could find on our application. Quite simple application. So we just display a bunch of station, this all the bike station I get from the TFL. So this is a proper example on React Mapbox GL. So we get all the bike station and we display them on the map and we can just click on the bike station and find more information about it. So just name of the station on the pop up in the maps and just simple filter with the number of bike available on the number of slots. So this is the code and I'm gonna show you so from the data from the fetch of the data to the display of this data. So we fetch data on the TFL API we get aso we want to convert it to a string object just using XM to GS. And then once, so I'm just fetching this back station on my component three months, normalise the data, set them in the states, quite trivial. And then that's how I will insert shapes React Mapbox map. I'm passing the style, the access to can. Quite simple, React components. And then if I want to display the stations I have to create, use the layer components. In the layout you define the image you want to use, so the name of the image is different on Mapbox Studio, I will show you a bit later as well. And then I just hit a right to go on my stations, a simple map and I return a feature for each station. I set the coordinates which is the only required input for the feature component and then I can pass different call back like, different function, almost centre, almost leave, one click. It can interact quite well. And then if I select a station for example let's submit station, my selected station. It's on the states, I just display a pop up. Inside the pop up it's like a normal react component. Inside the the pop up I can just inject whatever I want. Yeah. And then I can access as well the contacts and everything, it's like very normal React components. So I will show you quickly Mapbox Studio. That's Mapbox Studio. It's quite a complex interface. But it's quite very flexible you can design almost everything you want on your map. The colours, the width of the road, the buildings... So for example the colour of my map is brown and if I want to change this colour to something else more orange, I can do pink yeah. Let's make fun map. So yeah, that's a pink road. And I just need to publish. Mapbox is going to show me that I've changed between my previous design and my new one. And then I just publish. Yay success, cool. So now I'm supposed to see the change on this if I refresh, but they are quite slow to actually do the change on the server, so it take like about 10 minutes. So I don't know if you want to wait. I think it's better to go forward. So yeah. And on Mapbox here I can as well I wanted to show you the marker. If I want to add a marker I go in icon here and this has the different marker. So when you are over a marker, you have the name of the marker you can use on the front end. And you can as well upload any marker by doing add image. And you can use it on your front end once it's published on the server. If you want to as well, display props, you can pass an object so you just have to click on your map and you can download the map. And it will give you adjacent object that you can pass to your React Mapbox component. Instead of passing a string. Then I want to talk about a project I just finished last week. So it's basically a map that display all the UNESCO sites on a single map using React Mapbox GL. So I just get the data from UNESCO it's a dump, an excellent site, and then I'm using Flickr to get the image. So that's the result. So you can see all the UNESCO site in the world. And you can click on a nice one like in Paris there are some nice one, like Versailles. So Versailles is one of the UNESCO site and you can see the different image from Flickr. A quick description. So the data are not complete, there are some missing image because there are some very weird title of sites like this one, which doesn't get an image but I will add them later. So yeah that's a complete example and I wanted to speak about one of the feature I have continued which is quite nice. It's when you change the bounds of the map it update the list on the left side so basically there is two things you have to list on the change on the bounds and then filter the different monuments on your state. So I just want to show you quickly how I'm doing that. Yup. That's my abstraction of the map and my different layers. And then I have this bounds change props which is gonna trigger this bound change and then this one change on this side apply a filter because I don't want the function to be called every minute gone I want the function to be called every 500 minutes gone and I'm taking the latest change of the function by passing the leading through. And then I'm getting the... So you can see bounds change get mapped as a prop this is a feature from React Mobile GL is giving you every time you pass an event, a function, it giving you as a first target on the map so you can coordinate limits on this map, like get bounds, and you can use end project to add like 60 pixels margin which is going to convert the 60 pixels into a latitude and longitude. So that I can calculate my final bounds and then call my set monuments and bounds using the new bounds. And then I filter the monuments and then I pass them in the states. So everything is nice but there are no layers for data visualisation. I mean, so if you want to do any data visualisation I strongly suggest to check Deck.GL. Deck.GL is library provided by Uber and it's written on top of React Map GL so it's nice but they do a lot of crappy things with the states so it's getting updated all the time. So it's nice for visualisation but I wouldn't suggest it for car map that you would use on your application. It provides you 2D and 3D web layers like scatterplots or choropleths. And then that's an example of Deck.gl using React Map GL. This is New York. You can see the different trips of the taxi. So it's not all the trips, I think it's from 9:00 to 9:30 tosomething like that. But this example doesn't include all the taxi trips but it's a nice way to see that they have this 3D layers, yeah. There's many more technologies and tools around the map. So you can, you have like on Mapbox you have geocoding service or reverse geocoding service. So geocoding service is going to, it's an API, you request, it's going to convert an address as a string into a coordinate, so that you can then place any marker or whatever you want on the map And then you have some nice, well you have very important paradigm which is the routing. Mapbox provide you a routing API as well. And then, but if you want a proper routing API I would suggest to try graph router, which propose like different routing algorithm with restriction if you want to add restriction. And then you can as well draw on your map if you wanted to using Mapbox gl draw. There is no React adaptation of Mapbox gl draw, but if you want to jump on it there is an open issue on React Map gl. And yeah, that's pretty much it. If you want to check React Mobile Gl this is a github repository, and I've used the spectacle for the slides it's all on github as well if you want to check. - [Student] How long did it take you to construct such a wonderful application? - Like my new map? - [Student] Yeah. I did it as a side project so it took me I would say like, 15 hours. - [Student] Wow, that's pretty cool. Yeah that's quite quick. Most of the work was to normalise the data we get from the UNESCO. One of my friend did an API in rest it's nice long wait as well.