Add Image Generated
Add an icon to the map that was generated at runtime. Requires Trimble Maps v3.0.0 or later.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>3D Terrain</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
<script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
const map = new TrimbleMaps.Map({
container: 'map',
zoom: 5,
style: TrimbleMaps.Common.Style.TRANSPORTATION,
});
map.on('load', () => {
const width = 64; // The image will be 64 pixels square
const bytesPerPixel = 4; // Each pixel is represented by 4 bytes: red, green, blue, and alpha.
const data = new Uint8Array(width * width * bytesPerPixel);
for (let x = 0; x < width; x++) {
for (let y = 0; y < width; y++) {
const offset = (y * width + x) * bytesPerPixel;
data[offset + 0] = (y / width) * 255; // red
data[offset + 1] = (x / width) * 255; // green
data[offset + 2] = 128; // blue
data[offset + 3] = 255; // alpha
}
}
map.addImage('gradient', {width, height: width, data});
map.addSource('point', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [0, 0],
},
},
],
},
});
map.addLayer({
id: 'points',
type: 'symbol',
source: 'point',
layout: {
'icon-image': 'gradient',
},
});
});
</script>
</body>
</html>
Add Image Generated
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>3D Terrain</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
<script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
const map = new TrimbleMaps.Map({
container: 'map',
zoom: 5,
style: TrimbleMaps.Common.Style.TRANSPORTATION,
});
map.on('load', () => {
const width = 64; // The image will be 64 pixels square
const bytesPerPixel = 4; // Each pixel is represented by 4 bytes: red, green, blue, and alpha.
const data = new Uint8Array(width * width * bytesPerPixel);
for (let x = 0; x < width; x++) {
for (let y = 0; y < width; y++) {
const offset = (y * width + x) * bytesPerPixel;
data[offset + 0] = (y / width) * 255; // red
data[offset + 1] = (x / width) * 255; // green
data[offset + 2] = 128; // blue
data[offset + 3] = 255; // alpha
}
}
map.addImage('gradient', {width, height: width, data});
map.addSource('point', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [0, 0],
},
},
],
},
});
map.addLayer({
id: 'points',
type: 'symbol',
source: 'point',
layout: {
'icon-image': 'gradient',
},
});
});
</script>
</body>
</html>