Select layer to use for Closest Facility Route

CraigLinn — Fri, 14 Nov 2014 17:05:44 GMT

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>

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

on iOS devices-->

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

}

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

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>

<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 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> closest facilities to the input point.</b>

</div>

</body>

</html>

topic Select layer to use for Closest Facility Route in ArcGIS JavaScript Maps SDK Questions

Select layer to use for Closest Facility Route

Re: Select layer to use for Closest Facility Route

Re: Select layer to use for Closest Facility Route