closest facility service does not work

NadavDoron · ‎09-15-2018

Hi all,

I used thr arcgis api help to create a Closest Facility script.

Find closest facilities | ArcGIS API for JavaScript 3.25

I copied almost the entire code, just changed the facilities and the spatial reference.

I uploaded my network analysis service to my server and it does not work.

Nothing i do make it works. I tried to check if the code from the help section works without my changes but apparently i cant connect the service from my PC, but it does work from the link

https://developers.arcgis.com/javascript/3/samples/routetask_closest_facility/

the log in the script is me trying to see where it went wrong, it seems like the

routeGraphicLayer.on("mouse-over", function(evt){
            console.log("ok4.3");
          //clear existing directions and highlight symbol
          map.graphics.clear();
          dom.byId("directionsDiv").innerHTML= "Hover over the route to view directions";
          console.log("ok4.5");
          var highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,255],0.25), 4.5);
          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
          console.log("ok5");
          map.graphics.add(highlightGraphic);
          dom.byId("directionsDiv").innerHTML = esriLang.substitute(evt.graphic.attributes,"${*}");
            console.log("ok6");
        });‍‍‍‍‍‍‍‍‍‍‍‍‍

and the

//solve 
        closestFacilityTask.solve(params, function(solveResult){
          console.log("ok7");
          array.forEach(solveResult.routes, function(route, index){
            //build an array of route info
            var attr = array.map(solveResult.directions[index].features, function(feature){
              return feature.attributes.text;
            });
            var infoTemplate = new InfoTemplate("Attributes", "${*}");
            console.log("ok");
            route.setInfoTemplate(infoTemplate);
            route.setAttributes(attr);
            
            routeGraphicLayer.add(route);
            dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions";
          });
          console.log("ok??");
          //display any messages
          if(solveResult.messages.length > 0){
            dom.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0];
          }      
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

does not work at all.

can someone maybe point me for what i`m doing wrong?

thanx

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Closest Facilities</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
  <style> 
    body,html,#main{margin:0;padding:0;height:100%;width:100%;}
    .panel {
      border-radius: 6px;
      box-shadow: 0px 6px 3px -3px #888;
      border: 2px solid #86942A;
      margin: 5px;
    }
  </style> 

  <script src="https://js.arcgis.com/3.25/"></script>
  <script>
    var map, params;
    require([
      "dojo/dom",
      "dojo/_base/array",
      "esri/Color",
      "dojo/parser",
      "dijit/registry",
      
      "esri/urlUtils",
      "esri/map",
      "esri/lang",
      "esri/graphic",
       "esri/SpatialReference",
      "esri/InfoTemplate",
      "esri/layers/GraphicsLayer",
      "esri/renderers/SimpleRenderer",

      "esri/geometry/Point",
      "esri/tasks/FeatureSet",

      "esri/tasks/ClosestFacilityTask",
      "esri/tasks/ClosestFacilityParameters",

      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      
      "dijit/form/ComboBox",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane"
    ], function(
      dom, array, Color, parser, registry,
      urlUtils, Map, esriLang, Graphic, SpatialReference, InfoTemplate, GraphicsLayer, SimpleRenderer, 
      Point, FeatureSet, 
      ClosestFacilityTask, ClosestFacilityParameters, 
      SimpleMarkerSymbol, SimpleLineSymbol
    ) {
      var incidentsGraphicsLayer, routeGraphicLayer, closestFacilityTask;
   
      parser.parse();
      
      urlUtils.addProxyRule({
        urlPrefix: "route.arcgis.com",  
        proxyUrl: "/sproxy/"
      });
        
      map = new Map("map", { 
        basemap: "streets", 
        center: [35.019666588, 32.773163574],
        zoom: 15, 
        showInfoWindowOnClick: false 
      });
       
       map.spatialReference = new SpatialReference({wkid:2039});
       
       console.log(map.spatialReference);

      map.on("click", mapClickHandler);
      
      params = new ClosestFacilityParameters();
      params.impedenceAttribute= "Length";      
      params.defaultCutoff= 7.0;      
      params.returnIncidents=false;
      params.returnRoutes=true;
      params.returnDirections=false;
      
      map.on("load", function(evtObj) {
       
        var map = evtObj.target;
        var facilityPointSymbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_SQUARE, 
          20,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([89,95,35]), 2
          ),
          new Color([130,159,83,0.40])
            
        ); 

        var incidentPointSymbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 
          16,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([89,95,35]), 2
          ),
          new Color([130,159,83,0.40])
        );  

        incidentsGraphicsLayer = new GraphicsLayer();
        
        var incidentsRenderer = new SimpleRenderer(incidentPointSymbol);
        incidentsGraphicsLayer.setRenderer(incidentsRenderer);
        map.addLayer(incidentsGraphicsLayer);

        routeGraphicLayer = new GraphicsLayer();
        
        var routePolylineSymbol = new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID, 
          new Color([89,95,35]), 
          4.0
        );
        var routeRenderer = new SimpleRenderer(routePolylineSymbol);
        routeGraphicLayer.setRenderer(routeRenderer);

        map.addLayer(routeGraphicLayer);

        var facilitiesGraphicsLayer = new GraphicsLayer();
        var facilityRenderer = new SimpleRenderer(facilityPointSymbol);
        facilitiesGraphicsLayer.setRenderer(facilityRenderer);
       
        map.addLayer(facilitiesGraphicsLayer);
        
        facilitiesGraphicsLayer.add(new Graphic(new Point(3898452.00060809,3866259.95676958,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(3898265.94287582,3865871.18883343,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(3898503.83466325,3865604.65310533,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(3898875.14529586,3865745.2226377,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(3899318.62932033,3865316.43084768,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(3899233.56541492,3865337.13371146,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(3897905.10544874,3865821.03375048,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(3897867.58019902,3865713.1500249,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(3897867.58019902,3865713.1500249,map.spatialReference))); 
        console.log("ok1");
        var facilities = new FeatureSet();
        facilities.features = facilitiesGraphicsLayer.graphics;
        
        params.facilities = facilities;
        params.outSpatialReference = map.spatialReference;
       //after map loads, connect to listen to mouse move & drag events
        map.on("mouse-move", showCoordinates);
        map.on("mouse-drag", showCoordinates);
      });
      
      closestFacilityTask = new ClosestFacilityTask("https://132.68.130.156:6443/arcgis/rest/services/Network/bottle/NAServer/Closest_Facility");
       console.log("ok2");
       console.log(closestFacilityTask);

      registry.byId("numLocations").on("change", function() {
        params.defaultTargetFacilityCount = this.value;
        clearGraphics();
      });
       
       function showCoordinates(evt) {
          //display mouse coordinates
          dom.byId("info").innerHTML = evt.mapPoint.x + ", " + evt.mapPoint.y;
        }

      function clearGraphics() {
        //clear graphics
        dom.byId("directionsDiv").innerHTML= "";
        map.graphics.clear();
        routeGraphicLayer.clear();
        incidentsGraphicsLayer.clear();    
      } 

      function mapClickHandler(evt) {
        clearGraphics();
        dom.byId("directionsDiv").innerHTML= "";
        var inPoint = new Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);
        var location = new Graphic(inPoint);
        incidentsGraphicsLayer.add(location);
        console.log(inPoint.x, " ", inPoint.y);
        var features = [];
        features.push(location);
        var incidents = new FeatureSet();
        incidents.features = features;
        params.incidents = incidents;
        console.log("ok4");
        map.graphics.enableMouseEvents();
        console.log("ok4.2");
        
          routeGraphicLayer.on("mouse-over", function(evt){
            console.log("ok4.3");
          //clear existing directions and highlight symbol
          map.graphics.clear();
          dom.byId("directionsDiv").innerHTML= "Hover over the route to view directions";
          console.log("ok4.5");
          var highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,255],0.25), 4.5);
          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
          console.log("ok5");
          map.graphics.add(highlightGraphic);
          dom.byId("directionsDiv").innerHTML = esriLang.substitute(evt.graphic.attributes,"${*}");
            console.log("ok6");
        });
          
          console.log("ok7.1");
          console.log(params);

        //solve 
        closestFacilityTask.solve(params, function(solveResult){
          console.log("ok7");
          array.forEach(solveResult.routes, function(route, index){
            //build an array of route info
            var attr = array.map(solveResult.directions[index].features, function(feature){
              return feature.attributes.text;
            });
            var infoTemplate = new InfoTemplate("Attributes", "${*}");
            console.log("ok");
            route.setInfoTemplate(infoTemplate);
            route.setAttributes(attr);
            
            routeGraphicLayer.add(route);
            dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions";
          });
          console.log("ok??");
          //display any messages
          if(solveResult.messages.length > 0){
            dom.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0];
          }      
        });
          console.log("not good");
      }
    });
  </script>
</head>

<body class="claro">      
  <div data-dojo-type="dijit/layout/BorderContainer" 
       data-dojo-props="design:'headline', gutters:false" 
       style="width:100%;height:100%;margin:0px;">

    <div id="map" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" class="panel">
    </div>

    <div id="directions" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'bottom'" class="panel" 
         style="height:250px;">

      <b>Click the map to find routes for the
      <select id="numLocations" name="numLocations" data-dojo-type="dijit/form/ComboBox" value="1" style="width:60px;">
          <option selected="selected">1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
      </select> closest facilities to the input point.</b> 
      <div id="directionsDiv"></div>
       <span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span>

    </div>
 </div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

DmitryKudinov · ‎09-17-2018

Hi,

you are using defaultCutoff value set to 7.0, while relying on the Length impedance attribute which is in meters, i.e. you are limiting the CF solver to search for facilities within 7m radius.

Increase the defaultCutoff value and keep debugging, pay close attention to the HTTP responses which come from the server - they contain a lot of valuable information.

Hope this helps.

-DK

View solution in original post

DmitryKudinov · ‎09-17-2018

Hi,

you are using defaultCutoff value set to 7.0, while relying on the Length impedance attribute which is in meters, i.e. you are limiting the CF solver to search for facilities within 7m radius.

Increase the defaultCutoff value and keep debugging, pay close attention to the HTTP responses which come from the server - they contain a lot of valuable information.

Hope this helps.

-DK