Skip to main content

Add generic marker images

Additional Developer Resources

  • This is a modified version of the Monochrome template style.

  • Eight SVG files have been uploaded using the Images option in the style editor toolbar.

  • The Text, Icon, and Position options for the custom-icons-generic-markers layer (a symbol layer) have been modified.

Add to your account

About this style​

  • SVG assets: Scalable Vector Graphics (SVG) is a widely supported two-dimensional vector graphics file format. 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. Read more about troubleshooting SVG uploads in our SVG asset errors in Mapbox Studio guide. In this example, eight icons have been uploaded:
    • mapbox-marker-icon-blue.svg
    • mapbox-marker-icon-gray.svg
    • mapbox-marker-icon-green.svg
    • mapbox-marker-icon-orange.svg
    • mapbox-marker-icon-pink.svg
    • mapbox-marker-icon-purple.svg
    • mapbox-marker-icon-red.svg
    • mapbox-marker-icon-yellow.svg
  • Symbol layer: Icons are added to the map using a symbol layer. Symbol layers are the most complex layer 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 the country-label layer to explore the style properties in this style:
    • In the Text tab, the Text field uses each feature's name property to present a text label with set values for Color and Halo properties.
    • In the Icon tab, the different SVG icons are applied to eight different point features using data conditions to select each feature by its name and set the Image property to a specific colored icon.
    • In the Position tab, the Text anchor has been modified to anchor text labels below the icons representing the point features.
  • 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 because your sprite will be managed by Mapbox Studio.

Looking for more guidance? Read our tutorials.

Additional Developer Resources
Was this example helpful?