Lawrencemuh

Javascript for Network analysis - stuck

Discussion created by Lawrencemuh on Feb 8, 2013
  • Comment • 0
Trying to get the script to work from the Network Analysis Closest facility sample -  changed all the parameters and the map show up but the network won't work.


<!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">
  <!--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>PGC FIRE / EMS Closest Facilities</title>

  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/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>var dojoConfig = { parseOnLoad:true };</script>
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
  <script>
    dojo.require("esri.map"); 
    dojo.require("esri.tasks.closestfacility");
    dojo.require("dijit.dijit");
    dojo.require("dijit.form.ComboBox");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("esri.arcgis.utils");
   
    var mapDiv, incidentsGraphicsLayer, routeGraphicLayer;
    var closestFacilityTask, params;

    function init(){
      var webmapid = "cc7deb6b61be40bb99bd74957afb4f28";
      esri.arcgis.utils.createMap(webmapid, "mapDiv").then(function(response){
        map = response.map;
      });

      dojo.connect(mapDiv, "onClick", mapClickHandler);
     
      params = new esri.tasks.ClosestFacilityParameters();
      params.defaultCutoff= 3.0;
      params.returnIncidents=false;
      params.returnRoutes=true;
      params.returnDirections=true;
     
      dojo.connect(mapDiv, "onLoad", function(mapDiv) {
        var facilityPointSymbol = new esri.symbol.SimpleMarkerSymbol(
          esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,
          10,
          new esri.symbol.SimpleLineSymbol(
            esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([89,95,35]), 2
          ),
          new dojo.Color([130,159,83,0.40])
        );

        var incidentPointSymbol = new esri.symbol.SimpleMarkerSymbol(
          esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,
          16,
          new esri.symbol.SimpleLineSymbol(
            esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([89,95,35]), 2
          ),
          new dojo.Color([130,159,83,0.40])
        ); 

        incidentsGraphicsLayer = new esri.layers.GraphicsLayer();
       
        var incidentsRenderer = new esri.renderer.SimpleRenderer(incidentPointSymbol);
        incidentsGraphicsLayer.setRenderer(incidentsRenderer);
        map.addLayer(incidentsGraphicsLayer);

        routeGraphicLayer = new esri.layers.GraphicsLayer();
       
        var routePolylineSymbol = new esri.symbol.SimpleLineSymbol(
          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
          new dojo.Color([89,95,35]),
          4.0
        );
        var routeRenderer = new esri.renderer.SimpleRenderer(routePolylineSymbol);
        routeGraphicLayer.setRenderer(routeRenderer);

        map.addLayer(routeGraphicLayer);

        var facilitiesGraphicsLayer = new esri.layers.GraphicsLayer();
        var facilityRenderer = new esri.renderer.SimpleRenderer(facilityPointSymbol);
        facilitiesGraphicsLayer.setRenderer(facilityRenderer);
      
        mapDiv.addLayer(facilitiesGraphicsLayer);
       
        facilitiesGraphicsLayer.add(new esri.Graphic(new esri.geometry.Point(-13625960,4549921,map.spatialReference)));
        facilitiesGraphicsLayer.add(new esri.Graphic(new esri.geometry.Point(-13626184,4549247,map.spatialReference)));
        facilitiesGraphicsLayer.add(new esri.Graphic(new esri.geometry.Point(-13626477,4549415,map.spatialReference)));
        facilitiesGraphicsLayer.add(new esri.Graphic(new esri.geometry.Point(-13625385,4549659,map.spatialReference)));
        facilitiesGraphicsLayer.add(new esri.Graphic(new esri.geometry.Point(-13624374,4548254,map.spatialReference)));
        facilitiesGraphicsLayer.add(new esri.Graphic(new esri.geometry.Point(-13624891,4548565,map.spatialReference)));
  
        var facilities = new esri.tasks.FeatureSet();
        facilities.features = facilitiesGraphicsLayer.graphics;
       
        params.facilities = facilities;
        params.outSpatialReference = map.spatialReference;
      
      });
      closestFacilityTask = new esri.tasks.ClosestFacilityTask("http://192.168.1.74:6080/arcgis/rest/services/Firemapapp/NAServer/Closest Facility");
    }
    function clearGraphics() {
      //clear graphics
      dojo.byId("directionsDiv").innerHTML= "";
      map.graphics.clear();
      routeGraphicLayer.clear();
      incidentsGraphicsLayer.clear();   
    }

    function mapClickHandler(evt) {
      clearGraphics();
      dojo.byId("directionsDiv").innerHTML= "";
      var inPoint = new esri.geometry.Point(evt.mapPoint.x,evt.mapPoint.y,map.spatialReference);
      var location = new esri.Graphic(inPoint);
      incidentsGraphicsLayer.add(location);
     
      var features = [];
      features.push(location);
      var incidents = new esri.tasks.FeatureSet();
      incidents.features = features;
      params.incidents = incidents;
     
      map.graphics.enableMouseEvents();
    
      dojo.connect(routeGraphicLayer,"onMouseOver", function(evt){
        //clear existing directions and highlight symbol
        mapDIV.graphics.clear();
       
        dojo.byId("directionsDiv").innerHTML= "Hover over the route to view directions";
       
        var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,255],0.25), 4.5);
        var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
       
        mapDiv.graphics.add(highlightGraphic);
        dojo.byId("directionsDiv").innerHTML = esri.substitute(evt.graphic.attributes,"${*}");

      });

      //solve
      closestFacilityTask.solve(params,function(solveResult){
        var directions = solveResult.directions;
        dojo.forEach(solveResult.routes, function(route, index){
          //build an array of route info
          var attr = dojo.map(solveResult.directions[index].features,function(feature){
            return feature.attributes.text;
          });
          var infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
         
          route.setInfoTemplate(infoTemplate);
          route.setAttributes(attr);
         
          routeGraphicLayer.add(route);
          dojo.byId("directionsDiv").innerHTML = "Hover over the route to view directions";
        });
       
        //display any messages
        if(solveResult.messages.length > 0){
          dojo.byId("directionsDiv").innerHTML = "<b>Error:</b> " + solveResult.messages[0];
        }     
      });
    }         

    dojo.ready(init);
  </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="mapDiv"
         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="params.defaultTargetFacilityCount=this.value;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>

Outcomes