Style React Leaflet Shapes using Component Props
In this lesson, you'll learn how to style shapes on your map to change the look and feel using React Leaflet's API. We'll use React component props like color and weight on our shapes to change the colors and styles.
Colby Fayock: [0:00] We're going to start off with a basic map of Bay Lake, Florida. On top of that, we have some shapes drawn over some of the parks and Walt Disney Resort.
[0:06] In the code, you can see that we're importing a Map, TileLayer, Polygon and Circle in React Leaflet. You can also see some of the data that we're importing to use on our map. For the map itself, we have our Map component, our TileLayer, and a couple different shapes that we're using to represent the data.
[0:21] As you can see on the map, all the shapes are blue, which is the default for React Leaflet. If we want to change the color, React Leaflet makes this easy, and we can simply pass in the color we want as a prop. If we look back at the map, we can see that Animal Kingdom is now green.
[0:32] Let's add a few more colors. Let's make Blizzard Beach red, Hollywood Studios blue, Epcot magenta, and let's make Magic Kingdom yellow. Once we hit save, we can see all of our new colors.
[0:43] What else can we do? To start, let's give Animal Kingdom a weight of 10, and opacity of .8. Now if we look in our browser, we can see that Animal Kingdom is a little bit thicker with its border, but it's also a little bit opaque. Next, we can give Blizzard Beach a dashArray of 4. Now if you look at the map, you can see that we now have a dash line around Blizzard Beach.
[1:01] For Hollywood Studios, let's try giving it a fillColor of cyan. As we can see here, it doesn't touch the border, but what it does is change the inside to cyan.
[1:09] If we decide that we don't want to border at all, we can just give a stroke of false. If we decided that we only wanted to change the opacity of fill, we can set the fillOpacity to .8. Now we can see Epcot has no border, but a .8 opacity for its fill.
[1:23] Finally for Magic Kingdom, we're going to combine a few. Let's set the opacity to 1. Set the fillOpacity, .6. Let's give it a fillColor of cyan and a dashArray of 12. When we pull out the map, we see Magic Kingdom with a cyan fill and a yellow dash line.
[1:41] In review, we used React Leaflet component props to add things like color and weight to our components. Even after combining a few of them, we can see all of our shapes in the map.