I am updating my JS API from 4.13 to 4.30. I have a custom widget that uses the mapview and an eventhandler to acquire the X, Y coordinates of the users input ( a click event). Using Typescript in Visual Studios i am not getting an error with my code but when i publish and run it the it can't find a property for "this.view.on" any advice or ideas would be apperciated.
Typescript code from widget:
import Widget = require("esri/widgets/Widget");
import Point = require("esri/geometry/Point");
import MapView = require("esri/views/MapView");
import IdentifyResult = require("esri/rest/support/IdentifyResult");
import Request = require("esri/request");
import SimpleMarkerSymbol = require("esri/symbols/SimpleMarkerSymbol");
//import { subclass, declared, property } from "esri/core/accessorSupport/decorators";
import { tsx } from "esri/widgets/support/widget";
//import watchUtils = require("esri/core/watchUtils");
import Popup = require("esri/widgets/Popup");
import { property, subclass } from "esri/core/accessorSupport/decorators";
import { Event } from "jquery";
import RouteLayer = require("esri/layers/RouteLayer");
import FeatureLayer = require("esri/layers/FeatureLayer");
import reactiveUtils = require("esri/core/reactiveUtils");
import View = require("esri/views/View");
type Coordinates = Point | number[] | any;
var eventHandler: any;
var ReactiveUtils: reactiveUtils;
var popup: Popup;
interface Center {
x: number;
y: number;
}
interface State extends Center {
interacting: boolean;
scale: number;
}
const CSS = {
base: "recenter-tool"
};
@subclass("esri.widgets.Recenter")
class Steetview extends (Widget) {
@property()
RouteLayer: FeatureLayer;
@property()
view: MapView;
private _btnClickForGSV() {
(document.getElementById("OffStreetView") as HTMLButtonElement).style.visibility = 'visible';
(document.getElementById("goToStreetView") as HTMLButtonElement).style.visibility = 'hidden';
//this.RouteLayer.popupEnabled = false;
//popup.autoCloseEnabled = false;
//(this.view.popup as Popup).autoCloseEnabled = false;
(document.getElementById("viewDiv") as HTMLDivElement).style.cursor = "pointer";
debugger;
eventHandler = this.view.on("click", (event: __esri.ViewClickEvent) => {
//var ru = reactiveUtils.on(() => this.view, "click", (event) => {
debugger;
var viewX = event.mapPoint.latitude;
var viewY = event.mapPoint.longitude;
//var linkSV = '<a href="https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=' + viewX.toString() + "," + viewY.toString() + '"target="_blank">' + viewX.toString() + "," + viewY.toString() + "</a>";
//document.getElementById('lbLink').innerHTML = linkSV;
var GSVURL = 'https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=' + viewX.toString() + "," + viewY.toString();
(window as any).open(GSVURL).focus();
});
}
private _btnturnoffGSV() {
(document.getElementById("goToStreetView") as HTMLButtonElement).style.visibility = 'visible';
(document.getElementById("OffStreetView") as HTMLButtonElement).style.visibility = 'hidden';
//this.RouteLayer.popupEnabled = true;
//this.view.popupEnabled = true;
//popup.autoCloseEnabled = true;
//(this.view.popup as Popup).autoCloseEnabled = true;
(document.getElementById("viewDiv") as HTMLDivElement).style.cursor = "auto";
eventHandler.remove();
}
constructor() {
super();
this._onViewChange = this._onViewChange.bind(this)
}
//postInitialize() {
// watchUtils.init(this, "view.center, view.interacting, view.scale", () => this._onViewChange());
//}
@property()
//@renderable()
state: State;
@property()
//@renderable()
initialCenter: Coordinates;
render() {
return (
<div
bind={this}
class={CSS.base}
style=" border-radius: 15px;"
>
<h5><b>Google Street View Link</b></h5>
<br />
<button type="button" class="btn btn-success" id="goToStreetView" bind={this} style="visibility:visible" align="left" onclick={this._btnClickForGSV}>Turn ON Street Viewer</button>
<button id="OffStreetView" class="btn btn-danger" bind={this} style="visibility:hidden" align="left" type="button" value="SV off" onclick={this._btnturnoffGSV}>Turn OFF Street Viewer</button >
<br />
</div>
);
}
private _onViewChange() {
let { interacting, center, scale } = this.view;
this.state = {
x: center.x,
y: center.y,
interacting,
scale
};
}
}
export = Steetview;
