topic Re: How custom radius circle areas can be added as avoided areas? in ArcGIS JavaScript Maps SDK Questions

How custom radius circle areas can be added as avoided areas?

Pedro_LuizCumino — Sat, 11 Dec 2021 23:59:21 GMT

I need to add circles as avoid areas centred in a specific position. Instead of a point, an area must be set as a barrier.

The function I'm using is addBarrier( ) as shown below:

function addBarrier() {
  var eventsArray = [];
  routeParams.barriers = new esri.tasks.FeatureSet();


  for (var i = 0; i < sensors.length; i++) {
  var aircondition = JSON.stringify(sensors.contextElement.attributes[0].value);
  aircondition = aircondition.toString(aircondition);
  aircondition = getNumber(aircondition);


  if(aircondition >= idealCondition){
  var position = JSON.stringify(sensors.contextElement.attributes[1].value);
  position = position.replace('"', '');
  position = position.replace('"', '');
  var posArray = position.split(',');
  var pnt = new esri.geometry.Point(posArray[1],posArray[0],new esri.SpatialReference(6864));


  routeParams.barriers.features.push(map.graphics.add(new esri.Graphic(esri.geometry.geographicToWebMercator(pnt), barrierSymbol)));
  }
  }
}

The addBarrier() function uses the location of the objects called sensor.

So instead of a simple symbol STYLE_CROSS to represent a barrier, a circle with a custom radius must be used.

The circles need to be centred the same way the barriers is being placed, using the parameter position of the sensor object.

The radius of each circle is defined inside each sensor.

This is the JSON representation of a sensor:

{
  "contextElement": {
    "type": "StreetFixed",
    "isPattern": "false",
    "id": "StreetFixed1",
    "attributes": [
      {
        "name": "aircondition",
        "type": "float",
        "value": "70"
      },
      {
        "name": "position",
        "type": "geo:point",
        "value": "-1.4521450790947026, -48.48221014022732"
      },
      {
        "name": "temperature",
        "type": "float",
        "value": "29"
      }
    ]
  },
  "statusCode": {
    "code": "200",
    "reasonPhrase": "OK"
  }
}

Here is the full code:

var sensors = getSensors();
var idealCondition = 0;


dojo.require("esri.map");
dojo.require("esri.urlUtils");
dojo.require("esri.geometry.Circle");
dojo.require("esri.tasks.route");
dojo.require("esri.toolbars.draw");
dojo.require("esri.arcgis.OAuthInfo");


var map;
var urlUtils;
var Circle, routeTask, routeParams, routes = [];
var drawToolbar;
var stopSymbol, barrierSymbol, polygonBarrierSymbol, routeSymbols;
var mapOnClick_addStops_connect;
var mapOnClick_addBarriers_connect;
var Point, SpatialReference;
var Polygon;


$(document).ready(function(){
  idealCondition = 0;


  $('input#airqualityslider').slider({
  formatter: function(value) {
  idealCondition = value;
  $("div#airqualityslider").html(value);
  return 'Air pollution filter: ' + value;
  }
  }).on('slideStop', function(evt){
  clearBarriers();
  addBarriers();
  if(routeParams.stops.features.length >= 2)
  solveRoute();
  });


  dojo.ready(init);


  $("#map").click(function(){
  addStops();
  });


  $("#clearStopsBtn").click(function(){
  clearStops();
  });


  $("#clearRoutesBtn").click(function(){
  clearRoutes();
  });


  $("#clearPolygons").click(function(){
  clearPolygonBarriers();
  });
});


