Use Geojson.io to Draw Custom Marker and Shape Features for a React Leaflet Map
In this lesson, we'll use geojson.io to add markers and draw shapes to create a GeoJSON document that we can add to our React Leaflet map. We'll walk through drawing the shapes, creating a new file to store the GeoJSON data, importing it to our app, and displaying it on our map with the React Leaflet GeoJSON component.
Colby Fayock: [0:00] We're going to start off with a basic map centered on Central Park in New York. We want to create a scavenger hunt. Part of that we'll be setting up location-based clues so people can find the items around the park. It's hard to know the coordinates of each location, so we can use this tool, geojson.io where we can draw the markers right on the map.
[0:15] Let's start off with a marker tool. If we select it, we can put a marker on the Central Park Zoo. If we want to add another location, we can click it again and add one to the Playground. If you notice on the right, each time we add a point, it creates a new object in our FeatureCollection.
[0:27] The FeatureCollection is part of the schema that represents a GeoJSON document. Now that we can use it in our code, we start off with a Map and a TileLayer from 'react-leaflet'. We're using that Map and TileLayer as components to create our app. We're also creating a fix for our icons to make sure that our markers show up correctly.
[0:42] To use our data, let's create a new file called scavenger-hunt.json. Then let's copy the GeoJSON that was created in our browser and paste that into our scavenger hunt file.
[0:51] Next, let's import our scavengerHuntGeoJson from our file's location. To use that file, we can import the GeoJSON component from 'react-leaflet', add it to our map where we can set the data prop to our file. Then if we reload the map, we can see our two markers.
[1:07] Next, we probably want to add more locations. What if we want to represent an area rather than a single location? Using the polygon tool, we can draw a shape over Lilac Walk.
[1:16] Additionally, if we want to represent the area between these two fountains, we can use the polygon tool again and draw our shape. If we're happy with that, we can copy our GeoJSON again. Update our scavenger hunt file and when the map reloads, we can see our new shapes on the map.
[1:33] In review, we used geojson.io to draw shapes and markers on a map. This created a GeoJSON document for us which we added to our scavenger hunt file that we imported to our app and used with a GeoJSON component to show our scavenger hunt locations on our map.