JavaScript Maps SDK

Data Visualization Icons

Trimble Maps provides a set of data visualization icons for use on your maps. You can see a list of these icons here. Use expressions to display data-driven icons. Learn more about the map icons.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" rel="stylesheet"/>
    <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.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 map = (window.map = new TrimbleMaps.Map({
        container: 'map',
        zoom: 12,
        center: [-121.39098, 38.59745]
      }));

      // Wait for the map to load before adding layers and data sources
      map.on('load', () => {
        // Add GeoJSON data source to the map
        map.addSource('sitesSource', sitesGeojson);

        // Add a layer to draw symbols for each point in the data source. Use an expression to choose a data-driven icon.
        map.addLayer({
          id: 'sitesPoints',
          type: 'symbol',
          source: 'sitesSource',
          layout: {
            'icon-image': ['concat', ['get', 'Site'], '-fill-blue'],
            'icon-allow-overlap': true
          },
        });

        // Add a second GeoJSON data source to the map
        map.addSource('placesSource', placesGeojson);

        // Add a second layer to draw symbols for each point in the data source. Use an expression to choose a data-driven icon.
        map.addLayer({
          id: 'placesPoints',
          type: 'symbol',
          source: 'placesSource',
          layout: {
            'icon-image': [
              'match',
              ['get', 'Type'],
              'A',
              'square-fill-red',
              'B',
              'star-fill-red',
              'diamond-fill-red',
            ],
            'icon-allow-overlap': true
          },
        });
      });

      // GeoJson data
      const sitesGeojson = {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              properties: {
                Site: 1,
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.3853645324707, 38.60332252537733],
              },
            },
            {
              type: 'Feature',
              properties: {
                Site: 2,
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.38004302978516, 38.61479149102225],
              },
            },
            {
              type: 'Feature',
              properties: {
                Site: 3,
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.3780689239502, 38.588228988186515],
              },
            },
            {
              type: 'Feature',
              properties: {
                Site: 4,
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.34519577026367, 38.60821885777867],
              },
            },
            {
              type: 'Feature',
              properties: {
                Site: 5,
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.37566566467284, 38.595273033813726],
              },
            },
            {
              type: 'Feature',
              properties: {
                Site: 6,
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.35746955871583, 38.607279861018945],
              },
            },
          ],
        },
      };

      const placesGeojson = {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              properties: {
                Type: 'A',
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.42373085021971, 38.60124315987198],
              },
            },
            {
              type: 'Feature',
              properties: {
                Type: 'A',
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.41669273376465, 38.588899879450764],
              },
            },
            {
              type: 'Feature',
              properties: {
                Type: 'B',
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.4128303527832, 38.61116991045304],
              },
            },
            {
              type: 'Feature',
              properties: {
                Type: 'B',
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.41592025756835, 38.58091586687018],
              },
            },
            {
              type: 'Feature',
              properties: {
                Type: 'C',
              },
              geometry: {
                type: 'Point',
                coordinates: [-121.39892578125, 38.60164562241362],
              },
            },
          ],
        },
      };
    </script>
  </body>
</html>
Last updated June 15, 2023.