function init() {
  map = new esri.Map("map", {
  basemap: "streets",
  // basemap: "topo-vector",
  center: [-48.47, -1.436],
  zoom: 13
  });


  function createToolBar() {
  drawToolbar = new esri.toolbars.Draw(map);
  drawToolbar.on("draw-end", addToMap);
  }


  function activateTool() {
  drawToolbar.activate(esri.toolbars.Draw.CIRCLE);
  }


  function addToMap(evt) {
  drawToolbar.markerSymbol.size = (Math.random() * (20 - 10) + 10);
  drawToolbar.deactivate();
  routeParams.polygonBarriers.features.push(
  map.graphics.add(new esri.Graphic(evt.geometry, polygonBarrierSymbol)));
  solveRoute();
  }
  map.on("load", createToolBar);
  var node = dojo.byId("addPolygons");
  dojo.connect(node, "click", activateTool);




  routeTask = new esri.tasks.RouteTask("https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");
  routeParams = new esri.tasks.RouteParameters();
  routeParams.stops = new esri.tasks.FeatureSet();
  routeParams.barriers = new esri.tasks.FeatureSet();
  routeParams.polygonBarriers = new esri.tasks.FeatureSet();
  routeParams.outSpatialReference = {"wkid":102100};




  dojo.connect(routeTask, "onSolveComplete", showRoute);
  dojo.connect(routeTask, "onError", errorHandler);


  stopSymbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
  stopSymbol.outline.setWidth(5);


  barrierSymbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
  barrierSymbol.outline.setWidth(3).setColor(new dojo.Color([255,0,0]));


  var polygonBarrierSymbol = new esri.symbol.SimpleFillSymbol();


  routeSymbols = {
  "Route 1": new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(5),
  "Route 2": new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,255,0,0.5])).setWidth(5),
  "Route 3": new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([255,0,255,0.5])).setWidth(5)
  };
}


function addStops() {
  removeEventHandlers();
  mapOnClick_addStops_connect = dojo.connect(map, "onClick", addStop);
}


function addStop(evt) {
// routeParams.stops.features.push(map.graphics.add(new esri.Graphic(evt.mapPoint,stopSymbol,{ RouteName:dojo.byId("routeName").value })));
routeParams.stops.features.push(map.graphics.add(new esri.Graphic(evt.mapPoint,stopSymbol,{ RouteName:"Route 1" })));
if(routeParams.stops.features.length >= 1)
  solveRoute();
addStops();
}


function clearStops() {
  removeEventHandlers();
  for (var i = routeParams.stops.features.length-1; i >= 0; i--) {
  map.graphics.remove(routeParams.stops.features.splice(i, 1)[0]);
  }
  clearRoutes();
  addStops();
}


function clearPolygonBarriers() {
  removeEventHandlers();
  for (var i=routeParams.polygonBarriers.features.length-1; i>=0; i--) {
  map.graphics.remove(routeParams.polygonBarriers.features.splice(i, 1)[0]);
  }
  solveRoute();
}


function addPolygonBarrier(evt) {
  drawToolbar.activate(esri.toolbars.Draw.CIRCLE);
  var drawEnd_connect = dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
  routeParams.polygonBarriers.features.push(
  map.graphics.add(new esri.Graphic(geometry, polygonBarrierSymbol))
  );
  });
}


function addBarriers(){
  removeEventHandlers();
  addBarrier();
}


function addBarrier() {
  var eventsArray = [];
  routeParams.barriers = new esri.tasks.FeatureSet();


  for (var i = 0; i < sensors.length; i++) {
  var aircondition = JSON.stringify(sensors.contextElement.attributes[0].value);
  aircondition = aircondition.toString(aircondition);
  aircondition = getNumber(aircondition);


  if(aircondition >= idealCondition){
  var position = JSON.stringify(sensors.contextElement.attributes[1].value);
  position = position.replace('"', '');
  position = position.replace('"', '');
  var posArray = position.split(',');
  var pnt = new esri.geometry.Point(posArray[1],posArray[0],new esri.SpatialReference(6864));


  routeParams.barriers.features.push(map.graphics.add(new esri.Graphic(esri.geometry.geographicToWebMercator(pnt), barrierSymbol)));
  }
  }
}


function clearBarriers() {
  removeEventHandlers();
  for (var i = routeParams.barriers.features.length - 1; i >= 0; i--) {
  map.graphics.remove(routeParams.barriers.features.splice(i, 1)[0]);
  }
  addStops();
}


function removeEventHandlers() {
  dojo.disconnect(mapOnClick_addStops_connect);
  dojo.disconnect(mapOnClick_addBarriers_connect);
}


function solveRoute() {
  clearBarriers();
  addBarriers();
  removeEventHandlers();
  if(routeParams.stops.features.length > 1){
  $("#map-loading").html("Solving route "+"<img src='/images/loading.gif'>");
  $("#map-loading").show();
  routeTask.solve(routeParams, function(){
  $("#map-loading").hide();
  });
  }
}


