Advanced: Customize controls and animate PoI icons

By: Rasagy Sharma

For this week’s #mapwithmapbox challenge, we decided to double the fun with some advanced tasks using CSS and JavaScript. We’ll be using the Heads Up style that we shared last week:

Custom styling of map controls

You can add different types of controls on a map, from the basic zoom & rotate control, to geocoding & finding the user’s location. But if you have the ability to completely customize the map style, why not style the controls as well?

1. Display your map

To get started, find the Heads Up! style in Mapbox Studio, and find the Style URL and Access Token. You can find the Style URL from the hamburger menu next to a style name, or by going to Share, develop & use and scrolling down to the Develop this style section. Your access tokens are listed in your Accounts page or in the Develop this style section of each style.

You can use these and follow this example from the Mapbox GL JS library to display the Heads Up style using your favorite development environment. If you’re new to front-end development, I recommend using Codepen or JSFiddle that lets you quickly preview what you’re building.

2. Add a control to the map

By default, your map will have only the required attribution and no controls. Let’s go ahead and add the basic map navigation controls using this example. You’ll see the zoom and rotate controls on the top-right in white:

3. Override the style of attribution

We’ll now add specific CSS styles to change colors of the controls. We want the colors to match our map style, specifically:

• Dark Blue: #0f1f3d
• Amber: #d17d61

For attribution, we want to change the background color and color of links. You can use Inspect Element (on Chrome) or Inspector (on Firefox) to find the specific element to target, or just add the CSS below:

Inspecting the DOM to find elements to style

.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
background-color: #0f1f3d !important;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib a {
color: #d17d61 !important;
}

Once added, your attribution will look like this:

4. Override the style of map navigation controls

Similarly, you can override the style of the map navigation controls by changing the background, border, and color:

/* Blue + Amber zoom controls */
.mapboxgl-ctrl-group {
background-color:#0f1f3d !important;
color: #d17d61 !important;
border: 1px solid #d17d61 !important;
}
.mapboxgl-ctrl-group > button + button {
border-top: 1px solid #d17d61 !important;
}

You’ll notice the icons are still grey — we’ll need to change the colors of the SVG icons by decoding the Data URI of the image, changing the color values, and encoding it back for the CSS style. You can use any of the online URL Decoder (like this one) to do this.

Combining the powers of CSS & SVG!

Here’s a JSFiddle with all the above CSS in one place:

Animating POI icons

Several properties in the Mapbox Style Specification are Transitionable, which means that changing their values on the fly will smoothly transition from old value to new. Let’s try animating the circle radius and opacity property to get this effect:

1. Choose which layer you want to animate

You have an option to either animate an existing layer’s property, or add a new layer to animate. Let’s add a new circle layer for all the large parks, and animate that.

For this, we’ll add Mapbox Streets as a new data source using map.addSource() and add a new POI layer using map.addLayer() with filters for only showing circles for parks (where maki icon property is park) and are large (where scalerank property is 1). You can also try using a different Streets layer (like coffee shops), or your custom data as a vector source (like your favorite spots in a city).

Here’s a JSFiddle with the JS code:

2. Choose what property you want to animate

Let’s make the circle expand and contract. We’ll use a boolean variable expanded to keep track of whether the circle is big or small, and change the circle-radius and circle-opacity properties using setPaintProperty() at regular intervals to make it loop infinitely.

Here’s the final JSFiddle with the JS code:

That’s it for this week’s Advanced guide, now it’s your turn to show us what you can build. Try adding more controls or visualizations that match the map style, and show us an interesting way to animate the map features. Or build your own animating FUI with this style. And do check out Erin’s Fundamentals Guide if you haven’t already!

Have fun and be sure to share your maps on twitter with #mapwithmapbox and @Mapbox. We’ll be sending more stickers out this week 😎.