Select to view content in your preferred language

Creating Point based on user input

690
3
Jump to solution
10-26-2022 05:59 AM
TheGamer
Occasional Contributor

Hi, im new to Javascript API and I was wondering if there is a way to create a point by using the coordinates entered by the user and append that point layer to existing data (following the symbology of the data its being appended to).

I was using Editor Widget but I don't like the use of clicking on the map, I want to create points by using the coordinates entered into a text box.

If I could get documentation or a sample code, it would be greatly appreciated. 

0 Kudos
1 Solution

Accepted Solutions
JeffreyWilkerson
Occasional Contributor III

 The Editor widget provides this function out of the box, and there are many examples. You can build the functionality yourself by first creating a point graphic under the view.hitTest() and then either immediately adding the point to a layer through its applyEdits() function, or building some kind of interface (menu, button) to have the user accept this new point and then push it through applyEdits().  I have one application where I use the Editor to edit only existing features, and if the user hits a button before picking a point on the screen, the point is generated and pushed to the layer, something like:

view.on("immediate-click", (event) => {

    // Listen for when the user clicks on the view
    view.hitTest(event).then((response) => {
        let curPt = view.toMap(response.screenPoint);
        let graphics = response.results.filter(function (result) {
            // check if the graphic belongs to the layer of interest
            return result.graphic.layer === busStopLayer;
        });

        if (highlight) {
            highlight.remove();
            highlight = null;
        }

        if (getStreetView) {
            ... Can do other things if not wanting to create a new point
        else if (graphics.length > 0) {
            ... the user selected an existing graphic, handle it
        else if (addStopReady && juris != "None") {
            // Clear current graphics layer (specified upon initialization)
            if (gLayer) {
                gLayer.removeAll();
            }

            // Generate new stop ID
            ...

            // Populate attributes for new point
            let attributes = {};
            attributes["StopID"] = newStopID;
            attributes["Juris"] = juris;
            attributes["Status"] = "Requested";
            attributes["Long"] = curPt.longitude;
            attributes["Lat"] = curPt.latitude;
        
            // Build new point graphic
            let newPoint = new Graphic({
                attributes: attributes,
                geometry: curPt
            });

            var newObjectId = 0;
            theLayer.applyEdits({
                addFeatures: [newPoint]
            }).then((editResult) => {
                console.log(editResult);
                if (editResult.addFeatureResults.length > 0) {
                    // New point was successfully added, get the new objectID
                    newObjectId = editResult.addFeatureResults[0]["objectId"];
                    console.log("Added new bus stop with objectID: ", newObjectId);
                    theLayer.refresh(); //Esri says this is not needed, but it seems to help.
                })
                .catch(function (error) {
                    console.error("New bus stop ID Error: " + error);
            });
        }
    });
});

View solution in original post

0 Kudos
3 Replies
JeffreyWilkerson
Occasional Contributor III

 The Editor widget provides this function out of the box, and there are many examples. You can build the functionality yourself by first creating a point graphic under the view.hitTest() and then either immediately adding the point to a layer through its applyEdits() function, or building some kind of interface (menu, button) to have the user accept this new point and then push it through applyEdits().  I have one application where I use the Editor to edit only existing features, and if the user hits a button before picking a point on the screen, the point is generated and pushed to the layer, something like:

view.on("immediate-click", (event) => {

    // Listen for when the user clicks on the view
    view.hitTest(event).then((response) => {
        let curPt = view.toMap(response.screenPoint);
        let graphics = response.results.filter(function (result) {
            // check if the graphic belongs to the layer of interest
            return result.graphic.layer === busStopLayer;
        });

        if (highlight) {
            highlight.remove();
            highlight = null;
        }

        if (getStreetView) {
            ... Can do other things if not wanting to create a new point
        else if (graphics.length > 0) {
            ... the user selected an existing graphic, handle it
        else if (addStopReady && juris != "None") {
            // Clear current graphics layer (specified upon initialization)
            if (gLayer) {
                gLayer.removeAll();
            }

            // Generate new stop ID
            ...

            // Populate attributes for new point
            let attributes = {};
            attributes["StopID"] = newStopID;
            attributes["Juris"] = juris;
            attributes["Status"] = "Requested";
            attributes["Long"] = curPt.longitude;
            attributes["Lat"] = curPt.latitude;
        
            // Build new point graphic
            let newPoint = new Graphic({
                attributes: attributes,
                geometry: curPt
            });

            var newObjectId = 0;
            theLayer.applyEdits({
                addFeatures: [newPoint]
            }).then((editResult) => {
                console.log(editResult);
                if (editResult.addFeatureResults.length > 0) {
                    // New point was successfully added, get the new objectID
                    newObjectId = editResult.addFeatureResults[0]["objectId"];
                    console.log("Added new bus stop with objectID: ", newObjectId);
                    theLayer.refresh(); //Esri says this is not needed, but it seems to help.
                })
                .catch(function (error) {
                    console.error("New bus stop ID Error: " + error);
            });
        }
    });
});
0 Kudos
TheGamer
Occasional Contributor

Hi @JeffreyWilkerson but this uses click action, I don't want that. I just want the user to type in the coordinates (let's say a text box) and then use those coordinates) and create a point layer and then append it

0 Kudos
JeffreyWilkerson
Occasional Contributor III

Take the coordinates, create a new point, and then add it to the layer using the applyEdits() function.