topic Re: Help me about Closet Facilities in ArcGIS JavaScript Maps SDK Questions

Help me about Closet Facilities

PhuongNguyen_Thanh — Sat, 11 Dec 2021 19:34:59 GMT

Hi everybody,

I'm doing this example https://developers.arcgis.com/en/javascript/jssamples/routetask_closest_facility.html
but I have a problem about the facilities creation.

                facilitiesGraphicsLayer.add(new Graphic(new Point(-13626477, 4549415, map.spatialReference)));
                facilitiesGraphicsLayer.add(new Graphic(new Point(-13625385, 4549659, map.spatialReference)));
                facilitiesGraphicsLayer.add(new Graphic(new Point(-13624374, 4548254, map.spatialReference)));
                facilitiesGraphicsLayer.add(new Graphic(new Point(-13624891, 4548599, map.spatialReference)))

The problem is whenever I create a map with a new different location (like Alabama, New York state...) I have to create a new facilities Point for that map. So can anybody can help me about creating automatically the facilities Point and routes when I make a new different location map and click on it ?

Thank you for your reading time about my topic ! Best wishes for you. :rolleyes:

Re: Help me about Closet Facilities

Anonymous User — Fri, 04 Oct 2013 14:48:18 GMT

This worked for me:

facilitiesFeatureLayer = new FeatureLayer("http://YourServerURL/arcgis/rest/services/MapServices/YourMapService/MapServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
opacity: 0.0
});

.....

params = new ClosestFacilityParameters();
params.defaultCutoff= 500.0;
params.returnIncidents=false;
params.returnRoutes=true;
params.returnDirections=true;
params.returnFacilities=true;

....

var facilities = new FeatureSet();
facilities.features = facilitiesFeatureLayer.graphics;
params.facilities = facilities;
params.outSpatialReference = map.spatialReference;

Let me know if you need to see additional code.

Hope that helps.

Russell

Re: Help me about Closet Facilities

PhuongNguyen_Thanh — Fri, 04 Oct 2013 15:32:24 GMT

This worked for me:

facilitiesFeatureLayer = new FeatureLayer("http://YourServerURL/arcgis/rest/services/MapServices/YourMapService/MapServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
opacity: 0.0
});

.....

params = new ClosestFacilityParameters();
params.defaultCutoff= 500.0;
params.returnIncidents=false;
params.returnRoutes=true;
params.returnDirections=true;
params.returnFacilities=true;

....

var facilities = new FeatureSet();
facilities.features = facilitiesFeatureLayer.graphics;
params.facilities = facilities;
params.outSpatialReference = map.spatialReference;

Let me know if you need to see additional code.

Hope that helps.

Russell

Thank you, Russell !

I'm still stuck 😞 can i see your code ? you can inbox me 🙂

Phuong Nguyen

Re: Help me about Closet Facilities

PhuongNguyen_Thanh — Sat, 11 Dec 2021 19:35:01 GMT

Here's my code !! But it shows nothing on map 😞 can you help me to fix it 😞 many thanks to you

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <!--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.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/layout/resources/FloatingPane.css">
  <style> 
    body,html,#main{margin:0;padding:0;height:100%;width:100%;}
    .panel {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0px 6px 3px -3px #888;
    -webkit-box-shadow: 0px 6px 3px -3px #888;
    box-shadow: 0px 6px 3px -3px #888;
    border: 2px solid #86942A;
    margin: 5px;5px;5px;5px;
  }
  </style> 

  <script src="http://js.arcgis.com/3.7/"></script>
  <script>
      require(["dojo/dom",
            "dojo/_base/array",
            "dojo/_base/Color",
            "dojo/parser",

            "esri/map",
            "esri/lang",
            "esri/graphic",
            "esri/InfoTemplate",
            "esri/layers/GraphicsLayer",
            "esri/renderers/SimpleRenderer",
            "esri/geometry/Point",
            "esri/layers/FeatureLayer",
            "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, Map, esriLang, Graphic, InfoTemplate, GraphicsLayer, SimpleRenderer, Point, FeatureLayer, FeatureSet,
                 ClosestFacilityTask, ClosestFacilityParameters, SimpleMarkerSymbol, SimpleLineSymbol) {

            var map, incidentsGraphicsLayer, routeGraphicLayer, closestFacilityTask, params, facilitiesFeatureLayer;

            parser.parse();
            facilitiesFeatureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/MapServer/0", {
                mode: FeatureLayer.MODE_SNAPSHOT,
                opacity: 0.0
            });
            map = new Map("map", {
                basemap: "streets",
                center: [-86.18, 32.22],
                zoom: 14,
                showInfoWindowOnClick: false
            });

            map.on("click", mapClickHandler);

            params = new ClosestFacilityParameters();
            params.defaultCutoff = 12.0;
            params.returnIncidents = false;
            params.returnRoutes = true;
            params.returnDirections = true;
            params.returnFacilities = 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_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 facilityRenderer = new SimpleRenderer(facilityPointSymbol);
                facilitiesFeatureLayer.setRenderer(facilityRenderer);

                var facilities = new FeatureSet();
                facilities.features = facilitiesFeatureLayer.graphics;
                params.facilities = facilities;
                params.outSpatialReference = map.spatialReference;

                map.addLayer(facilitiesFeatureLayer);
            });
            closestFacilityTask = new ClosestFacilityTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Closest Facility");

            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) {
                    var directions = solveResult.directions;
                    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];
                    }
                });
            }
            //export objects required for interaction
            app = {
                params: params,
                map: map,
                clearGraphics: clearGraphics
            };
        });
  </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 name="numLocations" data-dojo-type="dijit.form.ComboBox" value="1" onChange="app.params.defaultTargetFacilityCount=this.value;app.clearGraphics();" 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>