Community

closestFacilityTask from a csv

1424
1
Jump to solution
07-07-2016 07:56 AM
JimColl
by
New Contributor II
‎07-07-2016 07:56 AM

I am attempting to modify the closestFacilityTask sample (ArcGIS API for JavaScript Sandbox ) to take a csv input as the facilities layer, but have not had any luck.  Any tips as to where I have gone wrong would be greatly appreciated.  You can copy/paste the code below into the sandbox to see how I've attempted to approach this problem. 

<!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.17/dijit/themes/claro/claro.css">

  <link rel="stylesheet" href="https://js.arcgis.com/3.17/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.17/"></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/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",

      "esri/layers/CSVLayer",

      "dijit/form/ComboBox",

      "dijit/layout/BorderContainer",

      "dijit/layout/ContentPane"

    ], function(

      dom, array, Color, parser, registry,

      urlUtils, Map, esriLang, Graphic, InfoTemplate, GraphicsLayer, SimpleRenderer,

      Point, FeatureSet,

      ClosestFacilityTask, ClosestFacilityParameters,

      SimpleMarkerSymbol, SimpleLineSymbol, CSVLayer

    ) {

      var incidentsGraphicsLayer, routeGraphicLayer, closestFacilityTask;

     

      map = new Map("map", {

        basemap: "streets",

        center: [-87.540526, 33.215858],

        zoom: 13,

        showInfoWindowOnClick: false

      });

     

      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])

      ); 

      var routePolylineSymbol = new SimpleLineSymbol(

        SimpleLineSymbol.STYLE_SOLID,

        new Color([89,95,35]),

        4.0

      );

     

      shelterPointSym = new SimpleRenderer(facilityPointSymbol);

      parser.parse();

     

      urlUtils.addProxyRule({

        urlPrefix: "route.arcgis.com", 

        proxyUrl: "/sproxy/"

      });

      urlUtils.addProxyRule({

        urlPrefix: "mikecp11.github.io",

        proxyUrl: "/proxy/"

      });

      shelters = new CSVLayer("https://mikecp11.github.io/LocalStops.csv", {

        geometryType:"esriGeometryPoint",

        latitudeFieldName:"LATITUDE",

        longitudeFieldName:"LONGITUDE"//,

        //refreshInterval:5,

        //renderer: shelterPointSym,

        //styling: true,

        //visible: true

      });     

      console.log(shelters)

     

      map.on("click", mapClickHandler);

     

      params = new ClosestFacilityParameters();

      params.impedenceAttribute= "Miles";     

      params.defaultCutoff= 400;     

      params.returnIncidents=false;

      params.returnRoutes=true;

      params.returnDirections=true;

      //params.defaultTargetFacilityCount=5;

     

      map.on("load", function(evtObj) {

        var map = evtObj.target;

        incidentsGraphicsLayer = new GraphicsLayer();

        var incidentsRenderer = new SimpleRenderer(incidentPointSymbol);

        incidentsGraphicsLayer.setRenderer(incidentsRenderer);

        map.addLayer(incidentsGraphicsLayer);

        routeGraphicLayer = new GraphicsLayer();

        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(shelters.graphics);

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9747535,3911614,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9744043,3912399,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9739868,3914969,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9736724,3915954,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9730781,3920702,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9733535,3926914,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9740003,3923150,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9741618,3925577,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9737357,3927660,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9742319,3929506,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9745587,3926974,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9747498,3925474,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9748919,3929392,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9751928,3931523,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9749396,3926593,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9755206,3927204,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9753961,3919552,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9749212,3919246,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9744368,3919733,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9739447,3916112,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9732664,3917186,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9731322,3924282,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9736491,3922677,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9739739,3921100,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9741564,3921033,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9744947,3921339,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9747249,3923021,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9747001,3923661,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9745042,3923470,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9743504,3922839,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9740685,3923841,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9738354,3924177,map.spatialReference)));

        // facilitiesGraphicsLayer.add(new Graphic(new Point(-9739797,3926823,map.spatialReference)));

       

        var facilities = new FeatureSet();

        facilities.features = facilities.graphics;

       

        params.facilities = facilities;

        params.outSpatialReference = map.spatialReference;

       

        map.addLayer(shelters);

      });

      closestFacilityTask = new ClosestFacilityTask("https://route.arcgis.com/arcgis/rest/services/World/ClosestFacility/NAServer/ClosestFacility_World");

      registry.byId("numLocations").on("change", function() {

        params.defaultTargetFacilityCount = this.value;

        clearGraphics();

      });

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

       

        var features = [];

        features.push(location);

        var incidents = new FeatureSet();

        incidents.features = features;

        params.incidents = incidents;

       

        map.graphics.enableMouseEvents();

      

        routeGraphicLayer.on("mouse-over", function(evt){

          //clear existing directions and highlight symbol

          map.graphics.clear();

          dom.byId("directionsDiv").innerHTML= "Hover over the route to view directions";

         

          var highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,255],0.25), 4.5);

          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);

         

          map.graphics.add(highlightGraphic);

          dom.byId("directionsDiv").innerHTML = esriLang.substitute(evt.graphic.attributes,"${*}");

        });

        //solve

        var destinationArray = [];

        closestFacilityTask.solve(params, function(solveResult){

          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", "${*}");

           

            route.setInfoTemplate(infoTemplate);

            route.setAttributes(attr);

            //alert(JSON.stringify(route.attributes[route.attributes.length - 1], null, 4));

            destinationArray.push(route.attributes[route.attributes.length - 1])

           

           

            routeGraphicLayer.add(route);

            dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions";

          });

          alert(destinationArray.toString());

         

          //display any messages

          if(solveResult.messages.length > 0){

            dom.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0];

          }     

        });

     

       

      }

    });

  </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 names and addresses 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 shelters to your location.</b>

      <div id="directionsDiv"></div>

    </div>

