nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

タグ付けされた投稿をもっと見る

Accepted answers

JatinPatel

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?

All comments

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

HectorChapa

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

williamcarr

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

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

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>

HectorChapa

Could I have the snippet of the whole code?

Thanks,

JatinPatel

Home. Run.

Thank you, Jatin!

sure. you are welcome

williamcarr

Home. Run.

Thank you, Jatin!

JatinPatel

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?

williamcarr

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?

JatinPatel

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?

JatinPatel

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

williamcarr

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.

JatinPatel

Is _manager your feature layer?

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

williamcarr

Is _manager your feature layer?

JatinPatel

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.

williamcarr

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?

LuciHawkins

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

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.