function clearRoutes() {
  for (var i=routes.length-1; i>=0; i--) {
  map.graphics.remove(routes.splice(i, 1)[0]);
  }
  routes = [];
  addStops();
}


function showRoute(solveResult) {
  clearRoutes();


  dojo.forEach(solveResult.routeResults, function(routeResult, i) {
  routes.push(
  map.graphics.add(
  routeResult.route.setSymbol(routeSymbols[routeResult.routeName])
  )
  );
  });


  var msgs = ["Server messages:"];
  dojo.forEach(solveResult.messages, function(message) {
  msgs.push(message.type + " : " + message.description);
  });
  if (msgs.length > 1) {
  alert(msgs.join("\n - "));
  }
}


function errorHandler(err) {
  // alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
  console.log(err);
}


function getSensors() {
  var result = "";
  var request = new XMLHttpRequest();


  if(localStorage.getItem('sensors') == null){
  // `false` makes the request synchronous
  request.open('GET', '../getSensors', false);
  request.send(null);


  if (request.status === 200) {
  result = JSON.parse(request.responseText).contextResponses;
  console.log("getSensors done! "+result.length+" sensors loaded.");
  localStorage.setItem("sensors", JSON.stringify(result));
  }
  else
  alert("Unknown error!");


  }
  else
  result = JSON.parse(localStorage.getItem('sensors'));


  return result;
}

Thanks in advance.

Re: How custom radius circle areas can be added as avoided areas?

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:59:24 GMT

Pedro,

I see you are still using legacy coding style (not good). Here is how you would use polygon barriers and use AMD style coding:

