I'm just getting started with using the JavaScript API (v 4.33).
I'm creating a winter hazard report form for use by anyone that visits our campus. The user is supposed to be able to click on a location on a map in the form. This is supposed to update the values for the latitude and longitude fields on the form with the latitude and longitude for the area on the map where they clicked. Instead of updating the fields as expected, the form is throwing the error I have in the subject. I know the issue is in the click handler for the view, but I'm not sure how to fix it. I'm also not sure if there is a better way to structure how I'm making all of the necessary calls.
View the sample form in development
Here's the JavaScript I'm using:
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol"
], function(Map, MapView, Graphic, GraphicsLayer, Point, SimpleMarkerSymbol) {
const map = new Map({
basemap: "satellite" // You can choose other basemaps like "topo-vector", "satellite", "streets-navigation-vector" etc.
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-89.568881, 44.523497], // Longitude, latitude
zoom: 18 // Zoom level
});
// Create a graphic layer to hold the pin
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// Define the pin's coordinates
const point = new Point({
longitude: -89.568881,
latitude: 44.523497,
});
// Define the pin's symbol (a simple red circle in this case)
const markerSymbol = new SimpleMarkerSymbol({
color: [226, 119, 40], // Orange
outline: {
color: [255, 255, 255], // White
width: 1
}
});
// Create a Graphic with the point and symbol
const pinGraphic = new Graphic({
geometry: point,
symbol: markerSymbol
});
// Add the pin graphic to the graphics layer
graphicsLayer.add(pinGraphic);
// Add a click event to add new pins
view.on("click", function(event) {
const newPinGraphic = new Graphic({
geometry: newPoint,
symbol: markerSymbol
});
graphicsLayer.add(newPinGraphic);
// Get the latitudena nd longitude fields on the form
const lonControl = document.querySelector('input[name$="Longitude"]');
const latControl = document.querySelector('input[name$="Latitude"]');
// Assign the values to the form fields
lonControl.value = event.mapPoint.longitude;
latControl.value = event.mapPoint.latitude;
});
});
Thanks
