Hey everyone, I'm Colby Fayock. We're going to talk about maps. We're going to talk about the impact they can have on the world. And we're also going to dive into how you can build them with little bit of javascript. So who am I? I'm Colby fak. I'm the one hugging bb eight and Kylo Ren over there. I work on the UX and front end side of things at element 84. Find me pretty much anywhere on the web by just googling my name, as I'm the only one in the world. So looking at these first slide, it's a screenshot of Google Maps in downtown Alexandria, Virginia. Here in the United States, this is element 80 four's hq. We're all probably pretty familiar with Google Maps or Apple Maps. They provide us with a ton of features that we use every day. Lives here we can check, but some points of interest nearby. We can find out where. We can grab a quick cup of coffee. We can find the best sushi, which is Momo's sushi by these way. Or just look at some pictures of the area. This next screenshot is of public transit directions. It's showing the metro that I would take to get from my last apartment to work. My wife and I share one car, so when I don't have it, I was able to get a good idea of how long it would take to get downtown. And this next one shows some driving directions. This route is where I would take to get to my mom's house where I grew up. The time here is a little bit optimistic, though. It never actually took under 4 hours to get there with traffic. And how many of you like to travel? Well, I know as much as we'd all love to be in another country every month, that's usually not feasible, especially now. So my wife likes to take virtual vacations around the world, which is a little bit better for our budget. But google Maps helps her easily travel around and check things out. Here we're getting a good look at the great pyramids of Giza. We can get an overhead view from above and see what the area actually looks like. The cool thing about this though is we can actually get a close up look with street view. We can get an idea of the scale of this structure. It's huge. And we can get an idea of how big it really is. When I was talking to my wife about this, she was in the middle of one of her journeys. She wandered to a place called the Valley of Geysers, which is located in Russia. On the Komchika peninsula. It turns out this geyser field is the second largest concentration on Earth. It seems wild to me that we can get a look at this place and it's all because someone took the time to take a picture of this remote place. These particular picture was from a local guide, so that means any of us can do this. And the neat thing is we can check out this kind of place even if we'll never have the opportunity to go. It's obviously not these real thing, but we're still able to get a glimpse of what remote places around the world look like. So where do we actually get the data to build out all these features? Well, first you have an obvious one. You have scientists and analysts. This is just a stock photo I found on these GIS university website site. But they're constantly hard at work collecting and processing data and I really have to hope that they're always looking this happy. You also have technology. Thanks to the cars and the people that build street view, we get a close up look of the pyramids and we can also get some fun Easter eggs along the way. This also includes a ton of people around the world, like I showed in Russia. There are local guides all over contributing pictures and data. And did I mention there's Easter eggs? Thanks Tokyo. There's a ton of ones like these all over the Internet. But then we have satellites. There's a bunch of different types. Some collect imagery, some collect more in a data format, but they all help to produce assets which we can use to create our maps. A good example of this is cryosat from ESA. It uses its onboard instruments to measure changes in it thickness. It can measure changes as accurate as zero 7 year. The example on the right is showing Antarctica mapped out in 3d using the data it collected. Another example of this is NASA's modus terra. Using its image sensors, it covers every point on Earth, every one to two days. It collects large scale global dynamics like cloud coverage, ocean processes and changes in the atmosphere. The shot on the right is a photo over Lake Erie in the United States. NASA alone is working all the ones that you see here. They published this image to show the state of their missions operated by their Earth team. It shows satellites in orbit now and out until 2023. But NASA and ESA aren't alone here. There's thousands of satellites like these flying over us right now. Some of them aren't even working, but a lot of them are challenging images and data about our planet. These satellites are also cool from a consumer point of view. NASA and other teams put up pictures on Instagram for our daily those from above. At the top, you see International Space Station, which isn't a satellite, I know, but it shows the earth at night, which I just think is kind of cool. The bottom is from daily overview, which is showing a look at Lake neutrons in Tanzania, which is just mind blowing. Then on the right, we have a gorgeous look from NASA Earth, which is a picture of Mergawi archipelago, which is on the border of Burma and Thailand. It's awesome to be able to see these kinds of inspiring pictures right in our Instagram feeds. But switching back to maps for a second, this is just another look at downtown Alexandria. But behind that, it's OpenStreetMap. OSM is an open source project. It maintains a huge set of metadata that includes the attributes and properties that define specific geographic areas. It allows mappers all over the world to contribute. So with their tooling, anyone can identify points of interest and update features. With our powers combined, that means another source of this data is you. But millions of people all around the world have mapped on OSM. There's meetups and communities all over. Others just work alone as individuals, but thousands of people work on this every single day. You also see big companies who use or contribute back to OSM, like Apple uses its regions for where commercial data isn't available, and Lyft contributes back with their work. They're all adding points of ventures and drawing streets. And it's more for just learning what's in the United States. But for third world countries all around the world, it's incredibly helpful from a humanitarian aid perspective, where here we can see an identified refugee camp on the border of South Sudan and Ethiopia. A lot of times, people in these areas might not know where they can be safe, but OSM allows these people to identify the features and help others survive. So where am I going with all this? Well, the point I'm trying to make is that maps are more than just driving directions. Maps are literally giving people tools to save the world. There's tons of research going on from different areas, from climate change to agriculture. By taking collected data and applying into a map, we're providing another visualization medium for scientists that can actually make a difference in people's lives. Some examples that you can find online are like NASA's worldview. Here we can see tropical cyclone edai, which was one of the worst cyclones on record to affect Africa in the southern hemisphere. It affected close to 2.2 million people in eastern Africa. It's insane to see the scale of this storm. Another is NASA's firm service. It allows you to see active fires all around the world. Here we're seeing a cutout of the barefire wildfires that are occurring over in California. We can see the number of active fires in each area. You can even see the gray smoke compared to the clouds in the fire. It's devastating. But tools like this help people manage teams and resources for determining how to help in these scenarios. And another thing that's pretty current, which is why we're all online. We can take a look at this map from Johns Hopkins University. It shows the number of coronavirus cases all around the world, showing the visualizations lives. This on a map can help people identify the larger parts of impact. Similarly, this map from Nextstream shows the evolution and spread of the virus. If you visit this page, you can actually play an animation that shows how the virus spread. These types of tools are incredibly helpful for anyone in the science community that's trying to understand and study more about this virus. But also on a lighter note, people are also having some fun with maps where here radio. They have a map that lets you select a country in a period of time. So I can listen to music from Germany in the can listen to brazilian music in the 30s. But there are a ton of wellknown teams doing really great work trying to help. These are just some of the ones in the United States. We have usgs helping to map out earthquakes. USDA is monitoring food access, and they're not just monitoring food in the US, they're monitoring all around the world. They are all working towards providing more information to people who can actually make a difference, which is directly translating to livesaved. So how does all this stuff actually work? It definitely can seem really intimidating. There's a lot of information there, but getting started probably isn't as bad as you think. So let's break it down a little bit. Mapping applications look like your standard Jamstack app. So for those unfamiliar Jamstack sites are JavaScript APIs and markup. It's pretty much a static HTML website, but utilizing JavaScript in the browser to make any requests to your APIs that would provide dynamic data. It's not necessarily a new idea, but the architecture's got a cool name now, which also comes with some cool references. Boom Shakalaka. But the Jamstack concept is pretty much what you're working with out of the box with maps. First you have the javascript that makes the map and the libraries that run the map load and layered on top of that are your APIs, which for maps look like your underlying imagery. And anything you put on top, that compiles down to your markup, which the output is your standard HTML and that ultimately gets served the person using the app. So let's start at the top with JavaScript. We're going to look at leaflet. While it's not the only one, it's one of the most popular mapping libraries available right now. Here we have a simple maps example that we get from Leaflet's homepage. It's pretty basic map. On top we have some simple markers and a pop up, but behind that we're using OpenStreetMaps that's providing our base map layer. So how do we get there? Well, believe it or not, this small snippet is all it takes. So let's break it down. From the top we create a map instance. That map instance takes an id, which is the id of the div we're mounting on. The concept is kind of similar to what you would expect from react when you're mounting a component. But next we have the view of the map using latitude and longitude. We also set the zoom level that allows us to determine how far into the map we're actually zoomed in. Next we describe the layer that we want to add to the map. This part is called the tile layer. We'll get to tile layers in a little bit these, but we're going to set up a new tile layer instance using an endpoint URL. We also provide an attribution to give the surface credit. So this will give us the base of these map. But how do get those markers? This last snippet creates the marker using a leaflet marker instance, we set the position of where we want the marker to be using latitude and longitude again. Then we bind the pop up to the marker and we set sensible text and we continue to open it up in its place. And after that we have our basic map. All right, so if you're anything like me, you like to build your applications in react. Luckily we have react Leaflet, which is a library that takes leaflet and builds out native react components to help us quickly get started with maps. Here we have an example that's shown on the react leaflet homepage. If you notice, it's the same map that we saw before, but it's now built out using react components. Breaking this down again, we have our map component that wraps everything. We set our latitude and longitude using the center prop and we set our zoom using the zoom prop. Inside our map we have our tile layer component. Then we add our endpoint and an attribution. Then we add our marker component, set the coordinates with the position prop. Inside that we include a pop up component which we can nest with our simple text. And again, we have our basic map example. There are also some other flavors of leaflet available if you find yourself in another framework. Angular and Vue both have libraries that help you get started. Unfortunately though, I couldn't find a logo with the angular and leaflet mashup, so getting to that point isn't too bad. But let's talk about the data that actually goes into building the map. When dealing with maps, I like to think of a poorly drawn cake. The base map is the actual cake. Then you have your overlays that are your icing, and then you have some data sprinkled on top. Your base map typically looks like something like OpenStreetMap or modus terra. As we saw before, your overlays could be anything like a small sample of high res imagery or heat maps to visualize the data. On top of your data can literally be anything, such as active fires or evacuation zones. Starting to dig in a little bit further to the base map. This is essentially the map imagery that you have that's available to cover the entire globe. This will be the foundation of your map. The map image layers are called tile layers, which are composed of a bunch of small tile images that make up one large image. If you can see at the top, we have our tile layer endpoint. There's a few properties that get programmatically swapped out, like our date zoom and x and Y axis. The nice thing about this endpoint scheme though, is it's really common, so we can just as easily swap this out for OpenStreetMap, for instance. The reason though this gets broken up into smaller images is you don't want people having to pull down huge image files where the entirety of these map could be over 1gb in size, where realistically, someone using our map might only use a fraction of that. Overlays are similar to your base map, but a lot of times they just don't have nearly the same amount of imagery available, which is why they're called an overlay. This could be if you have some higher resolution imagery only for a little part of the map, or if you wanted to show a different kind of image for your map, like a heat map. Here we have an image overlay of the predicted 2020 population city over open street maps. We're showing the northeast United States where we can see. On the right we see Philadelphia, and you can also see DC and Baltimore on the left. This is just another example of some of the imagery NASA provides. And then we generally have data using shapes. We can visualize data really any way we want to. Here we're adding individual points of interest to show active gives, but you can also use lines, circles, polygons. Here we can see a fire boundary for those same wildfires on top of OSM. The points are helpful for seeing active fires, but seeing the boundary can be easier to comprehend for areas of danger. The point though is there really aren't any requirements for visualizing data, but there's just standards for how it interfaces with leaflet. Now, some of the data is free, some of it's not. NASA provides a ton of public data and tile endpoints. It makes it really easy to get started in a kind of plug and play kind of way. I showed you a few of those already, like the population heat map and our base maps. But others, such as digital glow, provide access to limited data. They have an open data program that gives access to imagery for disaster areas. This helps immensely for teams that are trying to put together solutions that are trying to help fighting disasters, but the rest of it would be a premium product that you would have to pay for. All right, so once we have our map and our data on top of it, we need to compile it down and serve it to the browser. This is actually the shortest step of the group. Compiling the app is pretty much what you would expect for anything standard on a webpack based app. You can use your favorite tool, like create react app, or Gatsby, those compiled down to a static site which outputs the HTML, CSS, and JavaScript. Once you have that compiled version, you can serve it wherever you want. At that point, it's really just object storage. So whether you want to put in a bucket on s three or use Azure's new tool, you have a lot of options. So what can we build with this? We've been working hard at element 84, trying to come up with a way for first responders and disasters scenarios to have a really easy to use UI. The goal here is that we'd be able to get the UI to a point where they don't have to think hard to get the information they want from the maps. This is a picture of first responders Trevor Skaggs took when he was up against the campfire wildfires in California from 2018. There's many natural disasters like this that unfortunately take place every year just like the barefire wildfires, but it's intense and it impacts people's lives. We want to try to help, so we want to try to put tools in people's hands that can actually make a difference. Those tools can help them fight current disasters and be more prepared for the next. We call this film drop. Dr. This is showing the east coast of Australia. I'm sure some of us are familiar with the bushfire wildfires that devastated their east coast. We can plug and play really any data source and provide can easy way to visualize that. Here we're showing active fires on top of satellite imagery. The hope is that whether someone wants to look at active fires or the boundary way, they don't have to fumble around with advanced settings to get there. After talking to some of the people that were actually in the field, like Trevor, we determined that we need to get this thing to a point where an operator can understand it in less than 15 minutes. As much as some of the other uis available have really great granular control. There's just not enough time to try to explain that and simply try to figure it out. With a simple toggle, we can get a completely different perspective for how a fire is impacting an area. This particular shot is from California campfire wildfires, where we can see active fire points and boundaries over satellite imagery. And we can also see some high resolution imagery and active fires over street maps. Another feature we added is the ability to add data points to the map. If someone wants to report somebody that's missing, they can easily add this data, point to the map and sync it up to the cloud for others to see. The cool thing about this, though, is we can store this locally in the browser, so if a person doesn't actually have network connectivity, they can still sync it up later. We also want to provide the ability for people to collect insitu data and make it immediately available. Someone with a drone can map out an area, upload it to their computer and sync it and make that available as a new layer that can really provide some powerful, up to date imagery for better understanding your surroundings. The imagery is actually from a co worker of mine who flew his drone up over Lake Lansing in Michigan. Film drop also gets a little bit more interesting on the data side. Not to go down a rabbit hole, but we're building this to be able to upload data directly to an AWS snowball edge, which is that gray box that the laptop is sitting on there, and it's basically a cloud in a box. And this gives people on the field, another level of processing power and capabilities that they just didn't have before. So what makes this impactful? Well, the hope here is that it can help first responders get the information they need to be more productive and efficient in the field. That could directly equate to more lives saved in many scenarios. So, realistically, imagine someone can area without cell service. They can fly a drone, upload that data to a snowball edge, and process that to visualize it on a map. This can help show things like what areas are impacted by a fire that are no longer safe to go to, that can immediately help save someone's life. And I know it might not be summer for everybody, but how about a road trip? Of course, we can have a little fun with this, too. I put together this simple demo that tracks a road trip on the east coast of the United States. This is actually a road trip with my wife in the summer of 2015. Ignore the stray lines out to Las Vegas. We actually flew through that part, but it allows us to simply get a look at all the locations we wanted to stop at throughout the United States. The cool thing, though, is if we select one of the points, and we can get a little itinerary with a picture of when we were there. So, how did I put this together? So, the first thing I did was starting to collect the locations I wanted and put them in a structured data format. Once I had that, I spun up a base of the app using a Gatsby starter that I created with leaf split. I'll get to the starter in a little bit here, but for now, it's going to be a little bit of hand waving with those locations. I needed to take the structured data and translate it into something that our mapping library would understand. This particular format is geojacent, which I was able to create by mapping over the locations and making shape groups. I actually needed to do this two times. Once in the example where I created the different latitude and longitude points, but also in a separate instance that I was able to create lines with two points. But after we have our data in our desired formats, we can take those raw JSON data sets, and we can plug them into a new leaflet Geojson instance, and simply apply it to the map. We'll also notice that I'm getting the bounds of the geojacent here, which is essentially the area that the geojacent data takes up on the map. So once I have those bounds, I can tell the map to view its current view to those bounds. So how about those tooltips so in the last slide we showed that our geojson sets with a custom option point to layer, which I've highlighted here. But this allows us to pass in a function which we can modify the layer being created in leaflet from our data. So what we're trying to do for each layer that gets created or each point is create a new marker. Within the marker we behind a pop up to it, similar to what we saw in our basic intro earlier. But within that we create some custom HTML in a string form that allows us to set the custom content for the pop up. And with all that we have our maps with some custom tooltip pop ups. Not too bad, right? But even if we wanted to extend this a little bit, we could sync this up to dynamically pull images from Instagram and show a gallery of images during our trip. We can use today's date and highlight these on the trip we're at for that day. We can even add a timeline where maybe we can scrub back and play the road trip. But to get here, the starter takes out some of the need to bootstrap the app so we can get productive right away and start playing with the data. If you're curious or interested in getting your hands dirty, the source code for this is all up in my GitHub. I'll post it to Twitter later. That's not a hint to follow me or anything, but also included in my talk notes and also what makes this impactful. Well, for me, it was just fun to build. I love road trips, but I think it's fun to take a normal event and make it a little bit more interactive to share with a map. Now, when I talk about we, I really mean all of us, I want to drive home the point that any of us can do this. The tools that we have available make this accessible for anybody to use. So as I mentioned before, I started this demo app with a starter to help get people more productive quickly with maps, I created a Gatsby starter for leaflet. We can very quickly spin up a new mapping app with very little fuss and immediately become productive. Using the Gatsby Cli, you can create a new project with the git address. This grabs the project and installs the NPM dependencies. Then you can run yarn or NPM develop whichever you prefer and this starts your local server. And then we have our mapping app. It's simple. I've been trying to add features little by little, but it's a good foundation to get started with a mapping app in react and as a bonus, the summer road trip demo can actually be used as a Gatsby starter. Similar to the leaflet one. You can instantly spin up a new road trip mapping app. You would just use the Gatsby Cli like the other starter. I also wrote a tutorial that actually walks you through setting up one yourself. Step by step. It goes right through the functionality and it has split but commits. For easy reference, I'll include the link with my talk notes as well, or you can also deploy it right to netlify if you have an account that makes it really easy to spin up fast and just a note. This works for anywhere in the world, not just the United States. Just remember to update the photos. I also have a few other guides available. Lives. You can create a travel bucket list, or you can create a Stats dashboard for the Covid-19 pandemic. I'll include the links to those in my talk notes as well. So, did I inspire you to learn a little bit more about maps? Well, if I did, I have a ton of resources for you to get started. In addition to those tutorials from before, I just recently launched a course on egghead IO that walks you through building a map from scratch for a react app. I also have a bunch of free lessons available if you're not ready to quite dive into a course yet. Also include those in my link notes and that's it. Thank you. Feel free to reach out if you have any questions about mapping or anything else about the jamstack.