This sample demonstrates how to add static images to a MediaLayer in a 2D MapView. MediaLayer is used to display static images and videos on the map by specifying their geographic locations using extent and rotation or the corner points of the bounding box.
How it works
The images in the sample show old topographic maps of New Orleans from the 1890's. Image elements are created by calling the following function.
// create image elements for each image
function createImageElement(name, box) {
const imageElement = new ImageElement({
image: `https://arcgis.github.io/arcgis-samples-javascript/sample-data/media-layer/new-orleans/${name}.png`,
georeference: new ExtentAndRotationGeoreference({
extent: new Extent({
spatialReference: {
wkid: 102100
},
xmin: box.xmin,
ymin: box.ymin,
xmax: box.xmax,
ymax: box.ymax
})
})
});
return imageElement;
}
Then, the MediaLayer is initialized with the image elements as shown below:
// MediaLayer - add imageElements
const layer = new MediaLayer({
source: [
imageElements[0].element,
imageElements[1].element,
imageElements[2].element,
imageElements[3].element
],
opacity: 0.9,
title: "New Orleans",
blendMode: "normal"
});
Users then can add or remove image elements from the MediaLayer at runtime by checking or unchecking the image's associated checkbox.
// Remove the image element from the MediaLayer if it exists
// Add the image element to the layer if it does not exist in the layer.source.elements.
checkBox.addEventListener("calciteCheckboxChange", (event) => {
const selectedImageElement = imageElements.find(
(item) => item.name === event.target.name
);
if (checkBox.checked) {
layer.source.elements.add(selectedImageElement.element);
} else {
layer.source.elements.remove(selectedImageElement.element);
}
});
They can also change the opacity of individual image elements by changing the slider values.
slider.on("thumb-drag", (event) => {
const selectedImageElement = imageElements.find(
(item) => item.name === slider.label
);
selectedImageElement.element.opacity = slider.values[0];
});