Data Driven Styles
Change styling based on data source values.
<!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 map = new TrimbleMaps.Map({
container: 'map', // container id
center: [-85.25, 35.05], // starting position
zoom: 12 // starting zoom
});
const bounds = map.getBounds();
const north = bounds.getNorth();
const south = bounds.getSouth();
const east = bounds.getEast();
const west = bounds.getWest();
// Functions for generating random points and features
function getRandomPoint() {
const lng = west + ((east - west) * Math.random());
const lat = south + ((north - south) * Math.random());
return [lng, lat];
}
const categories = ['Factory', 'Warehouse', 'DistributionCenter', 'Store'];
function getRandomCategory() {
return categories[Math.floor(Math.random() * categories.length)];
}
function getGeoJsonFeatures() {
const features = [];
for (var i = 0; i < 100; i++) {
features.push({
type: 'Feature',
properties: {
name: 'Point #' + i,
category: getRandomCategory()
},
geometry: {
type: 'Point',
coordinates: getRandomPoint()
}
});
}
return features;
}
map.on('load', function() {
map.addSource('randomPoints', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: getGeoJsonFeatures()
}
});
// Add a layer and use an expression to change the circle color
map.addLayer({
id: 'styledPoints',
type: 'circle',
source: 'randomPoints',
paint: {
'circle-radius': 10,
'circle-color': [
'match', // type of expression
['get', 'category'], // property to match
'Factory',
'#000000',
'Warehouse',
'#666666',
'DistributionCenter',
'#aaaaaa',
'Store',
'#ffffff',
'#aaaaff' // default value
]
}
});
});
</script>
</body>
</html>
Data Driven Styles
<!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 map = new TrimbleMaps.Map({
container: 'map', // container id
center: [-85.25, 35.05], // starting position
zoom: 12 // starting zoom
});
const bounds = map.getBounds();
const north = bounds.getNorth();
const south = bounds.getSouth();
const east = bounds.getEast();
const west = bounds.getWest();
// Functions for generating random points and features
function getRandomPoint() {
const lng = west + ((east - west) * Math.random());
const lat = south + ((north - south) * Math.random());
return [lng, lat];
}
const categories = ['Factory', 'Warehouse', 'DistributionCenter', 'Store'];
function getRandomCategory() {
return categories[Math.floor(Math.random() * categories.length)];
}
function getGeoJsonFeatures() {
const features = [];
for (var i = 0; i < 100; i++) {
features.push({
type: 'Feature',
properties: {
name: 'Point #' + i,
category: getRandomCategory()
},
geometry: {
type: 'Point',
coordinates: getRandomPoint()
}
});
}
return features;
}
map.on('load', function() {
map.addSource('randomPoints', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: getGeoJsonFeatures()
}
});
// Add a layer and use an expression to change the circle color
map.addLayer({
id: 'styledPoints',
type: 'circle',
source: 'randomPoints',
paint: {
'circle-radius': 10,
'circle-color': [
'match', // type of expression
['get', 'category'], // property to match
'Factory',
'#000000',
'Warehouse',
'#666666',
'DistributionCenter',
'#aaaaaa',
'Store',
'#ffffff',
'#aaaaff' // default value
]
}
});
});
</script>
</body>
</html>