mapbox-concatenate-workshop

Part 4: Interactivity

Goal

Add interactivity to your map, to log information to the console when the user clicks the map, and (optionally) display a popup on the map when the user clicks one of your points.

Instructions

In this step we’ll add some custom click handling to map.html to make the map react to user clicks.

Add a click handler that logs to the console

Log more information about the map’s position

The user might change the map’s zoom, pitch (tilt) and bearing (rotation), so let’s log information about those settings as well.

Re-center the map when the user clicks

The .flyTo() method lets us programmatically move the map to a certain location. Let’s use it to re-center the map to wherever the user clicks.

Log the title & description if the user clicks a point from your custom layer

We can use the .queryRenderedFeatures() method to see if the point the user clicked corresponds to any feature(s) from a specific layer. Let’s use it to conditionally log the title and description of your points if they are clicked.

[Optional] Display the title & description of a clicked point in a popup

Logging to the console is great, but it’s only for us devs - most users would prefer the important info displayed on the map. Let’s use a mapboxgl.Popup to display a point’s title & description.

Next step

Part 5