<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.11.0.css" rel="stylesheet"/>
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.11.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 = (window.map = new TrimbleMaps.Map({
container: 'map',
zoom: 12,
center: [-121.39098, 38.59745]
}));
// Wait for the map to load before adding layers and data sources
map.on('load', () => {
// Add GeoJSON data source to the map
map.addSource('sitesSource', sitesGeojson);
// Add a layer to draw symbols for each point in the data source. Use an expression to choose a data-driven icon.
map.addLayer({
id: 'sitesPoints',
type: 'symbol',
source: 'sitesSource',
layout: {
'icon-image': ['concat', ['get', 'Site'], '-fill-blue'],
'icon-allow-overlap': true
},
});
// Add a second GeoJSON data source to the map
map.addSource('placesSource', placesGeojson);
// Add a second layer to draw symbols for each point in the data source. Use an expression to choose a data-driven icon.
map.addLayer({
id: 'placesPoints',
type: 'symbol',
source: 'placesSource',
layout: {
'icon-image': [
'match',
['get', 'Type'],
'A',
'square-fill-red',
'B',
'star-fill-red',
'diamond-fill-red',
],
'icon-allow-overlap': true
},
});
});
// GeoJson data
const sitesGeojson = {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
Site: 1,
},
geometry: {
type: 'Point',
coordinates: [-121.3853645324707, 38.60332252537733],
},
},
{
type: 'Feature',
properties: {
Site: 2,
},
geometry: {
type: 'Point',
coordinates: [-121.38004302978516, 38.61479149102225],
},
},
{
type: 'Feature',
properties: {
Site: 3,
},
geometry: {
type: 'Point',
coordinates: [-121.3780689239502, 38.588228988186515],
},
},
{
type: 'Feature',
properties: {
Site: 4,
},
geometry: {
type: 'Point',
coordinates: [-121.34519577026367, 38.60821885777867],
},
},
{
type: 'Feature',
properties: {
Site: 5,
},
geometry: {
type: 'Point',
coordinates: [-121.37566566467284, 38.595273033813726],
},
},
{
type: 'Feature',
properties: {
Site: 6,
},
geometry: {
type: 'Point',
coordinates: [-121.35746955871583, 38.607279861018945],
},
},
],
},
};
const placesGeojson = {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
Type: 'A',
},
geometry: {
type: 'Point',
coordinates: [-121.42373085021971, 38.60124315987198],
},
},
{
type: 'Feature',
properties: {
Type: 'A',
},
geometry: {
type: 'Point',
coordinates: [-121.41669273376465, 38.588899879450764],
},
},
{
type: 'Feature',
properties: {
Type: 'B',
},
geometry: {
type: 'Point',
coordinates: [-121.4128303527832, 38.61116991045304],
},
},
{
type: 'Feature',
properties: {
Type: 'B',
},
geometry: {
type: 'Point',
coordinates: [-121.41592025756835, 38.58091586687018],
},
},
{
type: 'Feature',
properties: {
Type: 'C',
},
geometry: {
type: 'Point',
coordinates: [-121.39892578125, 38.60164562241362],
},
},
],
},
};
</script>
</body>
</html>