Weather
Weather layers allow you to dislay weather radar and satellite clouds data overlayed on the current map.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="menu">
<input id="weather_radar" type="radio" name="rtoggle" value="weather_radar" checked="checked" />
<label for="weather_radar">radar</label>
<input id="weather_cloud" type="radio" name="rtoggle" value="weather_cloud" />
<label for="weather_cloud">clouds</label>
</div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-98.38, 38.69], // starting position
zoom: 3 // starting zoom
});
function switchLayer(layerId) {
if (layerId === 'weather_radar') {
map.setWeatherRadarVisibility(true);
} else {
map.setWeatherRadarVisibility(false);
}
if (layerId === 'weather_cloud') {
map.setWeatherCloudVisibility(true);
} else {
map.setWeatherCloudVisibility(false);
}
}
function clickHandler (elem) {
switchLayer(elem.target.value);
}
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
map.on('load', function() {
for (const element of inputs) {
element.onclick = clickHandler;
if(element.checked === true) {
switchLayer(element.id);
}
}
});
</script>
</body>
</html>
Weather
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.20.0.js"></script>
<style>
body { margin: 0; padding: 0; }
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="menu">
<input id="weather_radar" type="radio" name="rtoggle" value="weather_radar" checked="checked" />
<label for="weather_radar">radar</label>
<input id="weather_cloud" type="radio" name="rtoggle" value="weather_cloud" />
<label for="weather_cloud">clouds</label>
</div>
<script>
TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
const map = new TrimbleMaps.Map({
container: 'map', // container id
style: TrimbleMaps.Common.Style.TRANSPORTATION, // hosted style id
center: [-98.38, 38.69], // starting position
zoom: 3 // starting zoom
});
function switchLayer(layerId) {
if (layerId === 'weather_radar') {
map.setWeatherRadarVisibility(true);
} else {
map.setWeatherRadarVisibility(false);
}
if (layerId === 'weather_cloud') {
map.setWeatherCloudVisibility(true);
} else {
map.setWeatherCloudVisibility(false);
}
}
function clickHandler (elem) {
switchLayer(elem.target.value);
}
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
map.on('load', function() {
for (const element of inputs) {
element.onclick = clickHandler;
if(element.checked === true) {
switchLayer(element.id);
}
}
});
</script>
</body>
</html>