<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.9.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 myMap = new TrimbleMaps.Map({
container: 'map',
style: TrimbleMaps.Common.Style.DATALIGHT,
zoom: 12,
center: [-84, 34]
});
myMap.on('load', () => {
myMap.addSource('stores-source', storeData);
myMap.addLayer({
id: 'stores-layer',
source: 'stores-source',
type: 'symbol',
layout: {
'icon-image': 'flag-outline-green',
'icon-allow-overlap': true,
'text-offset': [0,1],
'text-anchor': 'top',
'text-font': ['Roboto Regular'],
'text-optional': true,
'text-field': [
'format',
'Market ', {'font-scale': 0.9, 'text-color': '#333333'},
['get', 'storeId'], {'text-font': ['literal', ['Roboto Medium']], 'text-color': '#1B834C'},
'\n',
['concat', 'Hours: ', ['get', 'storeHours']], {'font-scale': 0.7, 'text-color': '#666666'},
'\n',
['image', 'star-fill-orange'],
['image', ['case', ['>=', ['get', 'storeRating'], 2], 'star-fill-orange', 'star-outline-orange']],
['image', ['case', ['>=', ['get', 'storeRating'], 3], 'star-fill-orange', 'star-outline-orange']],
['image', ['case', ['>=', ['get', 'storeRating'], 4], 'star-fill-orange', 'star-outline-orange']],
]
}
});
})
const storeData = {
type: "geojson",
data: {
type: "FeatureCollection",
features: [{
"type": "Feature",
"properties": {
"storeId": "G-133",
"storeHours": "8am-10pm",
"storeRating": 3
},
"geometry": {
"coordinates": [-84.0407038900854, 34.01846961385622],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"storeId": "G-471",
"storeHours": "10am-10pm",
"storeRating": 1
},
"geometry": {
"coordinates": [-83.98882990464612, 34.006099000238805],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"storeId": "G-228",
"storeHours": "Open 24hrs",
"storeRating": 2
},
"geometry": {
"coordinates": [-84.03473314039113, 33.98454375271223],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"storeId": "G-183",
"storeHours": "8am-10pm",
"storeRating": 4
},
"geometry": {
"coordinates": [-83.95124969954832, 33.99413312349183],
"type": "Point"
}
}
]
}
};
</script>
</body>
</html>