<!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 map = new TrimbleMaps.Map({
container: 'map',
style: TrimbleMaps.Common.Style.TRANSPORTATION,
center: new TrimbleMaps.LngLat(-71.973, 43.61),
zoom: 7.5,
hash: true
});
map.on('load', function() {
let firstSymbolLayerId;
const layers = map.getStyle().layers;
for (let i = 0; i < layers.length; i++) {
const layer = layers[i];
if (layer.type === 'symbol') {
firstSymbolLayerId = layer.id;
break;
}
}
const origin = `${window.location.origin}`;
let dataPath = 'maps-sdk/data';
if (origin === 'http://127.0.0.1:8080') {
dataPath = 'data';
}
const data = `${origin}/${dataPath}/cb_2018_us_necta_500k.geojson`;
// Data source
// New England City and Town Areas (NECTAs)
// https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html
map.addSource('new-england-city-town-areas', {
'type': 'geojson',
'data': data
});
map.addLayer({
'id': 'new-england-city-town-areas-fill',
'type': 'fill',
'source': 'new-england-city-town-areas',
'paint': {
'fill-color': '#EDBF8A',
'fill-opacity': 0.8
}
// The addLayer method takes 2 arguments: the layer as an object, and a string
// representing an existing layer's ID. The new layer will appear visually beneath the existing layer.
// If the 2nd argument is not specified, the layer will appear visually above all other layers.
// Insert the layer beneath the first symbol layer.
}, firstSymbolLayerId);
});
</script>
</body>
</html>