</div>

</body>

</html>

0 Kudos
1 Solution

Accepted Solutions
JimColl
by
New Contributor II
‎07-12-2016 02:08 PM

For future internet trollers, we got around this problem like so (it's not pretty but it works):

        function initStops(){

          console.log("initStops started");

          var sheltersActiveSymbol = new SimpleMarkerSymbol("solid", 12, null, new Color([0, 100, 0, 0.5]));

          var sheltersInactiveSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.5]), 4));

          var sheltersActiveRenderer = new SimpleRenderer(sheltersActiveSymbol);

          var sheltersInactiveRenderer = new SimpleRenderer(sheltersInactiveSymbol);

          sheltersActive = new GraphicsLayer();

          sheltersInactive = new GraphicsLayer();

          sheltersActive.setRenderer(sheltersActiveRenderer);

          sheltersInactive.setRenderer(sheltersInactiveRenderer);

          var template = new InfoTemplate("${Name}", "Active: ${Active}");

          map.addLayer(sheltersActive);

          map.addLayer(sheltersInactive);

          function getShelters( scriptUrl ) {

            var result = null;

            $.ajax({

              url: scriptUrl,

              type: 'get',

              dataType: 'text',

              async: false,

              success: function(data) {

                result = data;

                }

            });

            return result;

          }

          $(document).ready(function(){

            csvData = getShelters("https://mikecp11.github.io/RedCrossShelters_shortened.csv");

          });

          var csvArrays = $.csv.toArrays(csvData);

          console.log("csvarray[0]: ",csvArrays[1][0]);

          for(i=1; i < csvArrays.length; i++){

            current = csvArrays;

            shelter = new Point(current[4], current[3]);

            if (current[0] == 1) {

              sheltersActive.add(new Graphic(shelter));

            }

            else if (current[0] == 0) {

              sheltersInactive.add(new Graphic(shelter));

            }

          }

          var facilities = new FeatureSet();

          facilities.features = sheltersActive.graphics;

          params.facilities = facilities;

          console.log("initStops finished");

        }

View solution in original post

0 Kudos
1 Reply
JimColl
by
New Contributor II
‎07-12-2016 02:08 PM

For future internet trollers, we got around this problem like so (it's not pretty but it works):

        function initStops(){

          console.log("initStops started");

          var sheltersActiveSymbol = new SimpleMarkerSymbol("solid", 12, null, new Color([0, 100, 0, 0.5]));

          var sheltersInactiveSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0, 0.5]), 4));

          var sheltersActiveRenderer = new SimpleRenderer(sheltersActiveSymbol);

          var sheltersInactiveRenderer = new SimpleRenderer(sheltersInactiveSymbol);

          sheltersActive = new GraphicsLayer();

          sheltersInactive = new GraphicsLayer();

          sheltersActive.setRenderer(sheltersActiveRenderer);

          sheltersInactive.setRenderer(sheltersInactiveRenderer);

          var template = new InfoTemplate("${Name}", "Active: ${Active}");

          map.addLayer(sheltersActive);

          map.addLayer(sheltersInactive);

          function getShelters( scriptUrl ) {

            var result = null;

            $.ajax({

              url: scriptUrl,

              type: 'get',

              dataType: 'text',

              async: false,

              success: function(data) {

                result = data;

                }

            });

            return result;

          }

          $(document).ready(function(){

            csvData = getShelters("https://mikecp11.github.io/RedCrossShelters_shortened.csv");

          });

          var csvArrays = $.csv.toArrays(csvData);

          console.log("csvarray[0]: ",csvArrays[1][0]);

          for(i=1; i < csvArrays.length; i++){

            current = csvArrays;

            shelter = new Point(current[4], current[3]);

            if (current[0] == 1) {

              sheltersActive.add(new Graphic(shelter));

            }

            else if (current[0] == 0) {

              sheltersInactive.add(new Graphic(shelter));

            }

          }

          var facilities = new FeatureSet();

          facilities.features = sheltersActive.graphics;

          params.facilities = facilities;

          console.log("initStops finished");

        }

0 Kudos