I am working trying to write a custom widget for Experience Builder using with the Javascript 4.x API. The user should be able to draw a rectangle, then the map (working in 2d here, 3d comes later) should update to the extent of the rectangle drawn.
I can get the rectangle from the user and draw it on the map as a visual display of the area that will be the new extent, I just can't get the view to actually move to that extent. I thought the goTo method of the MapView would be my answer, but I can't quite seem to get it right. Any advice?
/** @jsx jsx */
import {React, AllWidgetProps, jsx } from 'jimu-core';
import {JimuMapView, JimuMapViewComponent } from 'jimu-arcgis';
import { Point, Polygon } from 'esri/geometry';
import * as Graphic from "esri/Graphic";
import * as GraphicsLayer from "esri/layers/GraphicsLayer";
import {getStyle} from './lib/style';
import { jimuMapViewAdded } from 'jimu-core/lib/app-actions';
export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> {
/** code for creating graphics layer, activating button for user
* to be able to draw the rectangle, etc.
*/
setNewExtent(evt) {
//get the point for the last corner on the rectangle
let crossPoint: Point = this.state.jimuMapView.view.toMap({
x: evt.x,
y: evt.y
});
//draw the rectangle
let extentRectangle = new Polygon({
rings: [
[ this.state.startingPoint.x, this.state.startingPoint.y ], // starting point
[ this.state.startingPoint.x, crossPoint.y ], // corner 1
[ crossPoint.x, crossPoint.y ], // diagonal to starting point (current cursor location)
[ crossPoint.x, this.state.startingPoint.y ], //corner 2
[ this.state.startingPoint.x, this.state.startingPoint.y ] // starting point (close rectangle)
],
spatialReference: { wkid: this.state.jimuMapView.view.map.spatialReference }
});
//turn the geometry into a graphic
let extentGraphic = new Graphic({
geometry: extentRectangle,
symbol: this.state.extentSymbol // simple fill symbol
});
//add the graphic to the map
this.state.graphicsLayer.add(extentGraphic);
//set the mapview to the extent of the user's rectangle
this.state.jimuMapView.view.goTo(extentRectangle);
//it works the same with goTo(extentGraphic)
/**
* Later code for deactivating button, removing
* stylings for edit mode, etc.
*/
}
}
There are no errors in the console. Any advice on what I'm missing?
Courtney Menikheim | Application Developer | @thecmenikheim