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>
Solved! Go to Solution.
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");
}
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");
}