Adding Interaction Using Observables

Learn how to add interaction such as hovering on the interface of the web application, using Observables.

We'll cover the following

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:

Get hands-on with 1200+ tech skills courses.