rpepato/routes.js

## routes.js
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Rotas Parametrizáveis</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <script src="http://js.arcgis.com/3.8/"></script>
    <style>
        .dijitButtonNode {
             width:150px;
        }
    </style>

    <script>
      var map, stopSymbol, routeTask, routeParams, stopsHandler, routeSymbol, route, toolbar, polygonBarrierSymbol;

      require([ "dojo/dom",
                "dojo/on",
                "dojo/parser",
                "esri/map",
                "dijit/form/Button",
                "esri/graphic",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/tasks/RouteTask",
                "esri/tasks/RouteParameters",
                "esri/tasks/FeatureSet",
                "esri/toolbars/draw",
                "dojo/domReady!"],
                function(   dom,
                            on,
                            parser,
                            Map,
                            Button,
                            Graphic,
                            SimpleMarkerSymbol,
                            SimpleLineSymbol,
                            SimpleFillSymbol,
                            RouteTask,
                            RouteParameters,
                            FeatureSet,
                            Draw
                            ) {

        map = new Map("map", {
          basemap: "streets",
          center: [-122.416, 37.802], // long, lat SP
          zoom: 15
        });

        parser.parse();

        routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(5);
        stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
        stopSymbol.outline.setWidth(3);

        polygonBarrierSymbol = new SimpleFillSymbol();

        routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");
        routeParams = new RouteParameters();
        routeParams.stops = new FeatureSet();
        routeParams.polygonBarriers = new FeatureSet();
        routeParams.outSpatialReference = {"wkid":102100}


        on(map, "load", function() {
            toolbar = new Draw(map);
            on(toolbar, "draw-end", addBarrierToMap);
        });

        on(routeTask, "SolveComplete", displayRoute);
        on(routeTask, "Error", routeError);

        on(dijit.byId("addStops"), "click", function() {
            stopsHandler = on(map, "click", addStop)
        });

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

        on(dijit.byId("addPolygons"), "click", function() {
            removeEventHandlers();
            toolbar.activate(Draw.POLYGON);
            map.hideZoomSlider();
        });

        on(dijit.byId("clearPolygons"), "click", function() {
            removeEventHandlers();
            for (var i=routeParams.polygonBarriers.features.length-1; i>=0; i--) {
                map.graphics.remove(routeParams.polygonBarriers.features.splice(i, 1)[0]);
            }
        });

        on(dijit.byId("solveRoute"), "click", function() {
            routeTask.solve(routeParams);
        });

        on(dijit.byId("clearRoute"), "click", function() {
            clearRoutes();
        });

        function addStop(evt) {
            routeParams.stops.features.push(
                map.graphics.add(
                    new Graphic(evt.mapPoint, stopSymbol)
                    )
            );
        }

        function addBarrierToMap(evt) {
            toolbar.deactivate();
            routeParams.polygonBarriers.features.push(
                map.graphics.add(new Graphic(evt.geometry, polygonBarrierSymbol))
            );
        }

        function displayRoute(solveResult) {
            clearRoutes();
            route = map.graphics.add(solveResult.routeResults[0].route.setSymbol(routeSymbol));
        }

        function clearRoutes() {
            map.graphics.remove(route);
            route = null;
        }

        function routeError(err) {
            alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
        }

        function removeEventHandlers(){
            stopsHandler.remove();
        }
    });
    </script>

  </head>
  <body class="claro">
    <div id="wrapper" style="width: 100%">
        <div id="map" style="height: 500px; float: left; width: 600px; border:1px solid #000"></div>
        <div id="right" style="height: 500px; margin-left: 600px; width:200px; border:1px solid #000">
            <button data-dojo-type="dijit/form/Button" type="button" id="addStops">Adicionar Paradas</button>
            <button data-dojo-type="dijit/form/Button" type="button" id="clearStops">Remover Paradas</button>
            <button data-dojo-type="dijit/form/Button" type="button" id="addPolygons">Adicionar Bloqueios</button>
            <button data-dojo-type="dijit/form/Button" type="button" id="clearPolygons">Remover Bloqueios</button>
            <button data-dojo-type="dijit/form/Button" type="button" id="solveRoute">Resolver Rota</button>
            <button data-dojo-type="dijit/form/Button" type="button" id="clearRoute">Limpar Rota</button>
        </div>
        <div id="actions" style="height: 200px; float: left; width: 400px; border:0px solid #000">
            <ol>
                <li>Clique em 'Adicionar Paradas'. Clique sobre pontos no mapa para indicar locais por onde a rota deve passar.</li>
                <li>Clique em 'Adicionar Barreiras'. Desenhe polígonos no mapa indicando bloqueios para a rota.</li>
                <li>Clique em 'Resolver Rota' para apresentar a rota.</li>
            </ol>
        </div>
    </div>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<!--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>Rotas Parametrizáveis</title>

	<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
	<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
	<script src="http://js.arcgis.com/3.8/"></script>
	<style>
	.dijitButtonNode {
	width:150px;
	}
	</style>

	<script>
	var map, stopSymbol, routeTask, routeParams, stopsHandler, routeSymbol, route, toolbar, polygonBarrierSymbol;

	require([ "dojo/dom",
	"dojo/on",
	"dojo/parser",
	"esri/map",
	"dijit/form/Button",
	"esri/graphic",
	"esri/symbols/SimpleMarkerSymbol",
	"esri/symbols/SimpleLineSymbol",
	"esri/symbols/SimpleFillSymbol",
	"esri/tasks/RouteTask",
	"esri/tasks/RouteParameters",
	"esri/tasks/FeatureSet",
	"esri/toolbars/draw",
	"dojo/domReady!"],
	function( dom,
	on,
	parser,
	Map,
	Button,
	Graphic,
	SimpleMarkerSymbol,
	SimpleLineSymbol,
	SimpleFillSymbol,
	RouteTask,
	RouteParameters,
	FeatureSet,
	Draw
	) {

	map = new Map("map", {
	basemap: "streets",
	center: [-122.416, 37.802], // long, lat SP
	zoom: 15
	});

	parser.parse();

	routeSymbol = new SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(5);
	stopSymbol = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_CROSS).setSize(15);
	stopSymbol.outline.setWidth(3);

	polygonBarrierSymbol = new SimpleFillSymbol();

	routeTask = new RouteTask("http://tasks.arcgisonline.com/ArcGIS/rest/services/NetworkAnalysis/ESRI_Route_NA/NAServer/Route");
	routeParams = new RouteParameters();
	routeParams.stops = new FeatureSet();
	routeParams.polygonBarriers = new FeatureSet();
	routeParams.outSpatialReference = {"wkid":102100}


	on(map, "load", function() {
	toolbar = new Draw(map);
	on(toolbar, "draw-end", addBarrierToMap);
	});

	on(routeTask, "SolveComplete", displayRoute);
	on(routeTask, "Error", routeError);

	on(dijit.byId("addStops"), "click", function() {
	stopsHandler = on(map, "click", addStop)
	});

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

	on(dijit.byId("addPolygons"), "click", function() {
	removeEventHandlers();
	toolbar.activate(Draw.POLYGON);
	map.hideZoomSlider();
	});

	on(dijit.byId("clearPolygons"), "click", function() {
	removeEventHandlers();
	for (var i=routeParams.polygonBarriers.features.length-1; i>=0; i--) {
	map.graphics.remove(routeParams.polygonBarriers.features.splice(i, 1)[0]);
	}
	});

	on(dijit.byId("solveRoute"), "click", function() {
	routeTask.solve(routeParams);
	});

	on(dijit.byId("clearRoute"), "click", function() {
	clearRoutes();
	});

	function addStop(evt) {
	routeParams.stops.features.push(
	map.graphics.add(
	new Graphic(evt.mapPoint, stopSymbol)
	)
	);
	}

	function addBarrierToMap(evt) {
	toolbar.deactivate();
	routeParams.polygonBarriers.features.push(
	map.graphics.add(new Graphic(evt.geometry, polygonBarrierSymbol))
	);
	}

	function displayRoute(solveResult) {
	clearRoutes();
	route = map.graphics.add(solveResult.routeResults[0].route.setSymbol(routeSymbol));
	}

	function clearRoutes() {
	map.graphics.remove(route);
	route = null;
	}

	function routeError(err) {
	alert("An error occured\n" + err.message + "\n" + err.details.join("\n"));
	}

	function removeEventHandlers(){
	stopsHandler.remove();
	}
	});
	</script>

	</head>
	<body class="claro">
	<div id="wrapper" style="width: 100%">
	<div id="map" style="height: 500px; float: left; width: 600px; border:1px solid #000"></div>
	<div id="right" style="height: 500px; margin-left: 600px; width:200px; border:1px solid #000">
	<button data-dojo-type="dijit/form/Button" type="button" id="addStops">Adicionar Paradas</button>
	<button data-dojo-type="dijit/form/Button" type="button" id="clearStops">Remover Paradas</button>
	<button data-dojo-type="dijit/form/Button" type="button" id="addPolygons">Adicionar Bloqueios</button>
	<button data-dojo-type="dijit/form/Button" type="button" id="clearPolygons">Remover Bloqueios</button>
	<button data-dojo-type="dijit/form/Button" type="button" id="solveRoute">Resolver Rota</button>
	<button data-dojo-type="dijit/form/Button" type="button" id="clearRoute">Limpar Rota</button>
	</div>
	<div id="actions" style="height: 200px; float: left; width: 400px; border:0px solid #000">
	<ol>
	<li>Clique em 'Adicionar Paradas'. Clique sobre pontos no mapa para indicar locais por onde a rota deve passar.</li>
	<li>Clique em 'Adicionar Barreiras'. Desenhe polígonos no mapa indicando bloqueios para a rota.</li>
	<li>Clique em 'Resolver Rota' para apresentar a rota.</li>
	</ol>
	</div>
	</div>

	</body>
	</html>