<!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>Multiple Routes</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
        var map;
        var sensors = getSensors();
        var sensorIndex = 0;
        require([
            "esri/urlUtils",
            "esri/config",
            "esri/map",
            "esri/geometry/webMercatorUtils",
            "esri/graphic",
            "esri/SpatialReference",
            "esri/geometry/Point",
            "esri/geometry/Circle",
            "esri/tasks/RouteTask",
            "esri/tasks/RouteParameters",
            "esri/tasks/FeatureSet",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/Color",
            "dojo/_base/array",
            "dojo/on",
            "dojo/dom",
            "dijit/registry",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dijit/form/HorizontalSlider",
            "dijit/form/HorizontalRuleLabels",
            "dojo/domReady!"
        ], function(
            urlUtils,
            esriConfig,
            Map,
            webMercatorUtils,
            Graphic,
            SpatialReference,
            Point,
            Circle,
            RouteTask,
            RouteParameters,
            FeatureSet,
            SimpleMarkerSymbol,
            SimpleLineSymbol,
            SimpleFillSymbol,
            Color,
            array,
            on,
            dom,
            registry,
            BorderContainer,
            ContentPane,
            HorizontalSlider,
            HorizontalRuleLabels
        ) {
            var map, routeTask, routeParams, routes = [];
            var stopSymbol, barrierSymbol, routeSymbols;
            var mapOnClick_addStops_connect, mapOnClick_addBarriers_connect;

            var x = -48.48;
            var y = -1.45;
            map = new Map("map", {
                basemap: "streets",
                center: [x, y],
                zoom: 15
            });
            routeTask = new RouteTask("https://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World");

            routeParams = new RouteParameters();
            routeParams.stops = new FeatureSet();
            routeParams.polygonBarriers = new FeatureSet();
            routeParams.outSpatialReference = {
                "wkid": 102100
            };

            routeTask.on("solve-complete", showRoute);
            routeTask.on("error", errorHandler);

            stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
            stopSymbol.outline.setWidth(3);

            barrierSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_X).setSize(10);
            barrierSymbol.outline.setWidth(3).setColor(new Color([255, 0, 0]));

            barrierSymbol2 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
              new Color([255,0,0]), 2),new Color([255,0,0,0.25]));

            routeSymbols = {
                "Route 1": new SimpleLineSymbol().setColor(new Color([0, 0, 255, 0.5])).setWidth(5),
                "Route 2": new SimpleLineSymbol().setColor(new Color([0, 255, 0, 0.5])).setWidth(5),
                "Route 3": new SimpleLineSymbol().setColor(new Color([255, 0, 255, 0.5])).setWidth(5)
            };

            //button click event listeners can't be added directly in HTML when the code is wrapped in an AMD callback
            on(dom.byId("addStopsBtn"), "click", addStops);
            on(dom.byId("clearStopsBtn"), "click", clearStops);
            on(dom.byId("addBarriersBtn"), "click", addBarriers);
            on(dom.byId("clearBarriersBtn"), "click", clearBarriers);
            on(dom.byId("solveRoutesBtn"), "click", solveRoute);
            on(dom.byId("clearRoutesBtn"), "click", clearRoutes);

            function addBarriers() {
                removeEventHandlers();
                addBarrier();
            }

            //Adds a barrier
            function addBarrier() {
                var idealCondition = 50;
                var eventsArray = [];
                for (var i = 0; i < sensors.length; i++) {
                  var sensorVal = sensors.contextElement;
                  var aircondition = parseFloat(sensorVal.attributes[0].value);


                  if(aircondition >= idealCondition){
                    var posArray = String(sensorVal.attributes[1].value).split(",");
                    var pnt = new Point(posArray[1], posArray[0], new SpatialReference(6864));
                    var mercPnt = webMercatorUtils.geographicToWebMercator(pnt);
                    var circleGeometry = new Circle(mercPnt, {"radius": aircondition});
                    console.info(circleGeometry);
                    routeParams.polygonBarriers.features.push(map.graphics.add(new Graphic(circleGeometry, barrierSymbol2)));
                  }
                }
            }

            //Begins listening for click events to add stops
            function addStops() {
                removeEventHandlers();
                mapOnClick_addStops_connect = map.on("click", addStop);
            }

            //Clears all stops
            function clearStops() {
                removeEventHandlers();
                for (var i = routeParams.stops.features.length - 1; i >= 0; i--) {
                    map.graphics.remove(routeParams.stops.features.splice(i, 1)[0]);
                }
            }

            //Adds a stop. The stop is associated with the route currently displayed in the dropdown
            function addStop(evt) {
                routeParams.stops.features.push(
                    map.graphics.add(
                        new esri.Graphic(
                            evt.mapPoint,
                            stopSymbol, {
                                RouteName: dom.byId("routeName").value
                            }
                        )
                    )
                );
            }

            //Clears all barriers
            function clearBarriers() {
                removeEventHandlers();
                for (var i = routeParams.polygonBarriers.features.length - 1; i >= 0; i--) {
                    map.graphics.remove(routeParams.polygonBarriers.features.splice(i, 1)[0]);
                }
            }

            //Stops listening for click events to add barriers and stops (if they've already been wired)
            function removeEventHandlers() {
                if (mapOnClick_addStops_connect) {
                    mapOnClick_addStops_connect.remove();
                }
                if (mapOnClick_addBarriers_connect) {
                    mapOnClick_addBarriers_connect.remove();
                }
            }

            //Solves the routes. Any errors will trigger the errorHandler function.
            function solveRoute() {
                removeEventHandlers();
                routeTask.solve(routeParams);
            }

            //Clears all routes
            function clearRoutes() {
                for (var i = routes.length - 1; i >= 0; i--) {
                    map.graphics.remove(routes.splice(i, 1)[0]);
                }
                routes = [];
            }

            //Draws the resulting routes on the map
            function showRoute(evt) {
                clearRoutes();
                array.forEach(evt.result.routeResults, function(routeResult, i) {
                    routes.push(
                        map.graphics.add(
                            routeResult.route.setSymbol(routeSymbols[routeResult.routeName])
                        )
                    );
                });

                var msgs = ["Server messages:"];
                array.forEach(evt.result.messages, function(message) {
                    msgs.push(message.type + " : " + message.description);
                });
                if (msgs.length > 1) {
                    alert(msgs.join("\n - "));
                }
            }

            //Reports any errors that occurred during the solve
            function errorHandler(err) {
                alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
            }
        });

        function getSensors() {
            var result = '{"contextResponses":[{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed1","attributes":[{"name":"aircondition","type":"float","value":"66.1"},{"name": "position", "type": "geo:point", "value": "-1.4521450790947026, -48.48221014022732"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}},{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed2","attributes":[{"name":"aircondition","type":"float","value":"90.1"},{"name": "position", "type": "geo:point", "value": "-1.4519062, -48.476207"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}},{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed3","attributes":[{"name":"aircondition","type":"float","value":"50.1"},{"name": "position", "type": "geo:point", "value": "-1.4518047, -48.4744374"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}},{"contextElement":{"type":"StreetFixed","isPattern":"false","id":"StreetFixed4","attributes":[{"name":"aircondition","type":"float","value":"66.1"},{"name": "position", "type": "geo:point", "value": "-1.4517104, -48.4726244"},{"name":"temperature","type":"float","value":"29.8"}]},"statusCode":{"code":"200","reasonPhrase":"OK"}}]}';
            // var request = new XMLHttpRequest();
            // request.open('GET', '/getSensors', false); // `false` makes the request synchronous
            // request.send(null);
            //
            // if (request.status === 200) {
            //     result = JSON.parse(request.responseText).contextResponses;
            //     // console.log(result);
            //     console.log("getSensors done!");
            // }
            return JSON.parse(result).contextResponses;
        }

        function eventFire(el, etype) {
            if (el.fireEvent) {
                el.fireEvent('on' + etype);
            } else {
                var evObj = document.createEvent('Events');
                evObj.initEvent(etype, true, false);
                el.dispatchEvent(evObj);
            }
        }
    </script>
