Select to view content in your preferred language

Creating Point based on user input

759
3
Jump to solution
10-26-2022 05:59 AM
TheGamer
Regular 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
Frequent Contributor

 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
Frequent Contributor

 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
Regular 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
Frequent Contributor

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