You can define a mosaic rule to dynamically control how the service combines raster tiles into a mosaic. This sample shows sea temperature at the surface for the week of April 7, 2014. To learn more about defining rules, visit L.esri.ImageMapLayer
in the API reference.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<meta charset="utf-8" />
<title>Define a mosaic rule</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js"></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const mosaicRule = {
multidimensionalDefinition: [
{
// DEPTH: show only temperatures at sea surface
dimensionName: "StdZ", // water depth
values: [0], // sea surface or 0ft
isSlice: true
},
{
// TIME: only show temperatures for the week of April 7, 2014
dimensionName: "StdTime", // time temp was recorded
values: [1396828800000], // week of April 7, 2014
isSlice: true
}
]
};
const map = L.map("map").setView([30, 0], 2);
L.esri
.imageMapLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/ScientificData/SeaTemperature/ImageServer",
mosaicRule: mosaicRule,
useCors: false
})
.addTo(map);
</script>
</body>
</html>