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' });
أكثر...
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' });
أكثر...