Adding Interaction Using Observables

We now have earthquakes on the map and in a list, but no means for interaction between these representations yet. It would be nice, for example, to center an earthquake on the map whenever we click it on the list, and to highlight an earthquake with a circle on the map when we move the mouse over its row. Let’s get to it!

In Leaflet, we can draw on a map and put drawings in their own layers so that we can manipulate them individually. Let’s create a group of layers called quakeLayer where we’ll store all the earthquake circles. Each circle will be a layer inside the group. We’ll also create a codeLayers object where we’ll store the correlation between an earthquake code and the internal layer ID, so that we can refer to circles with the earthquake ID: