> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt) # Create interactive hover effects with Mapbox GL JS In this tutorial, you will create a map that shows the locations of earthquakes that have happened in the last week. You will use [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) to create the map and visualize the data, then you will use [expressions](https://docs.mapbox.com/style-spec/reference/expressions/) to style each earthquake feature according to the magnitude of the earthquake. Finally, you will use [feature state](https://docs.mapbox.com/style-spec/reference/expressions/#feature-state) to apply these styles to the earthquake features when a user mouses over the feature and remove them when a user mouses away. ## Prerequisites To complete this tutorial, you will need: - **A Mapbox access token**: Find yours on the [Access token page](https://console.mapbox.com/account/access-tokens/) of your Developer Console. - [**Mapbox GL JS**](https://docs.mapbox.com/mapbox-gl-js/): is a JavaScript library for building web maps and applications with Mapbox. - **A Code editor**: A program like [Visual Studio Code](https://code.visualstudio.com/). - **The USGS Earthquake Catalog API.** You will use the [USGS Earthquake Catalog API](https://earthquake.usgs.gov/fdsnws/event/1/) to retrieve information about all earthquakes with a magnitude of one or more that have happened within the past week. - **Familiarity with front-end development**: Beginner experience with HTML, CSS and JavaScript. ## Feature state and expressions Feature state is a set of user-defined attributes that can be dynamically assigned to a feature on the map. You can use feature state with [expressions](https://docs.mapbox.com/help/ja/glossary/expression/) to style the [features](https://docs.mapbox.com/help/ja/glossary/features/) of a vector or GeoJSON source in either a dataset or tileset. Each feature in the source must have a unique numeric `id` for feature state to work correctly. If you are adding a GeoJSON source at runtime, which is what you will do in this tutorial, you can use the `generateId` option in [`map.addSource()`](https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource) to add an `id` to each feature. For vector sources or GeoJSON sources that are added before runtime, you must set a unique `id` for each feature before the source is added to the map. You can think of feature state as a switch that turns a fan on or off. You will use feature state to define what the switch is, and expressions to set the style. In this case, the trigger is a user mousing over or away from a feature, which will update the style of the feature based on the rules set by the expressions. With feature state, you can update the styling of a map layer's individual features based on user interaction, without needing to re-render the underlying geometry and data after each interaction event. In this tutorial, the feature state trigger will be a user's mouse hovering over an earthquake feature, and you will use feature state to update the radius size and the color of the feature based on its magnitude value. ## Create a map To get started, you will create a map using [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/). Open your text editor and create a new file named `index.html`. Set up this new HTML file by pasting the following code into your text editor: ```html Create interactive hover effects with Mapbox GL JS
``` This code creates the structure of the page. It imports Mapbox GL JS in the `` of the page, which allows you to use Mapbox GL JS functionality and style in your web app. This code contains a `
` element with the ID `map` in the `` of the page. This `
` is the container in which the map will be displayed on the page. Save your changes. Open the HTML file in your browser to see the rendered map, which is centered on the western United States. ![Basemap using the Mapbox Outdoors style](https://docs.mapbox.com/help/ja/assets/ideal-img/tutorials--create-interactive-hover-effects-with-mapbox-gl-js--base-map.f9c7fe5.480.png) ## Add the sidebar In the `` of your HTML, add a new `
`. This `
` will be used to display an individual earthquake's magnitude, location, and the time that it happened: ```html
Magnitude: 
Location: 
Date: 
``` To style the new `
`, add the following CSS to the `
Magnitude: 
Location: 
Date: 
``` ## Next steps **Congratulations!** You have created a web app that uses feature state to dynamically style earthquake features on a map, based on the earthquake's magnitude. ### What we covered - Learned the fundamentals of feature state - Creating a Mapbox map & sidebar with HTML & CSS - Added a dynamically generated earthquake data source - Added a new map layer and styles at runtime - Using expressions to set layer styles - Defining & resetting feature state To learn more about feature state expressions and how you can use them to dynamically style map features, explore the following resources: - Explore the Mapbox GL JS documentation for [`setFeatureState`](https://docs.mapbox.com/mapbox-gl-js/api/#map#setfeaturestate), [`removeFeatureState`](https://docs.mapbox.com/mapbox-gl-js/api/#map#removefeaturestate), and [`getFeatureState`](https://docs.mapbox.com/mapbox-gl-js/api/#map#getfeaturestate). - See how Mapbox used feature state to create a map using data from the 2016 presidential election in the [Live Electoral Maps: A Guide to Feature State](https://medium.com/mapbox/going-live-with-electoral-maps-a-guide-to-feature-state-b520e91a22d) blog post. - Learn more about using events and feature state to create a per-feature styling change in the [Create a hover effect example](https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/). - Learn more about how to use Mapbox GL JS expressions in the [Get started with Mapbox GL JS expressions](https://docs.mapbox.com/help/ja/tutorials/mapbox-gl-js-expressions/) tutorial.