Section 06 - Create Your First GeoJSON Document and Add Restaurant Locations to the Map
So far, we've created a new map, and we've even added a marker to a spot around the city. But we can extend this concept and use data standard formats in the geospatial space like GeoJSON that will allow us to have a good way to describe these locations.
Luckily, GeoJSON interfaces directly with Leaflet, so we'll have an easy time adding that data to the map, but how can we actually create a GeoJSON document with our locations?
Colby Fayock: [0:00] Hey, mapper. Welcome to Lesson Six. So far, we've learned how to add markers to our map, but map data can get more complex. For our first exercise, we're going to learn a little about GeoJSON. GeoJSON is a pretty standard data format to represent geospatial data. It's basically a JSON document but with a specific structure.
[0:16] Here, we'll learn about what that looks like. After we get familiar with GeoJSON, we're going to get started learning how to create our own. We'll use a website called geojson.io, which is a UI to help create GeoJSON documents.
[0:28] It will help us learn about how our locations relate to the document. We created our GeoJSON document with some locations we drew on the map. How would we do that manually? In exercise three, we're going to learn how to add a new location by hand. We'll look up the latitude and longitude of some restaurants and use that to add into our GeoJSON.
[0:44] In exercise four, we're going to learn how to take our GeoJSON and add it to the map. Sometimes, you'll see a GeoJSON file stored as .geojson. We're going to create it like a normal JSON file. We'll copy our document into a new file and import it into our app.
[0:58] To test it out, we can console.log out the results. We finally have our data imported into our app. How do we add it to the map?
[1:05] In exercise five, we'll take our newly imported GeoJSON data and apply it to the map. Leaflet makes this easy as they already have a function that we can use to manage this data. If you want some extra credit, now is the time to try it out yourself.
[1:16] At this point, you should know how to add locations manually to your GeoJSON and add it to the map. Try adding a new location to your GeoJSON data and seeing it up here on the map. That will do it for lesson six.
[1:26] With this, you should have a hold of some fundamentals that will let us build complex maps. Have fun with this lesson, and good luck.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!