Change the case of labels | UNL Map JS Docs

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

Note

If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.

<!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://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-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>
var map = new UnlSdk.Map({
container: "map", // container id
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [-116.231, 43.604], // starting position [lng, lat]
zoom: 11, // starting zoom
});
 
map.on("load", function () {
// data from opendata.cityofboise.org/
map.addSource("off-leash-areas", {
type: "geojson",
data: "https://u-n-l.github.io/unl-map-js-docs/assets/boise.geojson",
});
map.addLayer({
id: "off-leash-areas",
type: "symbol",
source: "off-leash-areas",
layout: {
"icon-image": "dog-park-11",
"text-field": [
"format",
["upcase", ["get", "FacilityName"]],
{ "font-scale": 0.8 },
"\n",
{},
["downcase", ["get", "Comments"]],
{ "font-scale": 0.6 },
],
"text-font": ["Fira GO Regular"],
"text-offset": [0, 0.6],
"text-anchor": "top",
},
});
});
</script>
 
</body>
</html>