Experience builder custom widget

ErsiLover

I'm trying to make a simple custom widget that on the button press adds a random point on the map and I'm stuck, this is how my code looks:

import React from 'react';

import { JimuMapView } from 'jimu-arcgis';
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol';
import { AllWidgetProps } from 'jimu-core';

export interface State{
jimuMapView: JimuMapView | undefined;
}
export default class Widget extends React.PureComponent<AllWidgetProps<any>, State> {
Graphic: any;
Point: any;
GraphicsLayer: any;
constructor(props) {
super(props);
this.state = {
jimuMapView : undefined,
};
}
addPointToMap = () => {

const pointSymbol = new SimpleMarkerSymbol({
type: 'simple-marker',
style: 'square',
color: 'blue',
size: '8px',
outline: {
color: [255, 255, 0],
width: 3,
},
});
const graphicB = new this.Graphic({
geometry: new this.Point({ x: 42.34123, y: 21.12341 }),
symbol: pointSymbol
});

const layer = new this.GraphicsLayer({
graphics: [graphicB]
});

this.state.jimuMapView.view.map.add(layer);
};

render() {
return (
<div>
<button onClick={this.addPointToMap}>Add Point</button>
</div>
);
}
}

 

Grant-S-Carroll

There are a few issues here.

First you need to import Graphic, GraphicsLayer and Point.

import Graphic from 'esri/Graphic'
import GraphicsLayer from 'esri/layers/GraphicsLayer'
import Point from 'esri/geometry/Point'

 

Remove the declaration of Graphic, Point and GraphicsLayer at the start of your class

export default class Widget extends React.PureComponent<AllWidgetProps<any>, State> {

constructor(props) {
    super(props);
    this.state = {
      jimuMapView : undefined,
    };
}

 

Next when creating the new point and graphic, don't use the this. prefix.

 

const graphicB = new Graphic({
    geometry: new Point({ x: 42.34123, y: 21.12341 }),
    symbol: pointSymbol
});

const layer = new GraphicsLayer({
   graphics: [graphicB]
});

 

Finally, you are trying to add the graphic to the map view, but there is nowhere, where you are getting a reference to it. You need to let the widget know which map to add the graphics too. Have a look at this sample here, This shows how to create a settings page so you can assign your widget a map, then it has a handle within the render method which will get the map when it loaded and ready.

Also, you do not need to export your state interface. You only need to export something from a file if you intend to use it in other parts of your project or in an another file. Otherwise you do not need need the export statement.