topic Re: closestFacilityTask from a csv in ArcGIS JavaScript Maps SDK Questions

closestFacilityTask from a csv

JimColl — Thu, 07 Jul 2016 14:56:29 GMT

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>

<title>Closest Facilities</title>

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

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>

<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> closest shelters to your location.</b>

</div>

</body>

</html>

Re: closestFacilityTask from a csv

JimColl — Tue, 12 Jul 2016 21:08:44 GMT

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

}