Hi all,
I used thr arcgis api help to create a Closest Facility script.
Find closest facilities | ArcGIS API for JavaScript 3.25
I copied almost the entire code, just changed the facilities and the spatial reference.
I uploaded my network analysis service to my server and it does not work.
Nothing i do make it works. I tried to check if the code from the help section works without my changes but apparently i cant connect the service from my PC, but it does work from the link
https://developers.arcgis.com/javascript/3/samples/routetask_closest_facility/
the log in the script is me trying to see where it went wrong, it seems like the
routeGraphicLayer.on("mouse-over", function(evt){
console.log("ok4.3");
map.graphics.clear();
dom.byId("directionsDiv").innerHTML= "Hover over the route to view directions";
console.log("ok4.5");
var highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,255],0.25), 4.5);
var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
console.log("ok5");
map.graphics.add(highlightGraphic);
dom.byId("directionsDiv").innerHTML = esriLang.substitute(evt.graphic.attributes,"${*}");
console.log("ok6");
});
and the
closestFacilityTask.solve(params, function(solveResult){
console.log("ok7");
array.forEach(solveResult.routes, function(route, index){
var attr = array.map(solveResult.directions[index].features, function(feature){
return feature.attributes.text;
});
var infoTemplate = new InfoTemplate("Attributes", "${*}");
console.log("ok");
route.setInfoTemplate(infoTemplate);
route.setAttributes(attr);
routeGraphicLayer.add(route);
dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions";
});
console.log("ok??");
if(solveResult.messages.length > 0){
dom.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0];
}
});
does not work at all.
can someone maybe point me for what i`m doing wrong?
thanx
<!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.25/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.25/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.25/"></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/SpatialReference",
"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, SpatialReference, 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: [35.019666588, 32.773163574],
zoom: 15,
showInfoWindowOnClick: false
});
map.spatialReference = new SpatialReference({wkid:2039});
console.log(map.spatialReference);
map.on("click", mapClickHandler);
params = new ClosestFacilityParameters();
params.impedenceAttribute= "Length";
params.defaultCutoff= 7.0;
params.returnIncidents=false;
params.returnRoutes=true;
params.returnDirections=false;
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 facilitiesGraphicsLayer = new GraphicsLayer();
var facilityRenderer = new SimpleRenderer(facilityPointSymbol);
facilitiesGraphicsLayer.setRenderer(facilityRenderer);
map.addLayer(facilitiesGraphicsLayer);
facilitiesGraphicsLayer.add(new Graphic(new Point(3898452.00060809,3866259.95676958,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3898265.94287582,3865871.18883343,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3898503.83466325,3865604.65310533,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3898875.14529586,3865745.2226377,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3899318.62932033,3865316.43084768,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3899233.56541492,3865337.13371146,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3897905.10544874,3865821.03375048,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3897867.58019902,3865713.1500249,map.spatialReference)));
facilitiesGraphicsLayer.add(new Graphic(new Point(3897867.58019902,3865713.1500249,map.spatialReference)));
console.log("ok1");
var facilities = new FeatureSet();
facilities.features = facilitiesGraphicsLayer.graphics;
params.facilities = facilities;
params.outSpatialReference = map.spatialReference;
map.on("mouse-move", showCoordinates);
map.on("mouse-drag", showCoordinates);
});
closestFacilityTask = new ClosestFacilityTask("https://132.68.130.156:6443/arcgis/rest/services/Network/bottle/NAServer/Closest_Facility");
console.log("ok2");
console.log(closestFacilityTask);
registry.byId("numLocations").on("change", function() {
params.defaultTargetFacilityCount = this.value;
clearGraphics();
});
function showCoordinates(evt) {
dom.byId("info").innerHTML = evt.mapPoint.x + ", " + evt.mapPoint.y;
}
function clearGraphics() {
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);
console.log(inPoint.x, " ", inPoint.y);
var features = [];
features.push(location);
var incidents = new FeatureSet();
incidents.features = features;
params.incidents = incidents;
console.log("ok4");
map.graphics.enableMouseEvents();
console.log("ok4.2");
routeGraphicLayer.on("mouse-over", function(evt){
console.log("ok4.3");
map.graphics.clear();
dom.byId("directionsDiv").innerHTML= "Hover over the route to view directions";
console.log("ok4.5");
var highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0,255,255],0.25), 4.5);
var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
console.log("ok5");
map.graphics.add(highlightGraphic);
dom.byId("directionsDiv").innerHTML = esriLang.substitute(evt.graphic.attributes,"${*}");
console.log("ok6");
});
console.log("ok7.1");
console.log(params);
closestFacilityTask.solve(params, function(solveResult){
console.log("ok7");
array.forEach(solveResult.routes, function(route, index){
var attr = array.map(solveResult.directions[index].features, function(feature){
return feature.attributes.text;
});
var infoTemplate = new InfoTemplate("Attributes", "${*}");
console.log("ok");
route.setInfoTemplate(infoTemplate);
route.setAttributes(attr);
routeGraphicLayer.add(route);
dom.byId("directionsDiv").innerHTML = "Hover over the route to view directions";
});
console.log("ok??");
if(solveResult.messages.length > 0){
dom.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0];
}
});
console.log("not good");
}
});
</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 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>
<span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span>
</div>
</div>
</body>
</html>