Up next in 10
Building Maps with Impact on React and the JAMstack by Colby Fayock || Rect Virtual Conference
19K views
Nov 9, 2023
We take for granted being able to find a local coffee shop or nearby gas station using the map on our phone. Those maps not only help find a boost towards the end of the day - they help scientists and first responders save lives around the world. With the power of Javascript and the JAMstack, we’ll walk through what libraries help make creating mapping tools possible. We’ll talk about how maps impact all of our lives and some of the technical challenges faced when developing the mapping tools scientists use every day to debug the earth. About Speaker: Colby Fayock is a Lead UX & Front End Engineer at Element 84 that’s passionate about tackling challenges that can help save people’s lives and make the world a better place including video streaming services, e-commerce with ThinkGeek.com, satellite dashboards, and helping first responders. C# Corner - Community of Software and Data Developers https://www.c-sharpcorner.com
View Video Transcript
0:00
Awesome. Well, hey everybody. Today I'm going to be talking about maps. We'll talk about the impact they can have on the world, and we're also going to dive in about how you can build them with a little bit of JavaScript
0:11
So who am I? I'm Colby Fayak. I'm the one hugging BB and Kyla Ren over there. I work on the U.X and front inside of things at Elimin84. You can find me pretty much anywhere on the web by just Googling my name as I'm the only one in the world
0:24
So looking at this first slide, it's a screenshot of Google Maps in downtown Alexandria of Virginia
0:29
here in the United States. This is Element 84's HQ. We're all probably pretty familiar with Google Maps or Apple Maps
0:36
They provide us with a lot of features we use every day. Like here, we can check out some points of interest nearby
0:41
We can find out where we can grab a quick cup of coffee, find the best sushi, which is MoMo sushi, by the way, if you're in the area
0:48
Or we can just look at some pictures. This next screenshot is of public transit directions
0:53
It's showing the metro I would take when I would get to my apartment to work from my apartment
0:59
My wife and I share one car, so when I didn't have it, I was able to get a good idea of how long it would take to get downtown to work
1:06
This next one shows some driving directions. This is the route I would take to get to my mom's house where I grew up
1:11
The time here is a little bit optimistic, though. It never actually took under four hours to get there with traffic
1:16
So how many of you like to travel? As much as we'd all love to be in another country every month, that's usually not feasible, especially now
1:23
So my wife likes to take virtual vacations around the world, which is also a little bit better for the budget, but Google Maps lets her easily
1:29
travel around and check things out. Here we get a good look at the Great Pyramid of Giza
1:33
which we can see an overhead view from above to get an idea of what this area looks like
1:38
The cool thing about this, though, is we can actually get a close-up look with street view
1:42
We can actually get an idea of the scale of this structure. It's huge. And we can get an idea
1:47
of how big it really is. When I was talking to my wife about this, she was also in one of the
1:52
middle of one of her journeys. She wandered to a place called the Valley of Geysers
1:56
which is located in Russia on the Kamshka Peninsula. It turns out this geyser field has the second largest concentration of geysers in the world
2:04
It seems pretty wild to me that we can get a good look at this place, and it's all because someone took the time to take a picture of this remote area
2:10
This particular picture was from a local guide, so really any of us can do this
2:14
The neat thing is we can check this kind of place out, even if we'll never have the opportunity to go
2:19
It's obviously not the real thing, but we're still able to get a glimpse of remote places all around the world
2:23
So where do we actually get the data to build out these features
2:28
Well, first, you have an obvious one. You have scientists and ysts. This is just a stock photo I found from GIS University, but they're constantly hard at work
2:35
collecting and processing data. And I really have to hope that they always look this happy
2:40
You also have technology. Thanks to the cars and the people that build street view, we can get a close-up look of the pyramids, and we can also get some fun Easter eggs along the way
2:49
This also includes a ton of people around the world, like I should in Russia
2:52
There are local guides all over contributing to pictures and data. And did I mention there were Easter eggs
2:57
Thanks, Tokyo. There are a lot of, a ton of like these all over the internet
3:01
But then we have satellites. There are a bunch of different types
3:05
Some collect imagery, some collect more in a data format, but they help produce the assets we use to create our maps
3:11
A good example of this is cryosat from ESA. It uses its onboard instruments to measure changes in ice thickness
3:18
It can measure changes as accurate as 0.7 centimeters per year. per year. The example on the right is showing Antarctica mapped out in 3D using the data it collected
3:28
Another example is NASA's modus terra. Using its image sensors, it covers every point on the
3:33
Earth every one to two days. It collects large-scale global dynamics like cloud coverage
3:37
ocean processes, and changes in the atmosphere. The shot on the right is a photo over Lake Erie
3:42
in the US. NASA alone is working on all the ones you see here. They published this image to show the
3:49
state of missions operated by the Earth team. It shows satellites in orbit now and out until
3:53
2023. But NASA and ESA aren't alone here. There's thousands of satellites like those flying
3:57
over us right now. Some of them aren't even working, but a lot of them are collecting images
4:01
and data about our planet. These satellites are also cool from a consumer point of view. NASA and
4:07
other teams put up pictures on Instagram for our daily dose from above. At the top, you see
4:11
the International Space Station, which isn't a satellite, but it shows the Earth at night. The bottom is from daily overview. It gives a look at Lake Natron and Tanzan
4:19
which is just mind-blowing. Then on the right, we had this gorgeous look from NASA Earth
4:23
It's a picture of Merguia Archipelago, which is on the board of Burma and Thailand
4:27
It's awesome to be able to see these kinds of inspiring pictures right in your Instagram feed
4:31
But switching back to Mass for a second, this is just a look at downtown Alexandria
4:36
But behind that, it's open street map. OSM is an open source project
4:40
It maintains a huge set of metadata that includes the attributes and properties that define specific geographic areas
4:46
It allows mappers all around the world to contribute, contribute so with their tooling, anyone can identify points of interest or update features
4:54
So with our powers combined, this means another source of the data is you
4:59
But millions of people all over the world have mapped on OSM. There's meetups, communities, everything all over
5:05
Others just work alone as individuals. But thousands of people work on this every single day
5:09
You also see big companies who use or contribute back to OSM. Apple, for instance, uses it for regions where commercial data isn't necessarily available
5:18
Lyft contributes back with their work too. They're all adding points of interest in drawing streets
5:24
And it's more than just learning about what's in the U.S. or Germany, but third world countries all over the world
5:28
This is incredibly helpful from a humanitarian aid perspective. Here we can see an identified refugee camp on the border of South Sudan and Ethiopia
5:36
A lot of times, people in these areas might not know where they can be safe, but OSM allows people to identify these features that help others survive
5:45
So where am I going with all this? Well, the point I'm trying to make here is that these maps are for more than just driving directions
5:51
Maps are literally giving people tools to save the world. There's tons of research going on in many different areas from climate change to agriculture
5:59
By taking collected data and applying it to a map, we're providing another visualization medium for scientists that can actually make a difference in people's lives
6:08
Some examples that you can find online are services like NASA's worldview. Here we see tropical cyclone Edai, which is one of the worst cyclones on record to affect Africa
6:16
in the Southern Hemisphere. It affected close to 2.2 million people in Eastern Africa
6:21
It's insane to see the scale of this storm. Another is NASA's firm service
6:26
It allows you see active fires all over the world. Here we can see a cutout of the bare fire wildfires
6:31
which are currently happening in California. We can see the number of active fires in each area
6:36
You can even see, if you look closely, the gray area that's, you can see the smoke compared to the clouds from the fires
6:43
It's devastating, but tools like these help teams manage resources, for determining how to help in these scenarios
6:49
And for something else that's pretty current, which is while we're all online
6:53
we can take a look at this map from Johns Hopkins University It shows the number of coronavirus cases around the world Showing the visualizations on the map help people identify the larger areas of impact
7:04
Similarly, this map from NextStrain shows the evolution and spread of the virus
7:08
If you visit this page, you can actually play an animation that shows how the virus spread
7:13
These types of tools are incredibly helpful for anyone in the science community that's trying to study
7:17
and understand more about the virus. But on a lighter note, people are also doing some fun things
7:22
with the maps. We're here at radio.com. They had this map that lets you select a country in a time period
7:27
So I can listen to music from Germany in the 50s or Brazilian music from the 30s
7:33
But there are a ton of well-known teams doing great work trying to help. These are just some of the ones from the United States
7:38
We have USGS helping to map out earthquakes. USDA is monitoring food access
7:43
And they're not just monitoring the US. They're monitoring all around the world. They're all working towards providing more information
7:49
to the people who can actually make a difference, which is directly translating to live safe
7:53
So how does all this actually work? It definitely seem intimidating. There's a lot of information there
7:59
but getting started probably isn't as bad as you think. So let's break it down a little bit
8:03
Mapping applications look like a standard JAMstack app. So for those who are unfamiliar with JAMstack
8:09
Jamstack sites are JavaScript APIs and Markup. It's pretty much a static HTML website
8:14
but utilizing JavaScript in the browser to make any requests to your APIs that would provide dynamic data
8:19
It's not necessarily a new idea, but the architecture's got a cool name now. which comes with a lot of cool references as well
8:26
Boom, Shackalaka. But the JANSEAP concept is pretty much what you're working with out of the box with maps
8:31
First, you have the JavaScript that makes the map and the libraries that load the map run
8:35
Then layered on top of that are your APIs, which for maps look like underlying imagery and anything you put on top
8:41
That compiles down to your markup, which the output is your standard HTML
8:44
That ultimately gets served to the person using the app. So let's start at the top of JavaScript
8:50
We're going to take a look at Leaflet. though it's not the only one
8:54
it's the most popular mapping library available right now. Here we have a simple example of a map that we get from Leaflets homepage
9:01
It's a pretty basic map. On top of that, we have a simple marker and a pop-up
9:05
Behind that, we're using Open Street Maps as we saw before. That's providing our base map layer
9:10
So how do we get there? Believe it or not, this small snippet is really all it takes
9:14
So let's break this down. From the top, we create a map instance
9:18
That map instance takes an ID, which is the idea of the div that we're matting on
9:22
kind of similar to the concept you would imagine when you're working with React
9:26
But next, we set the view of the map using latitude and longitude
9:29
We also set zoom level that allows us to determine how far into the map we're zoomed in
9:34
Next, we describe the layer we want to add to the map. This part is called the tile layer
9:39
I'll go over tile layers in a little bit, but we set up a new tile layer instance using an endpoint URL
9:44
We also provide an attribution to give the service credit. So this will give the base of the map, but how do we get that marker
9:49
This last snippet creates a marker. We're using leaflets marker instance. We set the position of where we want that marker to be
9:57
using latitude and longitude again. Then we bind a pop-up to the marker with some simple text
10:01
and we continue to open it up in its place. And after that little bit, we have our map
10:07
All right, so if you're anything like me, and I think you are since you're at this conference
10:11
you like to build your applications and React. Luckily, we have React Leaflet
10:15
which is a library that takes Leaflet and builds out native React components to help quickly build maps
10:19
Here we have the example that's shown on the React Leaflet homepage
10:23
If you notice, it's the same map that we saw before, but it's now built with React components
10:27
Breaking this down again, we have a map component that wraps everything
10:31
We set our lat and long using the center prop, and we set our zoom with the zoom prop
10:36
Inside our map component, we have a tile layer component. Then we add our endpoint and an attribution, same as before
10:43
Then we add a marker component. We set the coordinates with the position prop
10:47
Inside that, we set up a pop-up component, which we can then nest our simple text
10:52
And again, we have our basic map. There are some other flavors of leaflet available
10:59
if you find yourself in another framework. Angler and View both have libraries to help you get started
11:04
Unfortunately, though, I could find a logo with an Angular and Leaflet mashup
11:07
But while React provides a good base to get started, the real magic is working directly with the Leaflet API
11:14
The way Leaflet works is by attaching itself to the browser window. This is probably less common than it used to be
11:19
But once we have our component mounted, we have access to all the leaflet APIs
11:24
where we can create some maps, not of this world like this example here. But that kind of thing isn't without itself and downs
11:31
And when trying to mix it with a React, React has its own internal state that it's trying to manage
11:36
So once you start building complex solutions, this can start to get out of sync with the map if you're not careful
11:41
The solution that we've been trying to take is that we start with a React foundation
11:45
but we build on top of it with the leaflet This allows us to easily construct our base map
11:50
but then perform some complex operations with the data we want to display
11:54
On top of all that, there are a ton of plugins that layer on top of leaflet that make it easier to do hard things
12:00
In this screenshot, we see leaflet anti-meridian. The challenging thing about maps is that the Earth is actually round
12:07
So when trying to represent this in a 2D format, your coordinates map to a single area
12:11
What ends up happening is like the top where the lines look like they're kind of going back and forth across the map
12:16
across the map. So to fix this, we can use a little bit of math and process the location data, or we
12:21
can use this plugin to take out the hard work and know that we're getting it right
12:25
A more visual example is Leaflet Terminator. It lets you easily overlay day and night regions on the map
12:31
It's just a nice way to easily identify the time references. So getting to that point isn't too bad, but let's talk about the data that actually goes
12:39
into building that map. When dealing with maps, I like to think of a poorly drawn layer cake
12:44
The base map is the actual cake. Then you have your overlays as your icing and some data sprinkled on top
12:51
Your base map typically looks something like Open Street Map or Modestera, as we saw before
12:55
Your overlays could be anything like a small sample of high-res imagery or heat maps to visualize data
13:00
On top of that, your data can literally be anything such as active fires or evacuation zones
13:07
Starting to dig in a little bit further with the base map, this is essentially the map imagery you have that covers the entire globe
13:12
This will be the foundation of your map. The map image layers are called tile layers
13:17
which are composed of a bunch of small tile images that make up one large image
13:21
If you can see at the top there, we have our tile endpoint. There are a few properties in there
13:25
that get programmatically swapped out, like the date, the zoom, and the X and Y axis
13:29
The nice thing about this endpoint scheme is it's really common. So we can just as easily swap out an endpoint
13:34
for Open Street Map, for instance. The reason this gets broken up into smaller images
13:38
though, is you don't want people having to pull down huge image files. The entire of the map could be possibly over one gigabyte
13:43
in size, where realistically, the person using your map may only use a fraction of that
13:50
Overlays are very similar to your base map but a lot of times they don have nearly as much imagery available which is why they called overlays This could be if you have some high resolution imagery for only a little part of the map or if you want to show a different kind of image over your base map such as a heat map
14:05
Here we have an image overlay that the predicted 2020 population density
14:09
on top of the open street map. We're showing Northeast United States, where on the right you can see Philly
14:14
and you can also see DC and Baltimore on the left. This is just another example of some of the imagery
14:19
that NASA provides us. And then we generally have data, Using shapes, we can visualize this data really any way we want
14:27
Here, we're adding individual points on the map for each active fire
14:31
But you can also use lines, circles, and polygons. Here we see the fire boundary for those same exact wildfires on top of OSM
14:39
The points are helpful to see active fires, but seeing this boundary can be easier to comprehend the entire area of danger
14:45
The point though is there really aren't any requirements for visualizing the data
14:49
but there are standard data formats that interface with leaflet. Though there are a few, I found that geo-jason is the most common with my work so far
14:56
It's really just a JSON document with a particular schema. The site I'm showing here is geo-jason.io
15:01
It allows you to draw on the map and get the geo-jason. But you can see here that we have a simple square
15:06
It creates a feature with a geometry type of polygon. Then we have five coordinates, which represent the line that's drawn to make up our four corners and open back to close
15:15
Now, some of the data is free, some of it's not. Nasson provides a ton of public data and tile endpoints
15:21
It makes it easy to get started in a kind of plug-and-play way. I showed you a few of those already like population heat map and our base map
15:28
but others such as Digital Globe provide open access to limited data. They have an open data program that gives access to imagery for disaster areas
15:36
This helps immensely for teams trying to put together solutions to help those fighting the disasters
15:41
But the rest of it would be a premium product that you would have to pay for. APIs can range from simple to extremely complicated
15:48
Most of the time, if you're building commercial solutions, you would probably want to roll out your own
15:53
This way you can protect your data and have more control over what you're working with
15:57
And there's tools to help you do that. Stack, for instance, is an open source spec that helps make geospatial data searchable
16:02
There's an API that's also open source that makes it easy to make those searches. But say you wanted to make that data private
16:08
since this is client's side, we can require authentication on each request
16:12
This also opens the door for data manipulation, where you might want to do on-the-fly processing
16:17
based on user controls. You can end up with some really powerful solutions. All right
16:22
So once we have our data, we have our map and we have our data on top of it
16:26
we need to compile it down and serve it in the browser. This is actually the shortest step of the group
16:31
Compiling the app is pretty much the same as you would expect for really anything else built
16:34
on top of a webpack-based app. You can use your favorite tools like create racked app or Gatsby
16:40
Those tools compiled down to a static site, which outputs HTML, CSS, and JavaScript
16:46
Once you have that compiled version, you can serve it wherever you want. At that point, it's really just object store
16:50
So whether you want to put it in a bucket on S3 or use Azure's new tool, you have a lot of options
16:57
So what can we build with this? Well, we've been working hard at L-N-84, trying to work with first responders in disaster scenarios to come up with a really easy-to-use UI
17:06
The goals that we can get to the point in the UI where we don't have to think to get the information we want from the map
17:12
This is a picture first responder Trevor Skaggs took as he was up against the campfire wildfires in California in 2018
17:19
There are many natural disasters like this that unfortunately take place every year
17:23
It's happening as we speak. It's intense and it impacts people's lives. We want to try to help
17:28
We want to be able 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
17:36
We call this film drop to YAR. This is showing the East Coast of Australia. I'm sure most of us are pretty familiar with the bushfire wildfires that devastated their East Coast
17:45
We can plug and play really any data source and provide an easy way to visualize it
17:49
Here, we're showing the active fires on top of satellite imagery. The hope here is that whether someone wants to look at the active fires or the boundary
17:56
they don't have to go fumble around with the advanced settings to get there
18:00
After talking with some of the people who are actually working in the field
18:04
we determined that we need to get this thing to a point where an operator can understand it in less than 15 minutes
18:09
As much as some of the other UIs available have really great granular control
18:13
there's just not enough time to try to explain that or simply try to figure it out
18:17
But with a simple toggle, we can get a completely different perspective of how a fire is impacting our area
18:23
This particular shot is again from the California Campile Wildfires of 2018
18:28
We can see the active fire points and boundary over satellite imagery, and we can see high-resolution imagery and the act of fire over street maps
18:35
Another feature we added is the ability to add data points to the map
18:40
If someone wanted to report a missing person, they can easily add this data point to the map and sync it up to the cloud for others to see
18:46
The cool thing about this, though, is we can store this locally in the browser. So if the person is using it doesn't have network connectivity, they can sync it up later
18:55
We also want to provide the ability for people to collect in-situ data and immediately make it available
18:59
Someone with a drone can map out their area and upload it to a computer and sync it with this app to make available as a new layer
19:06
That can provide some really powerful up-to-date imagery to better understand your surroundings
19:10
This imagery is actually from a coworker of mine who flew as drone up over Lake Lansing and Michigan
19:16
Filmshop also gets a little bit more interesting on the data side. Not to go down a rabbit hole here
19:20
but we're building this thing to be able to upload the data directly to an AWS Snowball Edge
19:25
which is that great box that the laptop is sitting on. It's basically a cloud in the box
19:29
and this gives people out in the field another level of processing power and capabilities
19:33
that they just simply didn't have before. So what makes this impactful
19:37
Well, the hope here is that we can get help to first responders to get the information they need to be more productive
19:43
and efficient in the field. That could directly equate to more live, in many scenarios
19:47
So realistically, imagine someone in an area without cell service. They can fly a drone, upload that to the Snowball Edge
19:54
and process that to visualize on a map. This can help show things like what areas are impacted by a fire
19:59
that are no longer safe to go to. That can immediately help save someone's life
20:06
And another thing we're working on is an app for one of our customers in the commercial satellite space
20:10
So I'm sure we can all agree that space is pretty cool. And the idea that these machines are floating around in space
20:16
collecting data is just mind-blowing. But how do we collect that data and make it available in a format that's easy to consume
20:22
We're working closely with Capella space. We're helping to provide scientists an easy way to look up and yze the data that Capella has collected with their satellites
20:30
Here we're showing a search of Philly. We can see all the imagery that they have available at this time
20:35
Once you select one of the results from the search, you can get a closer look and actually overlay that image on the map
20:41
This also comes with a big bucket of metadata. We only get a glimpse of that here, but that's typically more useful for people
20:46
who work closely with this type of data every day. If Capella doesn already have that imagery that they want we provide an interface that lets them actually task their satellites in real time Once Capella receives this request they utilize their open and close date to capture imagery over the requested area
21:02
the next time their satellites pass over that area of interest. Once Capella's satellites successfully capture that image
21:10
we run it through a processing pipeline using AWS Cloud Services as part of our film drop solution that we talked about a little bit earlier
21:16
Here we use S3 buckets for storage. We allow Capella to set up custom lambdas for running
21:21
their science code on that data. The output is a metadata repository
21:25
that we can put a search API on top. Once they find that data with a search or a new task
21:31
they can proceed to order it. The order provides access to pretty much all the assets
21:38
That's usually the high resolution imagery in a dump of the metadata. So again, what makes this impactful
21:44
Well, we're providing a way for scientists to easily discover and yze data from satellites
21:48
This gives them more tools and information to make better decisions, that can impact people on this planet
21:54
I know we're already a little bit past summer, but how about a road trip? Of course, we can have a little bit of fun with this too
22:01
I put together a simple demo that tracks a road trip on the east coast of the United States
22:05
This is actually a road trip that my wife and I took in the summer of 2015
22:09
Ignore the straight line out to Vegas, we actually flew for that part of the trip, but it allows us to simply get a look
22:13
at all the locations that we want to stop at throughout the States. The cool thing is, though
22:18
we can select one of these points and get an itinerary with a picture from when we were there. So how did I put this together
22:23
So the first thing I did is start collecting the locations I wanted to work with and put them in a structured data format
22:29
Once I had that, I spun up the base of the app using Gatsby Starter I created with Leaflet
22:33
I'll get to that a little bit here, but for now there's going to be a little bit of hand waving
22:37
With those locations, I needed to take the structured data and translate it into something our mapping library would understand
22:44
This particular format is GeoJason, which I was able to create by mapping over the locations and making the shape groups
22:50
We actually needed to do this two times. Once in this example, where I created the different latitude and
22:55
longitude points, but also in a separate instance where I had to put two groups of
22:59
the two points together to create a line. After we have our data in the desired formats, we can take those raw geo-jason data sets
23:07
and plug them into a new leaflet geo-jason instance and simply apply them to the map
23:11
You'll notice here that I'm getting the bounds of the geo-jason, which is essentially the area that the geo-jason data takes up on the map
23:18
Once I had those bounds, I tell the map view to set its current view to those bounds
23:23
So how about those little tool tips? In the last slide, we showed that one of our geo-jason sets with a custom option point-to-layer
23:30
which I've highlighted here, what this does is allow us to pass in a function where we can
23:34
modify the layer being created in leaflet from our data. So what we're doing is for each layer that gets created or a point, we create a new marker
23:42
Within that marker, we bind a pop-up to it, similar to what we saw in our basic intro earlier
23:46
Within that, we create some custom HTML in string form that allows us to set
23:50
the custom content for that pop-up. With all that, we have our map with some custom tooltip pop-ups
23:57
Not too bad, right? But we could even extend this if we wanted to. We can sync this up by dynamically pulling from Instagram and show a gallery of
24:04
imagery during our trip. We can use today's date and highlight where on the trip we're at for that day
24:09
even at a timeline where maybe they can play back the road trip. But to get here, the starter takes out some of the need to bootstrap the app
24:16
so that we can get productive right away by playing with the data. If you're curious or interested in getting your hands dirty
24:22
the source code for this is up on my GitHub, which I'll also post a Twitter later
24:26
It's not a hint to follow me or anything, but I'll also include it in my talk notes
24:30
And for the last time, what makes this impactful? For me, this was just fun to build
24:35
I love road trips. It's fun to take some normally event and make it a little bit more interactive to share with a map
24:40
Now, when I talk about we, I really mean all of us. I want to drive home the point that really any of us can do this
24:47
The tools we have available make this success. for anyone to build with
24:50
So as I mentioned before, I started that demo app with a starter
24:54
To help keep people get productive quickly, I put together a Gatsby starter for Leaflet
24:58
We can very quickly spin up a mapping app with very little fuss, and immediately become productive
25:04
Using the Gatsby CLI, you create a new project with a Git address
25:08
This grabs the project and installs the NPM dependencies. Then you run Yarn or NPM develop, and this starts your local server
25:15
And then we have our simple mapping app. mapping app. It's simple. I've been trying to add features little by little, but it's a good
25:22
foundation to get started with a mapping app and React. And as a bonus, the summer road trip
25:27
demo can actually be used as a Gatsby starter. Similar to the leaflet one, you can instantly
25:32
spin up a new road trip app with it. You would just use it with the Gatsby CLI similar
25:36
to the other starter. I also wrote a tutorial that walks you through setting one up yourself
25:40
It goes step by step through the functionality with split out commits for reference. I'll also
25:44
include that in my talk notes later. You can also deploy the right to Netlify if you have an account
25:50
That just makes it easy to spin up really fast. And just to note, this works for anywhere in the world, not just the United States, but just
25:56
remember to update the photos. I also have a few other guides available today, like creating a travel bucket list or creating
26:02
a stats dashboard for COVID-19 pandemic. I'll include those links to my talk notes as well
26:08
If you're interested in getting involved, there's a huge community out there waiting for you
26:13
You can find a state of the map conferences all around the world. They have a huge community of people working with maps
26:18
The interest there range from people actually collecting mapping data and people who are using
26:22
the data. I was lucky to go to one in Michigan as an attendee. It's awesome to see how passionate people are about the technology
26:29
And the stories there will both break your heart and inspire you to do more
26:33
If you want to get involved from an actual mapping perspective, OpenStreetMap gives you tools to get started
26:39
This screenshot is an overhead look at Philadelphia City Hall. You can see on the left some of the metadata for the location
26:44
We can go into edit mode and make changes. For instance, we can click into the street
26:49
We can see that it's one way and the surface type is asphalt. If we wanted to add the speed limit or if we noticed that something with this was wrong
26:56
we can add those details. They also have a nice little guided tour
27:00
It walks you through each of the tools to teach you how to make changes on the map
27:03
And they also have a vast wiki to help you get a good understanding of what's going on
27:08
You can be part of a huge community of mappers working every day to fix and keep it updated
27:13
I found this particular photo on the Open Street Map Facebook community
27:17
which I just thought was really awesome. So did I inspire you to learn a little bit more about maps
27:23
Well, if I did, I have a ton of resources for you to get started. I just recently launched a course on egghead. I
27:29
That walks you through building a map from scratch in a React app. I also have a ton of free lessons available if you're not quite ready to dive into a course
27:34
I'll also include this all with my notes. And that's it. Thank you so much
27:39
Feel free to reach out to me with questions or chat more about mapping apps or really
27:43
anything, Jamstack. Thanks
#Earth Sciences
#Engineering & Technology
#Geographic Reference
#GPS & Navigation
#Maps
#Travel Guides & Travelogues