Experience Builder MediaLayerView

RachappaBellappa1 — Mon, 13 Oct 2025 01:10:30 GMT

I am using v1.19 and JS API 4.33 and was trying to develop custom widget similar to this https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-interactive/live/

My steps

a. upload image file using drag/drop functionality

b. geoprocess the image

c. Need to perform tranform interaction options (dr

import { React, AllWidgetProps, jsx } from 'jimu-core';
import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis';
import { Button } from 'jimu-ui';
import MediaLayer from '@arcgis/core/layers/MediaLayer';
import ImageElement from '@arcgis/core/layers/support/ImageElement';
import ExtentAndRotationGeoreference from '@arcgis/core/layers/support/ExtentAndRotationGeoreference';
import Extent from '@arcgis/core/geometry/Extent';
import SpatialReference from '@arcgis/core/geometry/SpatialReference';

interface State {
jimuMapView: JimuMapView | null;
}

export default class Widget extends React.PureComponent<AllWidgetProps<any>, State> {
state: State = {
jimuMapView: null
};

mediaLayer: MediaLayer | null = null;
imageElement: ImageElement | null = null;

onImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (!file || !this.state.jimuMapView) return;

const reader = new FileReader();
reader.onload = () => {
const imageUrl = reader.result as string;
const view = this.state.jimuMapView.view;

const extent = new Extent({
xmin: -118.818984489994,
ymin: 34.0137559967283,
xmax: -118.806796597377,
ymax: 34.0215816298725,
spatialReference: SpatialReference.WGS84
});

const georef = new ExtentAndRotationGeoreference({ extent });

this.imageElement = new ImageElement({
image: imageUrl,
georeference: georef
});

this.mediaLayer = new MediaLayer({
source: [this.imageElement],
title: 'Uploaded Image',
interactionOptions: {
enable: true,
translateEnabled: true,
rotationEnabled: true,
scaleEnabled: true
}
});

view.map.add(this.mediaLayer);

view.whenLayerView(this.mediaLayer).then((layerView: any) => {
layerView.interactive = true;
layerView.selectedElement = this.imageElement;
});
};
reader.readAsDataURL(file);
};

clearImage = () => {
const view = this.state.jimuMapView?.view;
if (view && this.mediaLayer) {
view.map.remove(this.mediaLayer);
this.mediaLayer = null;
this.imageElement = null;
}
};

render() {
return (
<div className="widget-interactive-image" style={{ padding: '1rem' }}>
<input type="file" accept="image/png, image/jpeg" onChange={this.onImageUpload} />
<Button onClick={this.clearImage} style={{ marginTop: '10px' }}>
Clear Image
</Button>
<JimuMapViewComponent
useMapWidgetId={this.props.useMapWidgetIds?.[0]}
onActiveViewChange={(jmv: JimuMapView) => this.setState({ jimuMapView: jmv })}
/>
</div>
);
}
}

ag/Resize/roate)

Although i implemented above fes issues i encountered

1. rotation is not working

2. Resize/Drag works only one time and it stops working

3. No Errors though but tool hangs and shows inactive on the image

topic Experience Builder MediaLayerView in ArcGIS Experience Builder Questions

Experience Builder MediaLayerView