Note: this feature is available in WP Mapbox GL JS Advanced.

In WP Mapbox GL JS Advanced, you get a lot more control over the marker icons you can use and customize for your map. We include a lot more icons by default, from the Maki icon set and the Mapkey icon set, and also allow you to upload your own.

Selecting an icon

In the basic version of WP Mapbox GL JS, you can choose a few different icons from a dropdown menu. In Advanced, this dropdown is gone and replaced by a button that says “Edit Marker Icon”. When you click on this icon, a modal will appear with an area where icons are listed and you can select different categories of icons to customize.

In the popup modal that appears, you can select from “Default” icons — the same icons available in the free plugin version — or select from the left-hand side and see what is available for Maki and Mapkey.

To select an icon, click on it, and you will see it appear in the bottom left-hand corner of the popup. There are a couple of options here on changing the icon. Once you have modified any options, you can press “Update Icon” in the bottom-right hand corner to see your new icon on the map.

Marker Options

Size: by default, the icon is sized at a standard size. Once you have seen how your icon looks on the map, you can drag the slider to make it larger or smaller. You won’t see this change in the editor area, but when you press “Update Icon”, you will see the change on the live map.

Anchor: some icons are better if they are “anchored” in the center (meaning that the point they are on is in the center of the icon) and some at the bottom. You can select and see the difference. If you are using a “typical” marker with a point at the bottom, a bottom anchor is probably best.

Marker Colors

We are working hard on allowing you to completely customize the color of the icons in our plugin, but in the current version of WP Mapbox GL JS Advanced, you are stuck choosing between a few variations of colors that we have pre-selected. Select the colour options at the top of the editor to see the markers in different variations, which we hope will suit your needs for now!

Updating an Icon

If you ever want to change the size, anchor, or image of your icon, just press “Edit Marker Icon” again and you’ll see all your options re-created and available for editing. Once you’re done, make sure you press “Update Marker Icon”.