How do I add custom icons to Mapbox?
Add custom markers in Mapbox GL JS
- Getting started.
- Create a Mapbox GL JS map. Initialize your map. Load GeoJSON data.
- Add HTML markers. Style markers. Add markers to the map.
- Add popups. Style popups. Attach popups to markers.
- Final product.
How do I use Maki icons?
It’s easy to use Maki with Mapbox Studio. Download the icons, then drag the SVGs into the Mapbox Studio style editor. Use the Icon Editor from a computer to customize the styling of your icon set by adding or removing icons, styling by groups, and more.
What are SDF icons?
SDFs are a way of rendering images specially designed to preserve sharp outlines from a pixel image even when the image is resized. The Mapbox Style Specification includes several options that allow you to manipulate icons as SDFs at runtime. SDF encodes the distance from each pixel to the nearest edge of the image.
How to add custom icons in Mapbox GL?
Use Marker to add custom icons to your map. Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled. Was this example helpful?
How to make a map in Mapbox GL JS?
Now you’re ready to use Mapbox GL JS! To start, create a new HTML file and write code to initialize a Mapbox GL JS map. Open your text editor. Create a new HTML file. Copy and paste the code below into your text editor to initialize your Mapbox GL JS map. Make sure you are using your API access token with mapboxgl.accessToken.
How to add an icon to a map?
This example uses an image from an external URL to visualize a point feature on the map.
Where to find Maki icons in Mapbox GL JS?
Since that issue was closed, all maki icons are now natively available in mapbox-gl.js. You can see all available at https://www.mapbox.com/maki-icons/. You can also multiply their size using the icon-size paint property, though this may result in pixelation.