Add a custom icon
This is a modified version of the Streets template style.
An SVG has been uploaded to the style editor using the Images option in the toolbar.
The Icon and Position options for the
country-label
layer (asymbol
layer) have been modified using Overrides.
About this style
- SVG assets: Scalable Vector Graphics (SVG) is a markup language for describing two-dimensional vector graphics. You can upload SVG images to your custom style in the Mapbox Studio style editor. You can click on the Images option in the top toolbar to manage the SVGs in your style. In this example, an icon called
mapbox-logo
has been uploaded. Read more about troubleshooting SVG uploads in our SVG asset errors in Mapbox Studio guide. - Symbol layer: Icons are added to the map using a
symbol
layer. Symbol layers are the most complex style type in Mapbox Studio. Symbol layer styling is separated into four main groups: Text, Icon, Position, and Placement. In this example, the Icon and Position options have been modified. Click on thecountry-label
layer to explore the style properties in this style:- In the Icon tab, the
mapbox-logo
icon is applied to several countries using data conditions: ifname_en
is equal to any of the names of countries with a Mapbox office, set the Image property tomapbox-logo
. - In the Position tab, both the Text anchor and the Icon offset property have been modified to anchor the text below the data point it is labeling and the icon is offset to be above the data point.
- In the Icon tab, the
- Override: In the Streets template style, many style properties in the
country-label
layer are controlled by components. To make changes to individual properties, switch to Layers tab, find thecountry-label
layer, and use the Override button to customize the values described above. - Sprite: A sprite is a single image containing all icons included in a style. Sprites are often used in web development and even video games to improve performance. If you’re using Mapbox Studio, you don’t have to worry about the technical underpinnings of sprites, but if you're interested in learning more, you can read about sprites on our Help page.
Related resources
Looking for more guidance? Read our tutorials.
このexampleは役に立ちましたか?