<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.16.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.16.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 = new TrimbleMaps.Map({
                container: 'map', // container id
                style: TrimbleMaps.Common.Style.TRANSPORTATION, //hosted style id
                center: [-74.60018, 40.36144], // starting position
                zoom: 12 // starting zoom
            });

            // This data can be hard-coded, loaded from a file, or pulled from a service
            const geoJsonData = {
              type: 'geojson',
              data: {
                type: 'FeatureCollection',
                features: [{
                  type: 'Feature',
                  properties: {
                    name: 'TrimbleMAPS HQ'
                  },
                  geometry: {
                    type: 'Point',
                    coordinates: [-74.60018, 40.36144]
                  }
                }]
              }
            };

            // Wait for the map to load before adding
            map.on('load', function() {
              // Add datasource
              map.addSource('hqSource', geoJsonData);

              // Load image to use as the marker
              map.loadImage('https://developer.trimblemaps.com/maps-sdk/img/marker_blue.png', function(error, image){
                // Add image to the map
                map.addImage('marker-icon', image);

                // Add layer to render marker based on datasource
                map.addLayer({
                  id: 'hqPoints',
                  type: 'symbol',
                  source: 'hqSource',
                  layout: {
                      'icon-image': 'marker-icon',
                      'icon-size': 1
                  }
                });

                // Listen for clicks on the hqPoints layer
                map.on('click', 'hqPoints', function(evt){
                  const popupLocation = evt.features[0].geometry.coordinates.slice();
                  const popupContent = evt.features[0].properties.name;

                  new TrimbleMaps.Popup()
                    .setLngLat(popupLocation)
                    .setHTML(popupContent)
                    .addTo(map);
                });

                // Change cursor when hovering over a feature on the hqPoints layer
                map.on('mouseenter', 'hqPoints', function() {
                  map.getCanvas().style.cursor = 'pointer';
                });

                // Change cursor back
                map.on('mouseleave', 'hqPoints', function() {
                  map.getCanvas().style.cursor = '';
                });
              });
            });
        </script>
    </body>
</html>