Adding Shapes to Maps with Leaflet and GeoJSON
With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.
[00:00] Now that we have our basic map in place, let's add some more interesting bits to our application here. You can see that we have gone and added jQuery as a dependency. That is because we're going to use it to load some data.
[00:15] This is going to be GeoJSON data, which is just the standard format for representing geographic shapes in JSON. We're going to use the getJSON call and then just call this callback here called renderMap. We'll dump all of our code into that function.
[00:33] Now that we have that safely being called, once our data is loaded, we're also going to add these lines here to add that to the map itself. We're going to call L.geoJson, so it's a built-in leaflet method for handling GeoJSON data. We're going to pass it our data, and then tell it to add that to the map.
[00:53] The second line here we're going to call map.fitBounds, and then we're going to call getBounds on our geoJSON object. That's going to tell the map to set the coordinates and the zoom level so that everything in that geoJSON shape fits in there. Since we're using that to position, and zoom our map, we can actually get rid of this setView call here.
[01:17] If we go back to our map, refresh, we can see that we have in fact all of the United States states' outlines on our map there. The styling is not exactly attractive, so what we're going to do is go back and similar to the way we did with the tile layer before, we're just going to pass some options to the GeoJSON method.
[01:43] What we're going to define is a style function. Each feature that gets passed into this function is actually going to be one of those geographic shapes. Each state is going to get passed into this, and we're just going to return an object that we want leaflet to apply to its style properties. Weight, opacity, and color are going to apply to the stroke. Then we've got fill color and fill opacity here.
[02:11] If we save this, and go refresh, we can see that we do in fact get a new style on those things. If we want to just update this a little bit, we'll change this to a light green. Then we'll change this to a little bit of a darker red. We can see that's starting to look a little bit better.
[02:34] You can also see that when you zoom in, those shapes remain crisp, because it's all vectors. The zoom level is not going to adversely affect those things. Now maybe a little bit more styling here. We'll just do two shades of green, and then we've got a nice little map here that actually looks good.