 And I work for this company, well I will work for this company in two weeks, I'm currently transitioning jobs which is why I'm in Singapore. I'm originally from here but I live in Chicago and I hope to continue living there for a couple of years. And you can find me online as short div, it's a long standing joke, I'm also short, which is why it kind of works. So this is kind of like unconventional, so I want to, if you'll humor me, do an exercise in trying to get us into mapping mode. So I want you to think back to how you got here from work or whether it's from your house and try to think of your journey. Whether you took the train, whether you walked, whether you took a taxi and think through that route and try to think about how you would explain if someone were to try to get from where you started to here, how would you tell them how to get here, how would you direct them. And so I will tell you how I got here. I came from Clementi, which is on the west side if you're not familiar, and I took the MRT pretty straight forward. And so this is the MRT map, if you're super familiar as you probably are. And so I took the east-west line. So it's from Clementi, get off at City Hall and then walk here. And to tell someone that this is a pretty straightforward way of doing it, right? But I can go one step further. I can show them a map of Singapore, a very detailed map with the train lines overlaid onto it. And using that, the person trying to get here can get a sense of the layout of the island and understand how exactly to walk from City Hall to Sun Tech City because it's not clear just by looking at the MRT map. And so the exercise that we just did, super short, is an exercise in how most of us interact with maps. And most of us interact with maps by having data layered on top of a base map. So this is OpenStreetMap, which I think MapQuest uses and Google Maps has their own. But OpenStreetMap allows you to click on layers and change layers based on the type of data that you want to see on your map. So there is the cycling map, which Singapore is not super cycling friendly, but surprisingly there is a cycling map. There's also a transport map to see how exactly the buses are routed and where the train lines connect, and so on. And so that's one way in which most of us interact with maps on a daily basis. Another more, I guess, humanitarian way is, no, Java. Oh, of course Java had to come in on a JavaScript meetup. So this is the Storm Raider app, which was released by the Weather Channel, I think a couple of months ago. And it allows you to kind of get a sense, is it playing? No, okay, it was playing earlier. But it gives you a real-time visualization of how a storm is moving, and it allows you to kind of fast forward and rewind so you can make decisions on where exactly you should travel or where exactly you should stay away from. Yes, it's... Okay, cool. Another app that's really fun to play around with is this app, which was released by Mapbox, I want to say, two months ago now, and it shows you location of food based on travel distance from your current location, because most of us are really lazy and we don't like to travel far for food. And so chicken rice is like very popular. There's lots of options. If you're looking for sandwiches, it's not as popular. If you saw earlier, yeah, here. Sandwich options, not as popular. Chicken rice options, very popular. And so what ties all of these maps is this concept of tiles. And tiles is what kind of forms the bedrock of web mapping. And when you think about tiles, there's two versions. There is raster tiles. I feel like I'm blocking the screen. There's raster tiles. What was that? Oh, okay, cool. So there's raster tiles and vector tiles. Have you guys worked with graphic, image graphics on the web before? Kind of like SVG and PNG. Yeah, so it's the same concept. It's vector is optimized for scale. So as you zoom in and out, it's very smooth versus raster, which is just like, it's a static image. So as you zoom in and out, you're requesting tiles as you go. To kind of bake that in and understand that further, you can think of a raster tile like a quilt. So it's a quilt of squares or a quilt of little tiles. And each tile has data embedded into it. So a tile is a PNG. And on each individual tile, this is Boston. And so on each individual tile, there is roads, there are streets and parks and lakes and so on. And so if you were to remove one tile, that map is no longer useful. Or at least it's missing something. And so that's the idea of a raster tile. And zooming, as you zoom in and out, you're requesting more tiles or less tiles, depending on where the zoom level is. If you're extremely zoomed out, because the level of detail is less, you require less tiles. But if you zoom in, there's more detail, so you need more tiles. And that's the basics of how it works. And this is the anatomy of a map tile. You have a subdomain. And then this is your tile service. So OpenStreetMaps is one. I think MapZen is another and various other tile providers. And then you give it the zoom and the XY coordinate. So based on where exactly a map is relative to location. And so I'm not going to go into detail about raster tiles, because it's historically how maps were created. But it's not as interesting. So we're going to focus on vector tiles. If you want to talk about raster tiles, I'm happy to do it afterwards. But just so you know, vector tiles are a little different, because vector tiles are layers of data. So each layer has information within it. So kind of like the OpenStreetMap example, where we were turning layers on and off. Vector tiles on each individual layer, on the street, there is a road, there are highways, there are parks and so on. So if you remove a layer, you're removing the level of detail of a map. So removing, it's usually rendered to canvas. And so that's kind of how it optimizes for scale. And as I said, these are tile providers that are out there. There's Google Maps, which is really popular. And what I think most of us have dealt with, I think. I'm just going to make that assumption that most of us have dealt with Google Maps. And then there is MapZen, OpenLayers and so on, which are various ways in which you can interact with maps. I'm going to focus on MapBox, because it's super cool. I don't work for MapBox, but I think their API is really great and developer friendly. They also raised the 145 million series C around. So it means they're doing well, and we should use their stuff. So to create a map using MapBox, you create a div element with an ID. So I created an ID of map, because that's pretty straightforward. And then once you import your module, you instantiate the new map element, and you give it a container, a style, and you center it based on location. So I gave it the longitude and latitude of Singapore, because we are in Singapore. And then you give it the zoom level. So you can say zoom level 9, which I'll just show you. So this is kind of what it looks like, if it works. So that's zoom level 9. It kind of gives you an overview of the island, and you can see it, and you can zoom in and out, which is pretty cool, super smooth. So that's the basics of creating a MapBox map. But of course maps are pretty boring, just as is. And so let's put some data to it. And before we dive into that, I want to talk about data for mapping. Has anyone dealt with GeoJSON before? One. Okay. Cool. This is new information. So GeoJSON is like JSON, but it has a specific structure. So specifically you need to have a type and an array of features. The type is usually a feature collection, so you don't really have to think about that. So a feature is kind of where most of the information lies, because each feature gives you a sense of what you want to visualize on a map. So here we have a single feature. Can people see this? Is this big enough? Okay. So here we have a single geometrical point with a longitude and latitude, and it's kind of cheating, but this is our current location in SunTex City. And then properties are just additional data you can give to that feature that you can use if you wanted to add a pop-up to the feature and so on. So this is kind of the geometry. It's kind of like what allows you to visualize things on a map. And getting GeoJSON, there's various means by which you can do it. Singapore's open data portal, data.gov, is pretty great for it. Unfortunately, a lot of the format is in SHP, or shapefiles, or KML files. And so you have to do a bit of conversion on your own, which I'm not going to talk about by throwing up a link, a bitly link if you're interested. And GDAL is one of my go-tos. It's command line. So you can just command line, type in the path to your shapefile, and then type in the properties of specific elements and so on. Just look at the link and you'll get the basics of it. But it allows you to convert shapefiles to GeoJSON, because on the web, most web applications don't know how to interact with shapefiles. So this is a very simple map of Singapore with exactly where we are. And we're going to create that just to get us in the mood and to understand what we're doing. So when we create a map, we have to add the data source, because the map needs to know exactly where or what you're encoding to it. So we're going to add the source and call it SingaporeJS. And then we'll give it a type of GeoJSON because it's GeoJSON. And I'm not going to give you the data because it's kind of boring and long. So you add that as a source. But of course, this doesn't visualize anything. It just tells the map, hey, there's a data source. And so you have to tell the map how exactly to visualize that. And you do that with add layer. And add layer allows you to play around with how exactly you want that data to be visualized. So here we are pointing the source of SingaporeJS in layer so that it knows exactly where to get the data from. And then we're telling it that we want it to have an icon image of star. And those icons are map box specific. So in the documentation, there is examples in different ways in which you can use icons. So I'm just using a star, which gives us a star. Hopefully, yes. There. So we have a little star icon that shows us where it's on Tech City. Ta-da, perfect. So the whole idea of mapping, I talked a little bit about how tiling is kind of an important concept in mapping. Layers is another because layers are what allows you to visualize data. And it's what holds a lot of that information and allows you to kind of play around with interactivity and so on. So it has data and then you can kind of add styles to it and events to it so that you can make your map super interactive and interesting. So this is an example of a map that I created. I'm going to cheat a little bit. I'm using Chicago because I created this for a different meetup, but it's fine. It's the same idea. So this is like the city of Chicago, which is just, it wraps around Lake Michigan. And so right now we kind of have a blob, which shows you exactly the boundaries in which Chicago is. But there is also a border around the neighborhoods because Chicago is a city of neighborhoods. And so I'm using a single data source to show, I'm using a single data source and visualizing them in two different forms. There is a fill that shows you like exactly the span of the city. And then there's the additional layer that shows you the neighborhoods. So it allows you to visualize things in different ways. So one data source, two different layers. And we do that within the paint property. So here I add layers. Those, the fill and those lines that demarcate neighborhoods are considered two different layers. And doing that allows you to further add interactivity and so on as you move on. But what I want you to focus on is just that one layer, which is the borders, is of type line. And the other one is of type fill. And that just allows you to tell the map how exactly you want that data to be shown. The other way that you saw it a little bit, I had a checkbox that turned the layer on and off. And so map box allows you to kind of query a layer to see whether it's visible or not visible. And so what I'm doing is I'm just using an input, like an add event listener essentially on the input element. So when that input element changes, it queries a specific layer, which in this case is the fill layer. And it checks the visibility layout so that if it is on, it turns it off and so on. So it just toggles the layer. And so that's one way in which you can add like a layer of eventing for your maps. The other way that you can do it, transitions. Okay, just so you can see. So the other thing that you can do, which is really neat is you can add like hover events to your map. So you can add hover events. Can you see that? There's like hover events that happen and there's also click events. So if you're curious as to the neighborhoods of Chicago, you can click on it. And it tells you in this little corner here, which is very small, what exactly that neighborhood is called. The neighborhood I clicked on is Boystown. You can kind of extrapolate what that neighborhood is or who lives in those neighborhoods. And then there's Wrigleyville, which is like where the Cub Stadium is. If you know the Cubs, their baseball team, pretty big in the city and so on. So you can get more information as to neighborhoods in Chicago, what they're called, where they're located relative to other parts of the city. And so the way I do this visualization is through filter layers. And one way to think of filter layers is as dummy layers. So remember how we had two different layers, one of fill and one of border. So we can create a different layer, which is kind of like it has the same data source, but it has this filter element which does an equality check to figure out exactly which element has been selected. In this case, it is a hover layer. And so I want to visualize the specific neighborhood that's being hovered over. So this will make sense in one second. So here we have that same layer property with that filter. And then I have a mouse move and a mouse leave, which is like when you hover over and hover out. So when you hover over, it sets the filter of the map, which is this property here. And it sets that to that specific feature based on like the specifically name. And then that will allow this layer to visualize that specific layer. So it highlights that layer because I gave it like a paint property as well. So I tell it exactly how I want to visualize that. And then on mouse leave, it empties that property. So it's an empty string and so on. So it doesn't like override or it doesn't keep layers selected when they are not hovered over. Does that make sense? Cool. All the data of the neighborhood can be found under the array of Json. Correct. Yes. So I didn't talk about that. So that's a good question. But it's essentially, so that GeoJson is giant. So it's like multiple features and it's not just a point because it is a, I think they call it a multi-polygon because it's just like a filled or a misshapen shape that is connected. So it's just an array of features that are of multi-polygon. And it's, I can show it to you later. It's huge, but I can show it to you later. But yeah, so as you can tell, the further along you go with mapping, the more complex things can be. And as a developer, there's a huge cognitive load because you have to remember the state of a layer and what layers interact with which and how mouse events change the visual, like change the visuals on your map. So that's kind of where, okay. That's where React comes in because React allows you to componentize your map so you can extrapolate the layers and you can deal with them separately. And you can pass down events based on whether a layer is subscribed to that event or not. So it's super handy and it works pretty well. So we'll start with componentizing the map and then we'll work from there. And componentizing a map is as easy as just creating a class. We're going to call it map because it's very straightforward. And then we are going to just throw in the code that we had earlier, so nothing different. We're just going to render the DOM, React render DOM, and then it returns like a div of ID map. And of course, because it depends on the DOM, you have to do it within components it mounts because component will mount, component will mount doesn't have access to the DOM versus component did mount. And so we do it in component did mounts and then we pass it a ref. And the ref is really important because any kind of interactions that happen need to have access to that DOM node. And so we give it the ref so that the map and various layers have access to that specific DOM node. So so far it's exact same thing. We just threw the same code and we have like a map of the city. And so we can move one step further. Now that we created that we can add the sauce and it's the same thing. There's nothing different. We added the sauce and then we're adding a layer. I have my my slides different. Okay, we're just going to go with this. We're going to go back to Singapore. Anyway, so we are in Singapore and we coded that specific feature points. And that's all like all the code is thrown like is within that class of map. So there's nothing different. There is just pretty much encapsulated in that class. But of course we want to extrapolate layer so that we can have layers independent of each other because right now everything is kind of everything is just bunched into a single component. And that's not very react. That's not the react way. So let's extrapolate a layer so that we can work with different parts of the layer. And so we'll just pass the we'll just have map grab data and pass it to its child element of layer. So nothing new here. We have a map. We're going to fetch some data. So we fetch URL here data and then we set the state of data to itself. And then we pass that data down to the layer. So this is just like pure react. Nothing new. And then the layer element just grabs the data as props and then it does the exact same thing which is add source add layer. And then it passes it down. So we have two components essentially that do separate things. And it's super react friendly and cool. The problem is that this will not work. This will not work. And I should have taken a page out of the previous talk because I did not TDD this at all. I just wrote it. And so had I TDD it I would have figured this out earlier but I didn't. So here we are. Map is not defined. And that is a problem because now nothing shows up on the thing. And the reason for that is that layer is trying to render before map has even finished rendering because layer is like, okay, you gave me some data. I'm going to just do my own thing. But it doesn't have access to whether or not map has rendered. And that's important because in order for layer to show data, a map needs to exist. It needs to have that context. And so what we do for that is we can kind of cheat and we'll set state. So anytime the map is loaded, then it'll set map to itself. So the map is just like a map element essentially. And then map and n is just to make sure whether it's true or false. So when it sets itself and that is true, then layer will go ahead and render itself. So it's kind of a hack way of doing it to make sure that layer renders only after map renders. But again, we hit another bug. I feel like a terrible developer, but we can we can handle this. So add source is not a function. And that's because we made sure that layer rendered once map renders. But now layer is extrapolated from map essentially. So layer doesn't have context to map, which is a problem because it needs to add source, add layer. So one way of doing that is through context. This is not recommended according to React, but whatever context context has been around for a really long time. And Facebook has been saying that they're deprecating it, but they haven't and react 16 still supports it. So we're going to use context. So what you do is you pretty much set map as like you said this does data map in a get child context and then layer subscribes to that context. So that it has access to it and can add source at layer and do other things to it. So now we have a hopefully my things are all wrong. It's fine. We're just going to move forward. So we technically have a map and we have a layer. And so now the problem that we face is that layer is hard coded. Right. So as you can see at layers currently like a Singapore JS venue with Geo JSON with data and with like a layer property. But if we wanted to create a different layer, it won't work because it currently only accepts data props and nothing else. So it has to be of like all these different types, which makes it a bit difficult. So what we can do is you can extrapolate that into props, which makes it a bit more extensible so we can create different kinds of layers with different kinds of source types and styles and so on. Super easy. We just make props. So it takes in an idea type of source type data and styles. And then we can pass that down when we do an add source at layer. So it knows how to deal with things. And then we feel better about ourselves because now everything is like clearly demarcated and our layers don't depend are not hard coded. So now we have different parts. But the problem here now is that source is hard coded. So as you can tell, like add sources within layer. And most of the time when we write our apps, we try to have our data not embedded into a component. So data is kind of separate and then passed through. So what we're going to do is we're going to create a different source component so that source component will be created and then layer can query that source and so on. So it's not within that layer. So layer doesn't have a lot of responsibility. So we can componentize the componentized layer further. And we do that the same way we just take away certain pieces and we have like the ID type and data. And tada we have a source component. All we're doing is just adding like grabbing the add source from add layer and putting it in the source and then we're done. Like that's super simple. But of course react, what makes react awesome is the life cycle stuff because that's kind of what allows us to add eventing and interaction and so on. Because right now our app is pretty static. Like nothing happened. We visualize things but we can't interact with it yet. So we talked about mounting, unmounting is like just what happens at the end when you unmount your map. But we're going to focus on update because that's kind of where the magic happens. So we're going to go back to the example that I showed you. I will show it to you again so you don't have to remember. Tada Chicago neighborhoods checkbox which turns a layer on and off. Pretty simple. This is not in react so let's reactify it. So what we're going to do is I'm going to skip back. So we create a checkbox element. How many of you have worked with react? I don't want to like move forward with this assumption that you know react. Okay. Okay. Okay. Not a lot of you. Okay. So a checkbox element. I just was going to breeze past this but I'll talk a little bit about this so you understand. A checkbox element is just a input of type check checkbox. There's nothing much to it. And all it does is it has an event handler that anytime a change happens it propagates. It calls this dot show layer which is like a parent method. And then the parent method sets is layer visible. And then that gets passed down to layer. I know I'm like glossing over this because I actually wrote this for react meetup. And I apologize to those of you who don't understand. I can talk about it later if you're interested. So the example on and off layer. Super simple. Okay. So this is oh cool. I talked about it a little bit. So we have like the show layer method which is what this handle change show layer is. So anytime this checkbox is checked it will call this set state. And then the set state will change the visibility to yes or no. And then that will get passed down to this element to layer. Does that make sense? Kind of sort of. Okay. Cool. I have code samples that I will post so you can work with this because I feel like it makes more sense if you if you actually get down in the weeds. Okay. So a really cool thing. This is what I was going to do. Yes. Okay. Yeah. So one way that we're going to deal with life cycle or one way we're going to leverage on life cycle is using component will receive props because component will receive props will enable a layer to update when any change happens. Like when props change or when state changes and so on. And so here we have like the is layer visible as props and then it checks here whether is layer visible like next props is pretty much like the props that gets passed in the recent most props. And then is layer visible is like the previous props and it checks whether those two are the same. And if they are not the same, then it will update the visibility to on and off. So component will receive props is a really cool way for you to ensure that a layer updates events based on state changes and props that get propagated down. Okay. So to conclude, this is one really cool way. Can you see this tiny little bicycle? It's really small. But yeah, so this is like a really cool way of interacting and using component will receive props of of creating animations on a map. So I talked about like clicking on a checkbox or hovering and so on. But this allows you to create to give your data a timestamp. So this is a bike trip and the time it took for that person to get from point A to B. And you I use request animation frame, which allowed me to do some math so that I could visualize that as it went. So it it like request animation frame with the time creates a like it updates the data as it goes. So based on like, let's say a bike journey took 30 minutes. So I could use request animation frame to be like update every one second. And so every one second it updates the position of that bike. So that data that Geo JSON changes each time. So it updates and updates and then it creates that visualization of a bike. So yeah, we have real time data updates and all I'm doing is I'm using component will receive props. There's real there's more to it. And my code is on GitHub and I'll give you the link for that if you really want to get down to it. But all I'm doing is I'm just setting the data. I'm grabbing the existing data and then setting it so it updates the data based on like a specific time interval. So essentially the nice thing with working with Mapbox and react is that they work really well together because Mapbox is really good at mapping and react is really good at extrapolating components, making sure that you can extrapolate state and deal with things in a in a very modular fashion. And so they work super well together. I know there's like tons of libraries out there. I think react react Mapbox GL is one of them that allows you to to write maps using react without you creating your own. But one key takeaway that I hope you get from this is it's actually really fun to create your own and roll your own even though you're reinventing the wheel because you get to learn a lot about a library and like the in-and-outs and intricacies of it. So that's all I have and these are some links. Cool. We have time for questions. Why did you use contacts? Could you have used Redux instead as the special manager? That's true I could. I was trying really hard. So my approach to Redux is to like use the shit out of react until you know until like you really have to use Redux. And I think even Dan Abramov wrote about this like to use Redux only when you really need to. And I think most of the visualizations and most of the times you're doing any kinds of mapping things. It's not super complex because it's very simple. And so I don't think Redux. I think Redux is a bit heavy. If you wanted you could use Flux which is just like architecturally Redux-y without Redux. But here you'll be changing the context of the react which react doesn't advocate because it's dangerous. True. You are changing some things. Yeah. It's true. But I don't think it's huge. It's not recommended definitely. But I think there's nothing wrong with it. Because in my dealings with it and I've abused context quite a bit and not run into any issues. There's a talk by Ken Wheeler. If you've heard he is from I forget what the formidable labs. He created a what is that the react like it's like slides.com but react if you get spectacle. He created spectacle.js and that abuses context quite heavily. And he gave a talk about this like at various conferences. And so I don't think context is necessarily a bad like using context is necessarily a bad thing. I mean the fact that it's included in react is telling. And I'm pretty sure pretty sure Redux uses context. Yeah. So like if Redux uses context I think we can use context like. Yeah. Liberally. Yeah. Yeah. How did you do the animation so it keeps on receiving. Yes. Yeah. I used request animation frame and then past it a like time frame. So it would update. It's kind of like set intervals the same thing. And so it updates every one second and I think so every or. Yeah. Half a second every half a second or so. So it updates the data point. So the thing is with bike data usually they give you point and point B right. But they don't tell you exactly the route that they took. And so there's one way to straighten out a rock because like in mapping you can't just draw a line because there are streets and buildings in between. And so map box has a API called turn by turn which allows you to give it two coordinates to longitude latitude coordinates and it gives you the street like directions. And using that it allows you to draw the like the route that a bike took. And then you can grab the time stamp that that bike took to get from point A to B and then do some like calculations as to how long. Assuming that a person rode steadily at the same pace. Then you can do that animation. Yeah. Yep. Yes. Yes. Yes. Good question. So map box renders to canvas. I did not mention this. So good question. So map box renders to canvas. So there's a single element. And so a lot of those layer that the add layer add source and so on are just adding to a single element. And so you can just return like I'm returning now because I want my layer to interact with that specific element without returning anything because I don't want it to return anything. I just want it to like to use a specific function so that it can update a map or change how it looks. Yep. Yes, you can. You can use it within the map component. I think the point was to make it so that you don't have to so that you can pull away the pieces and then deal with layer separately or deal with specific pieces of the map separately. Because if you if you just push everything in a specific you could do it. But I think it defeats the purpose of like a componentized component like it completely defeats the purpose of componentization. Yeah. I haven't tried that but I think that would that will be possible. You could definitely do that. Yeah. Thanks. Thanks.