2

I need to add a widget in Configurable Map Viewer (CMV), which will return me the nearest facility of parcel number entered in the box. Which is to be done by Network Analyst in ArcMap and i have created that layer.Here is the code, which actually return me the nearest facility when i click a point any where. I need to do this in a widget of CMV. Please help me regarding how can i create a widget for network analyst.

<!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.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/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.15/"></script>
  <script>
    var map, params;



    require([
      "dojo/dom",
      "dojo/_base/array",
      "esri/Color",
      "dojo/parser",
      "dojo/number",   //calculating distance
      "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/geometry",            //calculating geometry



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



      map = new Map("map", { 
        basemap: "satellite", 
        center: [73.147884,33.534415],
        zoom: 14, 
        showInfoWindowOnClick: false 
      });

      map.on("click", mapClickHandler);

     /* 
      //getting geometry.
      geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      dojo.connect(geometryService, "onLengthsComplete", outputDistance);
      */
      params = new ClosestFacilityParameters();
      params.impedenceAttribute= "Miles";      
      params.defaultCutoff= 10000;      
      params.returnIncidents=true;
      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_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(8142548.8067,3966078.9112,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(8143221.8677,3965679.8092,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(8142586.1548,3965339.1853,map.spatialReference)));
        facilitiesGraphicsLayer.add(new Graphic(new Point(8143196.4393,3966040.7799,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(8143734.6762,3965471.3665,map.spatialReference))); 
        facilitiesGraphicsLayer.add(new Graphic(new Point(8143961.4138,3965903.508,map.spatialReference))); 



        var facilities = new FeatureSet();
        facilities.features = facilitiesGraphicsLayer.graphics;

        params.facilities = facilities;
        params.outSpatialReference = map.spatialReference;

      });

      closestFacilityTask = new ClosestFacilityTask("http://10.1.250.33/arcgis/rest/services/demos/WebMercNoFacDHA/NAServer/Closest%20Facility");

      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);
           // alert(route.length());
            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];
          }      
        },function(e){
            alert('assa');
        });
      }
    });

    //docuemnt.getElementById('testing').innerHTML="Test";
  </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>

    </div>
 </div>


 <p id="testing"></p>
<script>

document.getElementById('testing').innerHTML="Test";
</script> 

 <span id="distance"></span>

</body>




</html>
  • You should probably get familiar with the structure of the cmv-app and how the widgets are constructed. Looking through the CMV code and docs is helpful. Also check out the ArcGIS Javascript Widget Tutorial which is a good primer on how to create your own re-usable widget. – its30 Jan 4 '16 at 15:38
1

CMV has support for geoprocessing widgets. You can use the following sample as guideline: https://github.com/tmcgee/cmv-widgets#geoprocessor

This example fires an geoprocessing service at a click on the map.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.