Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mapbox GL js available icons

I am rewriting a web application from Mapbox.js to Mapbox GL js. Using the standard 'mapbox://styles/mapbox/streets-v8' style, where can I find a list of all working marker icons?

Here is my code:

m.map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": ["-75.532965", "35.248018"]
                },
                "properties": {
                    "title": "Start",
                    "marker-symbol": "entrance",
                    "marker-size": "small",
                    "marker-color": "#D90008"
                }
            }
        }
    });
    m.map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15", //but monument-15 works
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, -1.6],
            "text-anchor": "top"
        }
    });

I read that all Maki icons should be made available for styles that don't have icons as a default: https://github.com/mapbox/mapbox-gl-styles/issues/241 But most of them don't work. Also there is the problem with the sizes - for Maki they were -small, -medium and -large, and now I see -11 and -15.

I just need to use some basic marker icons.

like image 793
the_web Avatar asked Mar 21 '16 12:03

the_web


People also ask

How do I use Maki icons in Mapbox?

Maki is open source and CC0 licensed. 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.

How do I insert a symbol in Mapbox?

Use Mapbox GL JS with a symbol layer When you use a symbol layer with Mapbox GL JS, the API draws markers inside a map. This method requires the combined use of loadImage and addImage to add a custom marker image, addSource to add a source, and addLayer to add a symbol layer to the style. A Mapbox GL JS example.

Is Mapbox GL JS free?

Is Mapbox GL JS open source? The previous version, Mapbox GL JS v1, is indeed a free and open-source, BSD3 licensed software. Anyone can contribute to it, or start their own derived work based on it, for free. As of February 2021, the v1 source code is still available from the Mapbox Github.


Video Answer


1 Answers

We're still sorting out the final implementation details for the default icon set and will document that set thoroughly once it has been decided upon.

Until then, you can see exactly what icons are available for a given style by peeking at the mapbox-gl-styles repo in the sprites folder.

like image 173
Lucas Wojciechowski Avatar answered Sep 19 '22 15:09

Lucas Wojciechowski