Issue with RouteTask & Circle in Windows phone

[sadiq-mc]

Hi... Have you tried RouteTask & Circle in windows phone?? We are getting an error, "TypeError: Object doesn't support this action" while we create the instances..

Find a route Circle

[andygup]

Can you post a screenshot of the console log?

What version of OS and what version of IE are you running on the windows phone?

[ghost]

Widows Phone 8.1 OS version - 8.10.14192.280 IE version - 11

[andygup]

Can you post your code and a screenshot of the console log?

[ghost]

<div id="mapDiv" dir="ltr" style="text-align: left;">

  </div>
  <button id="closeMapBtn" data-title="Close">Close</button>
</div>
<script src="assets/js/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="assets/js/jQueryHelper.js"></script>

<script>
  var map;
  var routeTask;
  var routeParams;
  var routeSymbol;
  $(document).ready(function () {
  jqueryInit();

  });
  function jqueryInit(){
      require([
          "esri/urlUtils",
          "esri/map",
          "esri/symbols/PictureMarkerSymbol",
          "esri/graphic",
          "esri/SpatialReference",
          "esri/geometry/Point",
          "esri/geometry/webMercatorUtils",
          "esri/InfoTemplate",
          "esri/lang",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/tasks/FeatureSet",
          "esri/graphicsUtils",
          "esri/tasks/RouteTask",
          "esri/tasks/RouteParameters",
          "esri/symbols/SimpleLineSymbol",
          "esri/Color",
          "esri/geometry/Circle", 
          "esri/symbols/SimpleFillSymbol",
          "esri/layers/GraphicsLayer",
          "dojo/_base/connect",
          "dojo/on",
          "dojo/domReady!"
          ],
          function (urlUtils,Map, PictureMarkerSymbol, Graphic, SpatialReference, Point, webMercatorUtils,
            InfoTemplate, lang, ArcGISTiledMapServiceLayer, FeatureSet, graphicsUtils, RouteTask, 
            RouteParameters, SimpleLineSymbol, Color, Circle, SimpleFillSymbol, GraphicsLayer, connect, on) {
            map = new Map("mapDiv",{
                   basemap: "streets",
                  center: [54.698181, 24.298214], 
                  zoom: 3
              });
                  var destinationMarkerSymbol = new PictureMarkerSymbol({
                      "angle":0,
                      "xoffset":0,
                      "yoffset":0,
                      "type":"esriPMS",
                      "url":"https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Pink.png",
                      "width":40,
                      "height":40
                  });
                  try {
                      routeTask = new RouteTask(MyRouteServerURL);
                  } catch(e) {
                      console.log(e.message);                    // Type error:Object doesn't support this action
                  }
                  //setup the route parameters
                  routeParams = new RouteParameters();
                  routeParams.stops = new FeatureSet();
                  routeParams.outSpatialReference = {
                    "wkid" : 4326
                  };

                  routeTask.on("solve-complete", showRoute);
                  routeTask.on("error", errorHandler);

                  routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0, 0, 255, 0.5])).setWidth(5);
                  var successvalue = false;
                  if (navigator.geolocation) {
                    setTimeout(function () {
                        if (successvalue == false) {
                            directionLocationError();
                        }
                    }, 30000);
                    navigator.geolocation.getCurrentPosition(directionLocationSuccess, directionLocationError, {setHighAccuracy:true});

                    function directionLocationSuccess(position){
                      successvalue = true;
                      removeLoader();
                      if(position.coords.latitude != null || position.coords.longitude != null){
                          var startPoint = markDirectionPoint(position.coords.latitude, position.coords.longitude);
                          var destinationPoint = markPoint(details, destinationMarkerSymbol);

                         resolveRoute(startPoint, destinationPoint);

                      }
                           }

                  function directionLocationError(err){
                    console.log('Plotting Default Location');
                    var startPoint = markDirectionPoint(24.4722334192554, 54.342358636815625)            
                    var destinationPoint = markPoint(details, destinationMarkerSymbol);
                    resolveRoute(startPoint, destinationPoint);
                  }
                    }
                    else {
                     console.log('No GPS Available');
                    }
                function markDirectionPoint(latitude, longitude) {                 
                      var graphic = new Graphic(wgsPt, markerSymbol);
                      var pointGraphics = map.graphics.add(graphic);

                      features.push(graphic);
                      helper.setCenterPt(latitude, longitude, 4326);
                      helper.setZoom(4);
                      return pointGraphics;
                  }

                  function resolveRoute(startPoint, endPoint) {
                    console.log("resolve route");
                    routeParams.stops.features.push(startPoint);
                    routeParams.stops.features.push(endPoint);
                    if (routeParams.stops.features.length >= 2) {
                      routeTask.solve(routeParams);
                    }
                  }
                 function markPoint(details, marker) {
                  var wgsPt = new Point(details.Location.Longitude, details.Location.Latitude, new SpatialReference({wkid:4326}));

                  var graphic = new Graphic(wgsPt, marker);
                  map.graphics.add(graphic);
                  map.centerAndZoom(wgsPt, 6);
                  features.push(graphic);
                  helper.setCenterPt(details.Location.Latitude, details.Location.Longitude, 4326);
                  helper.setZoom(4);

                  return graphic
              }
          });
          }
</script>

Please find the code snippet above and the screenshot is..

[andygup]

Are you reusing the dojo.js file from the sample app? That could very likely be causing the errors you are seeing.

That optimized dojo.js file is built only for the sample application and will not support additional functionality.

Please note: You must create your own optimized file using the website jso.arcgis.com. I'll make a note to document that clearly in the repo comments.

[andygup]

For reference to anyone looking to use the web optimizer. The web optimizer creates a single, optimized ArcGIS API for JavaScript library based on your applications unique needs: https://developers.arcgis.com/javascript/jshelp/inside_web_optimizer.html.

You also have the option of using bower to generate custom builds of the ArcGIS API for JavaScript: https://developers.arcgis.com/javascript/jshelp/inside_bower_custom_builds.html

[ghost]

Yes.. We were using the same dojo.js...

Thanks for the info. I will update you once I get the dojo for my requirement and checks if issue is still existing..

[ghost]

@andygup That was a wonderful info.. The issue is resolved in Windows phone now.. Thanks a lot..

Please document regarding the same in README.md, so that other users like me would be helpful... :)