topic Add point at user location in ArcGIS JavaScript Maps SDK Questions

Add point at user location

williamcarr — Mon, 28 Apr 2014 15:59:25 GMT

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

Re: Add point at user location

LuciHawkins — Mon, 28 Apr 2014 17:46:33 GMT

Something like this in your code should work:

var handlerd, mcpx, mcpy;   //declare your variables

//add function that will be activated when button clicked
function getmappoint() {
handlerd = dojo.connect(map, "onClick", getmapcoordinates);
map.hideZoomSlider();

}

function getmapcoordinates(evt){
map.graphics.clear();
var mpoint = new esri.geometry.Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);
var msymbol = new esri.symbol.PictureMarkerSymbol({
    "angle" : 0,
    "xoffset" : 6,
    "yoffset" : 12,
    "url" : "images/red_pin.png",
    "width" : 24,
    "height" : 24
});
var mgraphic = new esri.Graphic(mpoint, msymbol);
map.graphics.add(mgraphic);
mcpx = evt.mapPoint.getLongitude();
mcpy = evt.mapPoint.getLatitude();
dojo.byId("inLat").value = mcpy.toFixed(8);
dojo.byId("inLon").value = mcpx.toFixed(8);
}

//add button and text boxes for Lat-Long coord
<p>Get coordinates by clicking on the button below and then clicking on the map
</p>
<button data-dojo-type="dijit.form.Button" onClick="getmappoint()">
Get Coordinates
</button>
<div>
<span>Latitude: </span>
<input tabindex="2" type="text" id="inLat" />
</div>
<div>
<span>Longitude:</span>
<input tabindex="1" type="text" id="inLon" />
</div>

Luci

Re: Add point at user location

williamcarr — Mon, 28 Apr 2014 18:02:35 GMT

This is in the ball park, but I need to add the point to a feature database based on the gps lat lon.(Should have been more specific) I have the geolocation down, but adding the feature point is giving me the guff.(I'm very, very new to this... Should have mentioned that) Do I need to use an editor or draw function?

Re: Add point at user location

JatinPatel — Sat, 11 Dec 2021 07:20:47 GMT

This is out of one of my apps

function gpsPoint() {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(position.coords.longitude, position.coords.latitude));
                        updateCollectedPoints(pt);
                    }, null, { enableHighAccuracy: true, maximumAge: 0, timeout: 9000 });
                }

updateCollectedPoints(pt) can be created like:

                        pointsCollected.push(pt); ///pointscollected is a global varable
                        geometry = new esri.geometry.Polyline(_map.spatialReference);
                        geometry.addPath(pointsCollected);
                        symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color("red"), 5);
var graphic = new esri.Graphic(geometry, symbol);
                    graphic.setAttributes({ "drawtype": "collected" });
                    _map.graphics.add(graphic);

This is copy/paste out of one of my apps, so some variables needs to be declared if you are going to use it. I am collecting points and creating a line. Also, you need html 5 to get GPS location in a browser. older ones will not support this.

Re: Add point at user location

williamcarr — Mon, 28 Apr 2014 18:44:22 GMT

Is _manager your feature layer?

Re: Add point at user location

JatinPatel — Mon, 28 Apr 2014 18:57:44 GMT

Is _manager your feature layer?

fixed it. It is just a master js that controls everything. just ignore that.

Re: Add point at user location

williamcarr — Sat, 11 Dec 2021 07:20:50 GMT

Your help is very much appreciated, but I have one tiny, little question. How do I tie in the graphic to push the point to the feature layer?

 function addGraphic(pt){
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE, 
            12);
          graphic = new Graphic(pt, symbol);
          map.graphics.add(graphic);
 // zach is feature layer
map.zach.add(graphic);
          
          
          new esri.geometry.Point(pt, map.spatialReference);

Pardon my incompetence, I'm transferring over from Flex.

Re: Add point at user location

JatinPatel — Mon, 28 Apr 2014 19:28:56 GMT

featureLayer.applyEdits([newFeature], null, null, function () {........});

Re: Add point at user location

JatinPatel — Sat, 11 Dec 2021 07:20:53 GMT

Your help is very much appreciated, but I have one tiny, little question. How do I tie in the graphic to push the point to the feature layer?
 function addGraphic(pt){
          var symbol = new SimpleMarkerSymbol(
            SimpleMarkerSymbol.STYLE_CIRCLE, 
            12);
          graphic = new Graphic(pt, symbol);
          map.graphics.add(graphic);
 // zach is feature layer
map.zach.add(graphic);
          
          
          new esri.geometry.Point(pt, map.spatialReference);
Pardon my incompetence, I'm transferring over from Flex.

Are you talking about actually adding "graphic" on the layer?? or you mean adding point on layer?

Re: Add point at user location

williamcarr — Mon, 28 Apr 2014 19:39:33 GMT

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?

Re: Add point at user location

JatinPatel — Mon, 28 Apr 2014 19:46:12 GMT

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?

Re: Add point at user location

williamcarr — Mon, 28 Apr 2014 19:56:30 GMT

Home. Run.

Thank you, Jatin!

Re: Add point at user location

JatinPatel — Mon, 28 Apr 2014 19:58:29 GMT

Home. Run.

Thank you, Jatin!

sure. you are welcome

Re: Add point at user location

HectorChapa — Tue, 29 Apr 2014 12:41:27 GMT

Could I have the snippet of the whole code?

Thanks,

Re: Add point at user location

williamcarr — Sat, 11 Dec 2021 07:20:56 GMT

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>

Re: Add point at user location

williamcarr — Sat, 11 Dec 2021 07:20:58 GMT

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

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

Re: Add point at user location

HectorChapa — Tue, 29 Apr 2014 13:26:47 GMT

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

Re: Add point at user location

williamcarr — Tue, 29 Apr 2014 15:37:52 GMT

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});