<!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>
        <script src="https://developer.trimblemaps.com/maps-sdk/js/truck-stops.js"></script>

        <script>
            //a function to build some sample GeoJson
            //truckStops is just a static array built in tuck-stops.js to keep the demo clean
            function truckStopsToGeoJson() {
                var points = [];
                for (var i = 0; i < truckStops.length; i++) {
                    var stop = truckStops[i];
                    feat = { "type": "Feature", "geometry": { "type": "Point", "coordinates": [stop.Lon, stop.Lat] } }
                    points.push(feat);
                }
                featcol = { "type": "FeatureCollection", "features": points }
                return featcol
            }
        </script>

        <style>
            body { margin: 0; padding: 0; }

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

        <script>
            //get some sample GeoJson
            truckstopdata = truckStopsToGeoJson()

            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.2, 40.5],
                zoom: 7
            });
            map.on('load', function () {
                //create a source using the GeoJson, you could also use a url to download
                map.addSource('truckstops', {
                    type: 'geojson',
                    data: truckstopdata
                });
                //add a heatmap layer
                map.addLayer({
                    id: 'trucks-heat',
                    type: 'heatmap',
                    source: 'truckstops',
                    maxzoom: 15,
                    //you can customize color, intensity, opacity, and radius, here we leave color default
                    paint: {
                        // increase intensity as zoom level increases
                        'heatmap-intensity': {
                            stops: [
                                [11, 1],
                                [15, 3]
                            ]
                        },
                        // increase radius as zoom increases
                        'heatmap-radius': {
                            stops: [
                                [11, 15],
                                [15, 20]
                            ]
                        },
                        // decrease opacity to transition into the circle layer
                        'heatmap-opacity': {
                            default: 1,
                            stops: [
                                [14, 1],
                                [15, 0]
                            ]
                        },
                    }
                });
                //add a circle layer to represent the individual points when zoomed
                map.addLayer({
                    id: 'truck-point',
                    type: 'circle',
                    source: 'truckstops',
                    minzoom: 14,
                    paint: {
                        // increase the radius of the circle as the zoom level and dbh value increases
                        'circle-radius': {
                            property: 'dbh',
                            type: 'exponential',
                            stops: [
                                [{ zoom: 15, value: 1 }, 5],
                                [{ zoom: 15, value: 62 }, 10],
                                [{ zoom: 22, value: 1 }, 20],
                                [{ zoom: 22, value: 62 }, 50],
                            ]
                        },
                        'circle-stroke-color': 'white',
                        'circle-stroke-width': 1,
                        'circle-opacity': {
                            stops: [
                                [14, 0],
                                [15, 1]
                            ]
                        }
                    }
                });
            });
        </script>
    </body>
</html>