2f:T9f5,html`

Polygon Fills

Line styling

Basic line styling
Dashed lines
Adding symbols on line

Map Points

Representing the data as circles
Representing the data with symbols

Labels

Basic label styling
Concatenating two labels
Adding symbols to labels

Data driven styling

Data driven styling for polygons & map points

Data driven styling for polygons
Data driven styling for map points

Data driven styling for labels

Zoom based styling

Zoom based styling for polygons and map points

Zoom based styling for polygons
Zoom based styling for map points

Zoom based styling for labels

Zoom level, Bearing and Pitch

`30:T5f5,md `The positioning of the label can be customised in the 'layout' property and the styling can be customised within the 'paint' property.
text-field is to choose which field of the table is to be displayed as the label.
If the labels are too large, text wrapping can be done by defining a maximum width for the label using the text-max-width attribute.
When zooming out, if the overlapping of labels are to be avoided, text-allow-overlap should be set to false'. \`\`\`JS map.addLayer({ "id": "lga_label2", "type": "symbol", "source": "cartoSource2", 'source-layer': 'myCartoLayer2', "layout": { "text-font": ["Roboto Black"], "text-field": "{label}", "symbol-placement": "point", "text-size": 12, 'text-allow-overlap': false, 'text-offset': [0, 0], 'text-anchor': 'center', 'text-max-width': 4, 'text-letter-spacing': 0.2, 'text-justify': 'right', 'text-rotate': -5 }, "paint": { "text-color": "#fff", 'text-halo-color': '#2d99b7', 'text-halo-width': 2 } }, ''); \`\`\` `31:T487,md `If two or more labels need to be concattenated, those can be assigned to the text-field attribute. If there needs to be any space or symbols inbetween the labels, that can be given as a plain text between the labels chosen. In this case a hyphen is given between the 'label' and 'ltcode' and those are displayed together. \`\`\`JS map.addLayer({ "id": "lga_label2", "type": "symbol", "source": "cartoSource2", 'source-layer': 'myCartoLayer2', "layout": { "text-font": ["Roboto Black"], "text-field": "{label}-{ltocode}", "symbol-placement": "point", "text-size": 12, 'text-allow-overlap': false, 'text-offset': [0, 0], 'text-anchor': 'center', 'text-max-width': 4, 'text-letter-spacing': 0.2, 'text-justify': 'right', 'text-rotate': -5 }, "paint": { "text-color": "#fff", 'text-halo-color': '#2d99b7', 'text-halo-width': 2 } }, ''); \`\`\` `32:T531,md `Labels can also be styled based on the data. Even multiple attributes related to the label can be styled based on data. The chosen attribute should have the details of the data that is chosen to categorise and style the labels, as well as the type and the stops to define the styles.

If the data is not defined, by default the colour that will be chosen is black (#000000). \`\`\`JS map.addLayer({ "id": "lga_label", "type": "symbol", "source": "cartoSource", 'source-layer': 'myCartoLayer', "layout": { "text-font": ["Roboto Black"], "text-field": "{cluster_na}", "symbol-placement": "point", "text-size": 11, 'text-allow-overlap': false, 'text-offset': [0, 0], 'text-anchor': 'center', 'text-max-width': 4, 'text-letter-spacing': 0.2, 'text-justify': 'right' }, "paint": { "text-color": { property: 'cluster_ty', type: 'categorical', stops: [ ['Primary Level', "#51870c"], ['Secondary Level', '#1320a5'], ['SSP Level', '#a5750e']] }, 'text-halo-color': '#eee', 'text-halo-width': 1 } }, ''); \`\`\` `33:T421,md `In the example below, the size of the circle redues when the map is zoomed out, in order to avoid congestion.

If the size is set to zero, it will hide the object in that level. \`\`\`JS map.addLayer({ 'id': 'lga_polygon3', 'source': 'cartoSource3', "type": "circle", 'source-layer': 'myCartoLayer3', "paint": { "circle-radius": { stops: [ [0, 0], [4, 1], [6, 4], [8, 5], [11, 6], [12, 10], [13, 13]] }, //"circle-color": "#044C7C", "circle-color": { property: 'school_level', type: 'categorical', stops: [ ['Public', "#90b52d"], ['High', '#096b87'], ['Infants', '#ba4014'], ['Central', '#762cb2'], ['SSPK-6', '#edd734'], ['SSPK-12', '#f2a918']] } } }, ''); \`\`\` `34:T9f2,md `These can be defined at the beginning of the script and will be used only if the map has not been positioned by other means (e.g. map options or user interaction).
The Zoom attribute is to define the default zoom level of the map when it's loaded.
The Bearing is the compass direction that is 'up'. For example, a bearing of 90° orients the map so that east is up.
The Pitch attribute is to define the default pitch, in degrees. Zero is perpendicular to the surface, for a look straight down at the map, while a greater value like 60 looks ahead towards the horizon.

These values default to zero.

labels, icons and circles can also be aligned according to how the map is pitched by using text-pitch-alignment, icon-pitch-alignment and circle-pitch-alignment respectively.
The value given to text-pitch-alignment and icon-pitch-alignment attributes should be 'map' or 'viewport' or 'auto', and would default to 'auto'. If 'map' is chosen, the icon will be aligned to the plane of the map. If 'viewport' is cosen, the icon will be aligned to the plane of the viewport.
The value assigned to circle-pitch-alignment can only be either 'map' or 'viewport' and would default to 'map'. In this case 'map' means the circles are scaled according to their apparent distance to the camera and 'viewport' means that the circles are not scaled \`\`\`JS var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', center: [147.208298, -33.840466], zoom: 6, bearing: 10, pitch: 90 }); \`\`\` ` 35:[] 2d:{"title":"Mapbox GL Style spec","cells":[{"id":0,"value":"md`# Mapbox GL Style spec`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"polygon_fills=md`## Polygon fills`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"polygon_fills_solid_colour=md`### Polygon fills - Solid colour`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`Filling the polygons with solid colours can be achieved by the fill-color tag in the 'paint' property.\n
\nTransparency can be controlled by the fill-opacity tag in the 'paint' property.\n\n\\`\\`\\`JS\nmap.addLayer({\n 'id': 'lga_polygon',\n 'source': 'cartoSource',\n \"type\": \"fill\",\n 'source-layer': 'myCartoLayer',\n 'paint': {\n \"fill-color\": \"#2d99b7\",\n \"fill-opacity\": 0.25\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"polygon_fills_pattern_fill=md`### Polygon fills - Pattern fill`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`Polygons can also be filled with patterns using the fill-pattern property.\n

\nThis can be achieved by indicating the name of the sprite. This property will override the solid colour fill.\n\n\\`\\`\\`JS\nmap.addLayer({\n 'id': 'lga_polygon',\n 'source': 'cartoSource',\n \"type\": \"fill\",\n 'source-layer': 'myCartoLayer',\n 'paint': {\n 'fill-pattern': \"park-11\",\n \"fill-opacity\": 0.15\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"line_styling=md`##
Line styling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"line_styling_basic=md`### Basic line styling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md `Polygon outlines can be customised using the attributes related to lines\n\n\\`\\`\\`JS\nmap.addLayer({\n \"id\": \"lga_outline\",\n \"type\": \"line\",\n 'source': 'cartoSource',\n 'source-layer': 'myCartoLayer',\n 'paint': {\n \"line-color\": \"#2db593\",\n \"line-opacity\": 0.7,\n 'line-width': 1.5\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"line_styling_dashed=md`### Dashed lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md `line-gap-width draws a line casing outside of a line's actual path. The value indicates the width of the inner gap.\n
\nline-dasharray specifies the lengths of the alternating dashes and gaps that form the dash pattern.\n\n\\`\\`\\`JS\nmap.addLayer({\n \"id\": \"lga_outline\",\n \"type\": \"line\",\n 'source': 'cartoSource',\n 'source-layer': 'myCartoLayer',\n 'paint': {\n \"line-color\": \"#2db593\",\n \"line-opacity\": 0.7,\n 'line-width': 1,\n 'line-gap-width': 2,\n 'line-dasharray': [10, 18]\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"line_styling_symbol=md`### Adding symbols on lines`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md `Symbols can be added on top of lines by adding a new layer and using the symbol-placement and symbol-placement attributes.\n\n\\`\\`\\`JS\nmap.addLayer({\n \"id\": \"lga_label\",\n \"type\": \"symbol\",\n \"source\": \"cartoSource\",\n 'source-layer': 'myCartoLayer',\n \"layout\": {\n \"text-font\": [\"Roboto Black\"],\n \"text-field\": \"{label}\",\n \"symbol-placement\": \"point\",\n \"text-size\": 12,\n 'text-allow-overlap': false,\n 'text-offset': [0, -2],\n 'text-anchor': 'top'\n },\n \"paint\": {\n \"text-color\": \"#078BE3\",\n 'text-halo-color': '#fff',\n 'text-halo-width': 1\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"map_points=md`##
Map Points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"map_points_circles=md`### Representing the data as circles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md `Map points can be represented by circles.\n\n\\`\\`\\`JS\nmap.addLayer({\n 'id': 'lga_polygon3',\n 'source': 'cartoSource3',\n \"type\": \"circle\",\n 'source-layer': 'myCartoLayer3',\n \"paint\": {\n \"circle-radius\": 8,\n \"circle-color\": \"#044C7C\",\n \"circle-blur\": 1,\n \"circle-opacity\": 0.8\n }\n }, ''); \n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"map_points_symbols=md`### Representing the data with symbols`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"md `Map point can be represented by symbols.\n

\nSymbols can be used along with labels, etc as described at the latter part of this documentation.\n\n\\`\\`\\`JS\nmap.addLayer({\n 'id': 'lga_polygon3',\n 'source': 'cartoSource3',\n \"type\": \"symbol\",\n 'source-layer': 'myCartoLayer3',\n \"layout\": {\n \"text-size\": 9,\n \"icon-image\": \"school-15\",\n \"text-field\": \"{school_name}\",\n \"text-font\": [\"Open Sans Semibold\", \"Arial Unicode MS Bold\"],\n \"text-offset\": [0, 0.6],\n \"text-anchor\": \"top\"\n }\n }, ''); \n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"labels=md`##
Labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"labels_basic=md`### Basic label styling`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"labels_concatenating=md`### Concattenating two labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"labels_adding_symbols=md`### Adding symbols to labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md `A symbol can be added to the label using the icon-image attribute in the 'layout' property.\n\n\\`\\`\\`JS\nmap.addLayer({\n 'id': 'lga_symbol2',\n 'source': 'cartoSource2',\n \"type\": \"symbol\",\n 'source-layer': 'myCartoLayer2',\n \"layout\": {\n \"text-size\": 11,\n \"icon-image\": \"marker-15\",\n \"text-field\": \"{label}\",\n \"text-font\": [\"Open Sans Semibold\", \"Arial Unicode MS Bold\"],\n \"text-offset\": [0, 1],\n \"text-anchor\": \"top\"\n },\n \"paint\": {\n \"text-color\": \"#fff\",\n 'text-halo-color': '#2d99b7',\n 'text-halo-width': 2\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"data_driven_styling=md`##
Data driven styling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"data_driven_styling_map=md`### Data driven styling for polygons & map points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"md `If the polygons or map points need to be styled based on the data, that could be defined in the fill-color attribute under the 'paint' property. The 'property' attribute is to choose what data the styling should be based on. the 'stops' property is where the styling should be defined in.\n
In the first example, the fill-color of the polygon is chosen basen on its 'id' and in the second example the colour of the map point is based on the 'school_level'.\n

\nIf the data is not defined, by default the colour that will be chosen is black (#000000).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"data_driven_styling_map_polygons=md`#### Data driven styling for polygons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`\\`\\`\\`JS\nmap.addLayer({\n 'id': 'lga_polygon2',\n 'source': 'cartoSource2',\n \"type\": \"fill\",\n 'source-layer': 'myCartoLayer2',\n 'paint': {\n \"fill-color\": {\n 'property': 'cartodb_id',\n 'stops': [[10, '#2cabb2'], [50, '#d1e599'], [100, '#9c86f4']],\n },\n \"fill-opacity\": 0.3,\n \"fill-outline-color\": '#2db593',\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"\nhtml``","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"data_driven_styling_map_map_points=md`#### Data driven styling for map points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md `\n\\`\\`\\`JS\nmap.addLayer({\n 'id': 'lga_polygon3',\n 'source': 'cartoSource3',\n \"type\": \"circle\",\n 'source-layer': 'myCartoLayer3',\n \"paint\": {\n \"circle-radius\": {\n stops: [[4, 2], [8, 4], [11, 5], [16, 8]]\n},\n //\"circle-color\": \"#044C7C\",\n \"circle-color\": {\n property: 'school_level',\n type: 'categorical',\n stops: [\n ['Public', \"#90b52d\"], \n ['High', '#096b87'], \n ['Infants', '#ba4014'], \n ['Central', '#762cb2'], \n ['SSPK-6', '#edd734'], \n ['SSPK-12', '#f2a918']]\n }\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"data_driven_styling_labels=md`### Data driven styling for labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"zoom_based_styling=md`##
Zoom based styling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"zoom_based_styling_map=md`### Zoom based styling for polygons and map points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md `Sometimes the polygons or map points will need to be style based on the zoom level. For instance, the colour intensity of the polygons might need to be decreased when the map is zoomed in and the details on the layers underneth needs to be viewed clearly. Size of the circle or icon representing a map points will need to be adjusted according to the zoom level.\n
\nThe zoom level and the style attribute should be specified under the attribute that needs to be adjusted based on zoom levels.\n

\nIf the data is not defined, by default the colour that will be chosen is black (#000000).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"zoom_based_styling_map_polygons=md`#### Zoom based styling for polygons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md `In the example below, the opacity keeps decreasing when zooming in, to display the details in the underlying layer clearly, and the opacity increases when zoomed out to make the layer stand out.\n\n\\`\\`\\`JS\nmap.addLayer({\n \"id\": \"lga_outline2\",\n \"type\": \"line\",\n 'source': 'cartoSource2',\n 'source-layer': 'myCartoLayer2',\n 'paint': {\n \"line-color\": \"#2db593\",\n \"line-opacity\": 0.5,\n 'line-width': 0.8,\n 'line-gap-width': 0.7,\n \"line-dasharray\": [10, 8]\n }\n }, ''); \n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"zoom_based_styling_map_map_points=md`#### Zoom based styling for map points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"zoom_based_styling_labels=md`### Zoom based styling for labels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"md `In the example below, the font size of the labels redues when the map is zoomed out, in order to avoid congestion.\n

\nIf the size is set to zero, it will hide the object in that level.\n\n\\`\\`\\`JS\n map.addLayer({\n 'id': 'lga_symbol2',\n 'source': 'cartoSource2',\n \"type\": \"symbol\",\n 'source-layer': 'myCartoLayer2',\n \"layout\": {\n \"text-size\": {\n \"stops\": [\n [0, 0],\n [3, 0],\n [8, 0],\n [9, 10],\n [14, 16]\n ]\n },\n \"icon-image\": \"marker-15\",\n \"text-field\": \"{label}\",\n \"text-font\": [\"Open Sans Semibold\", \"Arial Unicode MS Bold\"],\n \"text-offset\": [0, 1],\n \"text-anchor\": \"top\"\n },\n \"paint\": {\n \"text-color\": \"#fff\",\n 'text-halo-color': '#2d99b7',\n 'text-halo-width': 2\n }\n }, '');\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"zoom_bearing_pitch=md`##
Zoom level, Bearing and Pitch`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}