1

I have created a simple mapboxgl map, and I am adding a source that contains point data. I am trying to then apply a style to the data. The approach I am taking works well for polygon & line data, but I can't find the magic cartocss that will render points. Here is the example: http://jsfiddle.net/4q1db482/

The reason I do not want to simply use the getJSONSource method for point data is to avoid bringing a large number of vectors into the browser.

The question is two part: 1. How can I apply a style to this data that I have created in Mapbox-studio?
2. Or how can I create a style that will work for some simple point data and push it into the style.layers array? It's a bit cumbersome that 'marker-line-color' cartocss is valid in mapbox studio, but not in mapboxgl. I am trying this:

   style.layers.push({
        'id': 'dataSource',
        'source': 'tom',
        'interactivity': 'true',
        'source-layer': 'us-ski',
        'render':{
            'text-field': '{name}',
        },
        'style': {
            'text-color': '#8786e0',
            'text-font': 'Open Sans Semibold, Arial Unicode MS Bold',
            /** This is the style used in mapbox-studio **/
            //"marker-symbol": "monument",
            //'marker-line-color': '#3333FF',
            //'marker-width': '3',
            //'marker-fill': '#8786e0'
        },
        'type': 'symbol'
    });
1

I was able to resolve the issue by modifying the style like this:

style.layers.push({
    'id': 'dataSource',
    'source': 'tom',
    'interactivity': 'true',
    'source-layer': 'us-ski',
    'render':{
        'text-field': '{name}',
        "icon-image": "marker-12"
    },
    'style': {
        'text-color': '#8786e0',
        'text-font': 'Open Sans Semibold, Arial Unicode MS Bold',
    },
    'type': 'symbol'
});

The key was: "icon-image": "marker-12"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.