Heat Map
Visualize data with a Heat Map. For simplicity, this demo relies on data built in a separate script (truck-stops.js).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.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>
Heat Map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.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>