Section 01 - Overview of Mapping Technologies with Leaflet
The last time you drove out of town, how did you find where to go? That's right, you most likely used a mapping app like Google Maps or Apple Maps, but did you ever think about how those maps were built and whether or not you could build your own?
Mapping apps are an everyday tool we take for granted. They give us a ton of power in the palm of our hand like driving directions or trying to look for the best place to find coffee when we're on vacation.
But there's a lot more to maps than driving directions! Scientists use maps every day as a research tool to try to analyze patterns and make impactful decisions.
For our first lesson, we're going to briefly walk through how maps work and kick off the workshop with some fun extra credit!
Colby Fayock: [0:00] Hello mappers, welcome to your first lesson. We're going to start off with a little overview of maps. That way we can have a little context as we start to dive in. Maps have long been a tool that we've used to communicate with others that we joke about it now. Before we had phones and computers, people actually used physical copies to get around.
[0:15] Today that looks much, much different. If we want to take a road trip across our country, we can easily get those directions. Maps are more than just getting directions. They're our way of communicating data. Maps like this one from Johns Hopkins University shows us all of the coronavirus cases.
[0:30] It's a great way to visually communicate fixed sets of location-based data, but that data doesn't have to be sad. It can be where your favorite restaurants are, or it can be where you want to find a local cup of coffee. Just so happen that's similar to what we're going to be building.
[0:42] Before we get into that, what's actually going on behind the map? Mapping applications look like a standard JAMstack app. For those unfamiliar, JAMstack sites are JavaScript API's and markup. It's pretty much like a static HTML website but utilizing JavaScript in the browser to make any request to your API's that would provide dynamic data.
[0:59] 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 load the map run. Layered on top of that are your APIs, which for maps, look like your underlying imagery, and anything you put on top.
[1:13] That compiles down to your markup, which the output is your standard HTML. That's what ultimately gets served to the person using the app.
[1:19] What are we going to learn? In this course, we're going to start with a restaurant locator website that's in need of a map page. We're going to build up that map page so people can have an easy time finding their favorite restaurants. We're going to first learn how to add a map to a React App. We're going to then add all the data and then customize it to make it our own.
[1:35] Are you ready to get moving? We're going to start off with something fun and simple. In our app, we start off with an avatar, but that avatar is me. The first extra credit is to update that image to a picture of you or something fun.
[1:45] You can find the file location in the lesson one instructions on GitHub. Once you're done, make sure you check back for the next lesson where we're going to start by adding a map to our app. Good luck.