AnsweredAssumed Answered

closest facility service does not work

Question asked by sasido on Sep 15, 2018
Latest reply on Sep 17, 2018 by dkudinov-esristaff

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>

Outcomes