</head>
<body class="claro">
    Select route name:
    <select id="routeName">
        <option value="Route 1">Route 1</option>
        <option value="Route 2">Route 2</option>
        <option value="Route 3">Route 3</option>
    </select> to
    <button id="addStopsBtn">Add Stops</button>
    <button id="clearStopsBtn">Clear Stops</button>
    <button id="addBarriersBtn">Add Barriers</button>
    <button id="clearBarriersBtn">Clear Barriers</button>
    <button id="solveRoutesBtn">Solve Routes</button>
    <button id="clearRoutesBtn">Clear Routes</button>
    <br />
    <br />
    <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
    <ol>
        <li>Select a route name from the drop down.</li>
        <li>Click 'Add stops', then click on map to add stops to route.</li>
        <li>Click the 'Add Barriers', then click on map to add barriers.</li>
        <li>Optionally, repeat the above steps to add more routes.</li>
        <li>Click the 'Solve Routes' to solve.</li>
        </ul>
        <p>Any server error messages will be displayed in an alert box.</p>
</body>

</html>

Re: How custom radius circle areas can be added as avoided areas?

Pedro_LuizCumino — Thu, 11 Aug 2016 14:12:18 GMT

However, this error always happens in the first attempt to solve the route. The steps that ends in error are:

1- Add Barrier

2- Add Stops

3- Solve Routes

For this case, this solution is not working, giving the error below.

init.js:113 TypeError: Cannot read property 'join' of undefined(…) "TypeError: Cannot read property 'join' of undefined

at errorHandler (http://localhost:8080/pollutionarea.html:236:78)

at .<anonymous> (https://js.arcgis.com/3.17/init.js:644:365)

at c [as onError] (https://js.arcgis.com/3.17/init.js:119:79)

at _errorHandler (https://js.arcgis.com/3.17/init.js:1969:40)

at https://js.arcgis.com/3.17/init.js:63:209

at error (http://js.arcgis.com/3.17/esri/tasks/RouteTask.js:8:489)

at https://js.arcgis.com/3.17/init.js:870:131

at c (https://js.arcgis.com/3.17/init.js:103:393)

at d (https://js.arcgis.com/3.17/init.js:103:182)

at reject.errback (https://js.arcgis.com/3.17/init.js:105:163)"m @ init.js:113(anonymous function) @ init.js:114filter @ init.js:71h @ init.js:114

Re: How custom radius circle areas can be added as avoided areas?

RobertScheitlin__GISP — Thu, 11 Aug 2016 14:30:53 GMT

Pedro,

If I use the http url (not https) for the route service url and setup my proxy portion then I do not get that error:

esriConfig.defaults.io.proxyUrl = "http://gislap183/Proxy/proxy.ashx"

esriConfig.defaults.io.alwaysUseProxy = false;