Adding Interaction Using Observables
Explore how to use RxJS Observables to enable interactive behaviors in a web application. Understand how to link map elements and list items for synchronized highlighting and centering using mouse hover and click events on earthquake data.
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 ...