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

X Marks the Spot

Alexandre Rieux speaking at Reactivate London in August, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Learn how to render maps in React using React MapboxGL.


I'm Alex, I work for Trainline here, and today I'm gonna talk about Maps. I'm supposed to speak like a parrot, but it's going to be difficult. Thanks, Phil, for the slides, because he helped me make the slides. I already gave this talk maybe two months ago, and he improved it. So, yeah, you can find Maps on some very famous companies. It's a core competence of their product. Like Airbnb or Citymapper and Uber, for example. When you want to display a map, you have to write this imperative code, and it's not really what you want to do when you're a React developer. This is a code snippet from Leaflet, when you want to use Leaflet. Leaflet is a front-end library to run the rest of it on the browser using DOM elements. And that's what you would do when you run the web GL map, using mobile GL. Still, it's quite imperative. When you're a web-developer, you still don't want to do that. As Ken Wheeler said, "Components are the perfect way "to declaratively describe and build almost anything." That tells us that the current API of MapboxGL Leaflets is not really adapted to React. Some examples of some React libraries that actually doesn't run the DOM elements but are used kind of like an interface and drive another API, a good example is React Native or Spectacle, Victory from Formidable Lab. React-game-kit, react-music, react-hardware, react-blessed. That's how you would run a map in React using a library I worked on a year and a half ago, it's called React MapboxGL. This library is just an interface between React and MapboxGL. It just drives MapboxGL API. You just have, in this example, a map component, a layer that's going to render a feature which is actually a marker, and it's quite simple. It just runs a marker. I will just show you a quick website I've done for this library. Here it is. I've done this for the Version 2 of React MapboxGL because a lot of people were actually using it in production, so it needed a second iteration, a lot of backfixes. Some new features, we can go through some examples, maybe. So this is just an example of all the bike stations in London. You can just click on a station and see the number of bikes available on the number of slots. It's used TFL API to get the information. These are the shapes you can display on the map. You can display polygons, you can display lines or markers. These are elements that are going to be rendered on a canvas, not on the DOM, using the interface components. And, as well, you can render HTML markers if you want to. Let's see, what can I check? London ... Heights ... Let's see, yep. So this is an HTML marker. Maybe I can show you, actually, if we check the code. That's it. And you can, as well, display your 3D elements because it's WebGL, that's quite nice. THat's a 3D map on the browser. The London Heights doesn't look really great, but, you know. You can as well do some HTML clusters, so you can clusterize HTML markers. So this, for example, means that three markers clusterize into one. There is a component for that. You can switch the style of the map if you want to. And in the video I did the drag of markers if you want to drag a marker as well. And you can display your georelations of data. Of points or lines or anything. There is documentation on Github and a link of the Github repository on the website, if you want to. That's, I would say, the core features of the library. The popup, marker and cluster are components, these are actually real React components that display a DOM element. And there is these sort of interface components that are gonna drive MapboxGL API. So what are the benefits of vector rendering on the browser? The benefits are, the zoom interpolation is really nice, you have, like, a freed zone, I will show you a bit later. All the data are on the front-end, actually, so you can query any data on the map, it's really nice. And the one downside is that the bender size of MapboxGL is a bit big, and it doesn't support service head rendering. That could be annoying. That's actually an example of what's a raster tile, as opposed to a vector tile. So a raster tile is just, a PNG image, and then we have some library, like a leaflet, that's going to assemble all the images and make the map. And that, here, we can see that, at times, it's very small bits of the entire map. So that's a graph of the load sizes of a vector map as opposed to a raster map. And as you can see, the vector map requires a very low level of load time, compared to a raster map, when we zoom, the more we zoom, the less we need of load. And I will show you a demo of a map with the theme of pirates, because the theme for tonight is pirates. So that's a treasure map we could have. And then, if you click on the marker to find the treasure, we have a nice zoom, and that's something we can do because of WebGL map and vector map. And for this we have used just a simple marker component and a layer that's displaying the line, actually. And that's the code we did using React MapboxGL. We first imported the different components we need, and then we instantiate the map. We pass the token and the different static options we need to pass, and we just render the pirate map. So it's just a map component. The style is a style you get from Mapbox Studio, and I'll just show you, after, what's Mapbox Studio, and you need to pass the centre and zoom. You can update, sometimes, the zone, it's going to be updated in the map. You have a layer component which displays the line. And then, with a feature, and the route's contain an area of points to draw the line on your map. The marker component is actually an HTML component, and the layer component is an interface component that is going to drive the Mapbox API. I just want to show you what's Mapbox Studio. It's really nice, well done. And, if it'll load, I will show you. Oh, we can design, we can edit our map. So, for example, we just click on the roads, road-primary, and if we want to change the colour of the roads, yes, we can change it here. Oops. We can have red roads if you wanted to. Once you're done, well, this way, you can design anything. Buildings, roads, every single element on the map. And then once you're done, you just publish the map, and then that's it! Using just the style of the string, MapboxGL will fetch the new style as a JSON, and then it will update everything for you. You don't need to do anything for that. That's another example of, that's actually another library to display WebGL maps on top of MapboxGL. It's a library made by Uber. It's called ReactmapGL, and they made another layer on top of this to facilitate how we do data visualisation on maps. It's called Deck.GL. It's quite nice. That's actually a data visualisation of taxis in New York, I think. I don't get all the data on this visualisation, but you can see their example on the website if you go on Deck.GL. That's another project I've done with React MapboxGL. It's called Monumap, and the idea was to fetch, so I downloaded the data from UNESCO, all the monuments referenced by UNESCO and all the sites, and then I cleaned up the data a little bit, I fetched all the images from the FICA API, I put everything in the database, I created, a friend of mine created a Rust API in Rust, and I created this front-end web application that just displays all the sites of UNESCO using React MapboxGL and a map design on Mapbox Studio. So if we click on sites, we can see the description for the sites. This site doesn't have an image, but if I check, probably, Versailles, here. There's that image. So yeah. You can work with the bounds of the map, you can play with the zoom, interact with the DOM from outside. There are a lot of possibilities, and if there is something missing and you want to use React MapboxGL, just let me know. I can plus the issue on React Mapbox, on the repository. And, yup, that's pretty much it. Thank you!