this.addGrpahic is not a function error

GeoKeyS_A — Thu, 16 Apr 2020 10:42:19 GMT

Hi everyone, I'm new at javascript and developping widgets for WAB for developpers. js widget

I am currently trying to develop an off-panel widget, which aim would be geolocating the user and creating a point in a layer I previously published on ArcGIS Server as a Feature Service. (Works like a panic button)

I am having some trouble at finding out what could be wrong with this.addGraphic (line 65) at the function zoomToLocation.

Console says the following:

Uncaught TypeError: this.addGraphic is not a function
at zoomToLocation (Widget.js?wab_dv=2.15:65)

Here is my code:

define([
   'dojo/_base/declare',
   'jimu/BaseWidget',
   'esri/graphic',
   'esri/geometry/Point',
   'esri/symbols/SimpleMarkerSymbol',
   'esri/symbols/SimpleLineSymbol',
   'esri/Color',
   "esri/layers/FeatureLayer"
   ],
   function(declare, BaseWidget, Graphic, Point, SimpleMarkerSymbol, SimpleLineSymbol, Color, FeatureLayer) {

return declare([BaseWidget], {

baseClass: 'jimu-widget-panico',
name: "Panico",

         graphic: null,
         currLocation: null,
         watchId: null,

         postCreate: function() {
            this.initFunc();
         },

initFunc: function(){

            if(navigator.geolocation) {
               navigator.geolocation.getCurrentPosition(this.zoomToLocation, this.locationError);
            }
            else {
               alert("error.");
            }

         locationError: function(error) {
            if(navigator.geolocation) {
                  navigator.geolocation.clearWatch(this.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;
               }
      },

zoomToLocation: function(location) {

         var pt = new Point(location.coords.longitude, location.coords.latitude);
            this.addGraphic(pt);
            this.map.centerAndZoom(pt, 12);
         var featureLayer = new          FeatureLayer("https://localhost:6443/arcgis/rest/services/..../FeatureServer/0", {
            outFields: ["*"]
         });

         graphic = new Graphic(pt);
         featureLayer.applyEdits([graphic], null, null);
      },

      addGraphic: function(pt){
         var symbol = new SimpleMarkerSymbol(
               SimpleMarkerSymbol.STYLE_CIRCLE,
               12,
               new SimpleLineSymbol(
                  SimpleLineSymbol.STYLE_SOLID,
                  new Color([210, 105, 30, 0.5]),
                  8
               ),
               new Color([210, 105, 30, 0.9])
            );
            graphic = new Graphic(pt, symbol);
            this.map.graphics.add(graphic);
      }

});
});

Re: this.addGrpahic is not a function error

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:31:44 GMT

Your issue is that the call to the function is out of scope. You need to use lang.hitch

         locationError: function(error) {
            if(navigator.geolocation) {
                  navigator.geolocation.clearWatch(lang.hitch(this, this.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;
               }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: this.addGrpahic is not a function error

GeoKeyS_A — Thu, 16 Apr 2020 12:12:12 GMT

Hi Robert, thanks for your answer.

I added lang.hitch (and dojo/_base/lang module) but the console keeps saying this.add is not a function at zoomToLocation.

Regards

Re: this.addGrpahic is not a function error

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:31:46 GMT

Sorry wrong function earlier.

         initFunc: function(){
            if(navigator.geolocation) {
               navigator.geolocation.getCurrentPosition(lang.hitch(this, this.zoomToLocation), this.locationError);
            } else {
               alert("error.");
            }
         },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: this.addGrpahic is not a function error

GeoKeyS_A — Thu, 16 Apr 2020 14:48:31 GMT

Thank you very much Robert, I really appreciate your help!! It is now succesfully working!

topic Re: this.addGrpahic is not a function error in Web AppBuilder Custom Widgets Questions

this.addGrpahic is not a function error

Re: this.addGrpahic is not a function error

Re: this.addGrpahic is not a function error

Re: this.addGrpahic is not a function error

Re: this.addGrpahic is not a function error