Add point at user location

[williamcarr]

I am trying to create an app to add a feature layer point at a users location. I haven't had much luck finding a good example. Ideally, this should function like Collector for ArcGIS, where as the user clicks to collect a feature at the lat/long. Can anybody help in finding resource material pertaining to adding a single feature to the map/SDE. I've sifted through a lot of material, but haven't found any pay dirt. Thanks

[JatinPatel · Accepted solution]

It will be a point on layer. The concept is to add water utility service orders to a feature layer by our service technicians (zach).  From there it will go back to our server to be processed on ArcMap. We were initially going to have them place it manually with Editor, but we need more accuracy. Any ideas?

var fieldAttributes = {};
fieldAttributes["tech"] = "Zach";
fieldAttributes["MeterNumber"] = 1234;
.
.
.
.
var newFeature = new esri.Graphic(geometry, null, fieldAttributes);
featureLayer.applyEdits([newFeature], null, null, function () {//success}, function() {//error});

[williamcarr]

Home. Run.

Thank you, Jatin!

[JatinPatel]

Home. Run.

Thank you, Jatin!

sure. you are welcome

[HectorChapa]

Could I have the snippet of the whole code?

Thanks,

[williamcarr]

Sure thing. It is a little hinky on the geometry, but it does place a point.

<script>
      var map;
      var graphic;
      var currLocation;
      var watchId;
      require([
        "esri/map", "esri/geometry/Point","esri/layers/FeatureLayer", 
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/graphic", "esri/Color", "dojo/domReady!"
      ], function bat(
        Map, Point,FeatureLayer,
        SimpleMarkerSymbol, SimpleLineSymbol,
        Graphic, Color
      ) {
       
       
       
        map = new Map("map", {
          basemap: "oceans",
          center: [-85.957, 17.140],
          zoom: 11
        });
        
         var featureLayer = new FeatureLayer("", {
          mode: FeatureLayer.MODE_SELECTION,
          outFields: ["*"]
        });
        map.addLayer(featureLayer);
        
       
map.on("load", initFunc);
        function orientationChanged() {
          if(map){
            map.reposition();
            map.resize();
          }
        }

        function initFunc(map) {
         
         
         
          if( navigator.geolocation ) {  
            navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
            watchId = navigator.geolocation.watchPosition(showLocation, locationError);
          } else {
            alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");
          }
          
        }

        function locationError(error) {
          //error occurred so stop watchPosition
          if( navigator.geolocation ) {
            navigator.geolocation.clearWatch(watchId);
          }
          switch (error.code) {
            case error.PERMISSION_DENIED:
              alert("Location not provided");
              break;

            case error.POSITION_UNAVAILABLE:
              alert("Current location not available");
              break;

            case error.TIMEOUT:
              alert("Timeout");
              break;

            default:
              alert("unknown error");
              break;
          }
        }

        function zoomToLocation(location) {
          var pt = new Point(location.coords.longitude, location.coords.latitude);
          addGraphic(pt);
          map.centerAndZoom(pt, 12);
        }

        function showLocation(location) {
         
          //zoom to the users location and add a graphic
          var pt = new Point(location.coords.longitude, location.coords.latitude);
          if ( !graphic ) {
            addGraphic(pt);
          } else { // move the graphic if it already exists
            graphic.setGeometry(pt);
            
          
            
          }
          
         
          map.centerAt(pt);
          
        }
        var geometry;
        function addGraphic(pt){
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE, 
            12);
          graphic = new Graphic(pt, symbol);
          map.graphics.add(graphic);
          
          
          
          new esri.geometry.Point(pt, map.spatialReference);
          
          var newFeature = new esri.Graphic(geometry, null,null);
featureLayer.applyEdits([newFeature], null, null, function () {}, function() {});
          
          
          
        }
        
      });
    </script>

[williamcarr]

var newFeature = new esri.Graphic(geometry, null,null);
featureLayer.applyEdits([graphic], null, null);

This is the change that adds the point feature layer...

[HectorChapa]

Hey William so this only adds the point based on your geolocation right. I doesnt add any data to the attribute fields.

[williamcarr]

True, for my purposes I don't need it.

Jatin did add this bit which should add attributes.

var fieldAttributes = {};
fieldAttributes["tech"] = "Zach";
fieldAttributes["MeterNumber"] = 1234;
.
.
.
.
var newFeature = new esri.Graphic(geometry, null, fieldAttributes);
featureLayer.applyEdits([newFeature], null, null, function () {//success}, function() {//error});