Name: Interactive Leaflet Maps with GeoJSON data
Uploaded: 2015-03-19T16:42:36-05:00
Description: Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

https://app.egghead.io/api/v1/lessons/javascript-interactive-leaflet-maps-with-geojson-data/subtitles

Interactive Leaflet Maps with GeoJSON data

[00:00] Now that we've got our GeoJSON data rendered on our map, let's look at how we add some interactivity to it. The first thing we're going to do is we're going to clean up our code a little bit here. We're going to move a couple of variables outside of this function so that we can use them elsewhere, so our map and our GeoJSON variables.

[00:18] Then we'll go and update that code so that they use those external defined ones. Then we're going to take the style function and just move it out to so that it's easy to read the stuff. We're going to call it GetStyle, we'll move that down here, outside of this function again, and just name that GetStyle.

[00:39] Now that we've got all that stuff cleaned up, let's make sure that it still works. Looks like we're still good, so now we can go back and start adding our interactivity. The way that we are going to do that is, we're going to use an option called OnEachFeature. So, essentially what that means is as each piece gets added to the map, this function is going to get called.

[01:02] We'll call our function the same thing, and we'll define that OnEachFeature function here. That is actually going to receive two arguments, one being the feature itself and then one being the map layer. And so, what we can do here is we can actually define this Layer.On and then pass it a hash map. This is just a shortcut for defining various handlers.

[01:29] The first one we'll do is mouse over, we'll call our function OnMouseOver, and when one of these shapes gets moused over, what we're going to do, we'll go ahead and create a shortcut to this E.Target variable, which is our layer. And then we're just going to call SetStyle on it so that we can change that style in response to the mouse over.

[01:52] So, if we go check that out, we can see that we do in fact make all those changes, but nothing is getting reset, so we're just painting our map. Let's take care of that. Let's go ahead and create an OnMouseOut function, and what that will do, we can actually just call this reset style method. That is essentially just going to pass this layer back through the style function that we defined initially.

[02:25] So, it's going to pass it back through that GetStyle function, and reapply the original style. It's not working because we didn't actually set it in our Layer.On hash, so if we tell it to use OnMouseOut, these shapes being reset to their initial state. The last thing we'll add is a click handler. What we're going to do is, we'll say ClickOnClick and we'll define this.

[02:59] Once we do that, we steal a little bit of code from up here, where we were using the bounds of the map to adjust our view. In this case, instead of setting the bounds using the entire GeoJSON area, we're just going to sit the bounds to the events targets. The layer that we're clicking on is going to be, we're going to use it's bounds.

[03:27] What we can now do is we can click on one of these states, and it can actually zoom us and set the bounds so that we are seeing that entire shape. You can see that it will pan them out for us, it will zoom them for us, whatever it needs to do to get that whole shape in view, it will do for us. That's basically it, we've got a nice interactive map here with rollover, rollout and click Handling.

Interactive Leaflet Maps with GeoJSON data

Share this video with your friends