AnsweredAssumed Answered

Select layer to use for Closest Facility Route

Question asked by Linn_GIS on Nov 14, 2014
Latest reply on Nov 17, 2014 by Linn_GIS

I am trying to figure out the best way to route to closest facility based on radio button selection. The default routes to squares but I would like to choose between either circles or squares via radio button selection.

 

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

  <title>Closest Facilities</title>

 

 

  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

  <link rel="stylesheet" href="http://js.arcgis.com/3.11/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;

    }

        #metac {        position: absolute;

            left: 20px;       bottom: 62px;

            width: 10em;           height: 5em;

            z-index: 40;            background: #fff;

            color: #777;            padding: 5px;

            border: 2px solid #686;            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;            border-radius: 5px;

            font-family: arial;        font-size: 0.9em;

        }

 

 

            #metac h3 {

                color: #666;

                font-size: 1.1em;

                padding: 0px;

                margin: 0px;

                display: inline-block;

            }

  </style>

 

 

  <script src="http://js.arcgis.com/3.11/"></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",

            "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

    ) {

      var incidentsGraphicsLayer, routeGraphicLayer, closestFacilityTask;

 

      parser.parse();

   

      urlUtils.addProxyRule({

        urlPrefix: "route.arcgis.com",

        proxyUrl: "/sproxy/"

      });

     

      map = new Map("map", {

        basemap: "streets",

        center: [-122.4, 37.785],

        zoom: 14,

        showInfoWindowOnClick: false

      });

 

 

      map.on("click", mapClickHandler);

   

      params = new ClosestFacilityParameters();

      params.impedenceAttribute= "Miles";   

      params.defaultCutoff= 7.0;   

      params.returnIncidents=false;

      params.returnRoutes=true;

      params.returnDirections=true;

   

      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_DIAMOND,

          16,

          new SimpleLineSymbol(

            SimpleLineSymbol.STYLE_SOLID,

            new Color([200,100,200]), 2

          ),

          new Color([200,100,200,0.9])

        );

 

 

        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([250,0,0]),

          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(-13625960,4549921,map.spatialReference)));

        facilitiesGraphicsLayer.add(new Graphic(new Point(-13626184,4549247,map.spatialReference)));

        facilitiesGraphicsLayer.add(new Graphic(new Point(-13626477,4549415,map.spatialReference)));

        facilitiesGraphicsLayer.add(new Graphic(new Point(-13624374,4548254,map.spatialReference)));

        facilitiesGraphicsLayer.add(new Graphic(new Point(-13624891,4548565,map.spatialReference)));

 

        var facilities = new FeatureSet();

        facilities.features = facilitiesGraphicsLayer.graphics;

     

        params.facilities = facilities;

        params.outSpatialReference = map.spatialReference;

    

 

 

//////////////NEW Point Symbols  //////////   

        var facilityNEWPointSymbol = new SimpleMarkerSymbol(

          SimpleMarkerSymbol.STYLE_CIRCLE,

          15,

          new SimpleLineSymbol(

            SimpleLineSymbol.STYLE_SOLID,

            new Color([250,95,35]), 2

          ),

          new Color([130,250,83,0.40])

        );

    

    

        var facilitiesNEWGraphicsLayer = new GraphicsLayer();

        var facilityNEWRenderer = new SimpleRenderer(facilityNEWPointSymbol);

        facilitiesNEWGraphicsLayer.setRenderer(facilityNEWRenderer);

    

        map.addLayer(facilitiesNEWGraphicsLayer);

     

        facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13625750,4549721,map.spatialReference)));

        facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13626194,4549547,map.spatialReference)));

        facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13626487,4549215,map.spatialReference)));

        facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13625375,4549459,map.spatialReference)));

        facilitiesNEWGraphicsLayer.add(new Graphic(new Point(-13624364,4548554,map.spatialReference)));

   

 

        var facilitiesNEW = new FeatureSet();

        facilitiesNEW.features = facilitiesNEWGraphicsLayer.graphics;

/////////////// END NEW POINT SYMBOL   

 

 

 

 

      });

   

      closestFacilityTask = new ClosestFacilityTask("http://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

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

         

            routeGraphicLayer.add(route);

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

          });

       

          //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 id="metac"><h3>Layers</h3>

  <br>

  <form >

  <input type="radio" id="radCurrent" name="rbPoints" value="" checked>Current (Squares)<br>

  <input type="radio" id="radNew" name="rbPoints" value="">New (Circles)<br>

 

  </form>

  </div>

    

    </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>

 

 

    </div>

</div>

</body>

</html>

 

 

 

Route.png

Outcomes