JavaScript Maps SDK

Rich Text

Display rich text labels using a format expression. Each input of the format expression should contain either a string literal or expression. This can be followed by a style override object which can change the font, scale, or color. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.21.0.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';

            const myMap = new TrimbleMaps.Map({
              container: 'map',
              style: TrimbleMaps.Common.Style.DATALIGHT,
              zoom: 12,
              center: [-84, 34]
            });

            myMap.on('load', () => {
              myMap.addSource('stores-source', storeData);

              myMap.addLayer({
                id: 'stores-layer',
                source: 'stores-source',
                type: 'symbol',
                layout: {
                  'icon-image': 'flag-outline-green',
                  'icon-allow-overlap': true,
                  'text-offset': [0,1],
                  'text-anchor': 'top',
                  'text-font': ['Roboto Regular'],
                  'text-optional': true,
                  'text-field': [
                    'format',
                    'Market ', {'font-scale': 0.9, 'text-color': '#333333'},
                    ['get', 'storeId'], {'text-font': ['literal', ['Roboto Medium']], 'text-color': '#1B834C'},
                    '\n',
                    ['concat', 'Hours: ', ['get', 'storeHours']], {'font-scale': 0.7, 'text-color': '#666666'},
                    '\n',
                    ['image', 'star-fill-orange'],
                    ['image', ['case', ['>=', ['get', 'storeRating'], 2], 'star-fill-orange', 'star-outline-orange']],
                    ['image', ['case', ['>=', ['get', 'storeRating'], 3], 'star-fill-orange', 'star-outline-orange']],
                    ['image', ['case', ['>=', ['get', 'storeRating'], 4], 'star-fill-orange', 'star-outline-orange']],
                  ]
                }
              });



            })

            const storeData = {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [{
                    "type": "Feature",
                    "properties": {
                      "storeId": "G-133",
                      "storeHours": "8am-10pm",
                      "storeRating": 3
                    },
                    "geometry": {
                      "coordinates": [-84.0407038900854, 34.01846961385622],
                      "type": "Point"
                    }
                  },
                  {
                    "type": "Feature",
                    "properties": {
                      "storeId": "G-471",
                      "storeHours": "10am-10pm",
                      "storeRating": 1
                    },
                    "geometry": {
                      "coordinates": [-83.98882990464612, 34.006099000238805],
                      "type": "Point"
                    }
                  },
                  {
                    "type": "Feature",
                    "properties": {
                      "storeId": "G-228",
                      "storeHours": "Open 24hrs",
                      "storeRating": 2
                    },
                    "geometry": {
                      "coordinates": [-84.03473314039113, 33.98454375271223],
                      "type": "Point"
                    }
                  },
                  {
                    "type": "Feature",
                    "properties": {
                      "storeId": "G-183",
                      "storeHours": "8am-10pm",
                      "storeRating": 4
                    },
                    "geometry": {
                      "coordinates": [-83.95124969954832, 33.99413312349183],
                      "type": "Point"
                    }
                  }
                ]
              }
            };
        </script>
    </body>
</html>
Last updated June 15, 2023.