Add Shapes to a Map in React Leaflet
In this lesson, you will learn how to add the Polygon and Circle shape components to a Map when using React Leaflet. We'll walk you through importing both components, adding each component to the Map, and setting a unique color for each shape.
Colby Fayock: [0:00] We're going to start off with a basic map zoomed in on Disney Resorts in Bay Lake, Florida. Inside our App, we have a Map component and a TileLayer component pointed to OpenStreetMap.
[0:08] The first thing we want to do is import a Polygon from react-leaflet. Now that our Polygon is imported, we can add it to our Map.
[0:13] For our Polygon, we're going to need some location data. We're going to add a constant called hollywoodStudiosPolygon with a set of coordinates that make up our Polygon. With our data, we can add it to a positions prop on our Polygon. For fun, we can make the color blue. Once we hit Save, we can open back up our browser and see our Polygon over Disney's Hollywood Studios.
[0:30] Next, to add our circle, we want to import our Circle component from react-leaflet. Similar to the Polygon, inside our Map we can add our Circle component. For our Circle, we need some location data. For this, we're going to define a constant called epcotCenter.
[0:42] Unlike our Polygon, all we need for our Circle is a center. Now on our Circle, we can add a center prop with that center value. For the Circle, we want to also set a radius. We'll set this to 400. Again, for fun, let's set this color prop to magenta. Once we hit Save, we can open back up our browser and see our circle over Epcot.
[0:58] In review, we imported a Polygon component and a Circle component from react-leaflet. For our shapes, we created some data including our Polygon coordinates and a center.
[1:07] We used that data to create a Polygon component and a Circle component where we set our colors to blue and magenta. With that, we have our shapes over the Disney Resort.