MapMetrics Atlas API Docs

Appearance

Change the Case of Labels ​

Use the text-transform layout property to render map labels in uppercase, lowercase, or default case.

text-transform Property ​

Set text-transform in a symbol layer's layout to control label casing:

javascript
map.addLayer({
  id: 'my-labels',
  type: 'symbol',
  source: 'my-source',
  layout: {
    'text-field': ['get', 'name'],
    'text-transform': 'uppercase', // 'none' | 'uppercase' | 'lowercase'
  }
});

Update at Runtime ​

javascript
// Apply to a specific layer
map.setLayoutProperty('my-labels', 'text-transform', 'uppercase');

// Apply to ALL symbol layers in the style
map.getStyle().layers.forEach(layer => {
  if (layer.type === 'symbol') {
    map.setLayoutProperty(layer.id, 'text-transform', 'uppercase');
  }
});

Values ​

ValueEffect
'none'Use the text as-is from the data (default)
'uppercase'Convert all characters to uppercase
'lowercase'Convert all characters to lowercase

Data-Driven Case (per feature) ​

javascript
'text-transform': [
  'match',
  ['get', 'type'],
  'highway', 'uppercase',
  'suburb',  'lowercase',
  'none'  // default
]

Complete Example ​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.css" rel="stylesheet" />
    <script src="https://cdn.mapmetrics-atlas.net/versions/latest/mapmetrics-gl.js"></script>
    <style>#map { height: 500px; width: 100%; }</style>
  </head>
  <body>
    <div id="map"></div>
    <button id="none">Default</button>
    <button id="upper">UPPERCASE</button>
    <button id="lower">lowercase</button>
    <script>
      const map = new mapmetricsgl.Map({
        container: 'map',
        style: '<StyleFile_URL_with_Token>',
        center: [10, 50],
        zoom: 4
      });

      function setCase(val) {
        map.getStyle().layers.forEach(layer => {
          if (layer.type === 'symbol') {
            map.setLayoutProperty(layer.id, 'text-transform', val);
          }
        });
      }

      map.on('load', () => {
        document.getElementById('none').addEventListener('click', () => setCase('none'));
        document.getElementById('upper').addEventListener('click', () => setCase('uppercase'));
        document.getElementById('lower').addEventListener('click', () => setCase('lowercase'));
      });
    </script>
  </body>
</html>
jsx
import React, { useEffect, useRef } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const ChangeLabelCase = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return;
    map.current = new mapmetricsgl.Map({
      container: mapContainer.current,
      style: '<StyleFile_URL_with_Token>',
      center: [10, 50],
      zoom: 4
    });
    return () => { map.current?.remove(); map.current = null; };
  }, []);

  const setCase = (val) => {
    if (!map.current) return;
    map.current.getStyle().layers.forEach(layer => {
      if (layer.type === 'symbol') {
        map.current.setLayoutProperty(layer.id, 'text-transform', val);
      }
    });
  };

  const btnStyle = (bg) => ({
    padding: '8px 14px', background: bg, color: 'white',
    border: 'none', borderRadius: 6, cursor: 'pointer'
  });

  return (
    <div>
      <div ref={mapContainer} style={{ height: '500px', width: '100%' }} />
      <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
        <button onClick={() => setCase('none')} style={btnStyle('#6b7280')}>Default</button>
        <button onClick={() => setCase('uppercase')} style={btnStyle('#3b82f6')}>UPPERCASE</button>
        <button onClick={() => setCase('lowercase')} style={btnStyle('#8b5cf6')}>lowercase</button>
      </div>
    </div>
  );
};

export default ChangeLabelCase;

For more information, visit the MapMetrics GitHub repository.