Examples

Change the case of labels

Use the upcase and downcase expressions to change the case of labels.

Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change the case of labels</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v10', // stylesheet location
center: [-116.231, 43.604], // starting position [lng, lat]
zoom: 11 // starting zoom
});
map.on('load', function() {
map.addLayer({
'id': 'off-leash-areas',
'type': 'symbol',
// data from opendata.cityofboise.org/
'source': {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/boise.geojson'
},
"layout": {
"icon-image": 'dog-park-11',
"text-field": ['format',
['upcase', ['get', 'FacilityName']], { 'font-scale': .8 },
'\n', {},
['downcase', ['get', 'Comments']], { 'font-scale': .6 }],
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
</script>
</div>
</body>
</html>