How to zoom to route?

495
1
09-27-2019 01:43 AM
JensDinstuehler
New Contributor

Hi, 

i'm barely new to ArcGIS and i'm facing a simple problem. I want to display a map in browser, calculare a route out of two points (lat / lon) and zoom to the route. The route should be displayed as big as possible within the map.

I tried to work witht the extent of the routeLayer but this does not seem to work out. 

The javascript code i use is as follows:


    var travelTime = 0;
    var travelDistance = 0;

      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/tasks/RouteTask",
        "esri/tasks/support/RouteParameters",
        "esri/tasks/support/FeatureSet",
        "esri/geometry/Point",
        "esri/geometry/Extent"
      ], function(
        Map,
        MapView,
        Graphic,
        GraphicsLayer,
        RouteTask,
        RouteParameters,
        FeatureSet,
        Point,
        Extent
      ) {
        // Point the URL to a valid route service that uses an
        // ArcGIS Online hosted service proxy
        var routeTask = new RouteTask({
          url:
            

    var travelTime = 0;
    var travelDistance = 0;

      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/tasks/RouteTask",
        "esri/tasks/support/RouteParameters",
        "esri/tasks/support/FeatureSet",
        "esri/geometry/Point",
        "esri/geometry/Extent"
      ], function(
        Map,
        MapView,
        Graphic,
        GraphicsLayer,
        RouteTask,
        RouteParameters,
        FeatureSet,
        Point,
        Extent
      ) {
        // Point the URL to a valid route service that uses an
        // ArcGIS Online hosted service proxy
        var routeTask = new RouteTask({
          url: "https://utility.arcgis.com/usrsvcs/appservices/srsKxBIxJZB0pTZ0/rest/services/World/Route/NAServer/Route_World"
        });

        // The stops and route result will be stored in this layer
        var routeLayer = new GraphicsLayer();

        // Setup the route parameters
        var routeParams = new RouteParameters({
          stops: new FeatureSet(),
          outSpatialReference: {
            // autocasts as new SpatialReference()
            wkid: 3857
          }
        });

        // Define the symbology used to display the stops
        var stopSymbol = {
          type: "simple-marker"// autocasts as new SimpleMarkerSymbol()
          style: "cross",
          size: 15,
          outline: {
            // autocasts as new SimpleLineSymbol()
            width: 4,
            color: [2552552550.9]
          }
        };

        // Define the symbology used to display the route
        var routeSymbol = {
          type: "simple-line"// autocasts as SimpleLineSymbol()
          color: [255000.75],
          width: 7
        };

        var map = new Map({
          basemap: "streets-night-vector",
          layers: [routeLayer] // Add the route layer to the map
        });
        var view = new MapView({
          container: "viewDiv"// Reference to the scene div created in step 5
          map: map, // Reference to the map object created before the scene
          center: [11.36517362502197649.517965244163186],
          zoom: 15
        });

        function setHomePoint(latitude, longitude) {
            var homePoint = new Graphic({
                geometry: new Point(longitude, latitude),
                symbol: stopSymbol
            })
            routeLayer.add(homePoint);
            // Add point to routing stops
            routeParams.stops.features.push(homePoint);
        }

        function setOperationPoint(latitude, longitude) {
            var operationPoint = new Graphic({
                geometry: new Point(longitude, latitude),
                symbol: stopSymbol
            })
            routeLayer.add(operationPoint);
            // Start calculating Route
            routeParams.stops.features.push(operationPoint);
            if (routeParams.stops.features.length >= 2) {
                routeTask.solve(routeParams).then(showRoute);
            }
        }
        
        // Adds the solved route to the map as a graphic
        function showRoute(data) {
            var routeResult = data.routeResults[0].route;
            routeResult.symbol = routeSymbol;
            routeLayer.add(routeResult);
            map.setExtent(routeLayer.fullExtent);   
        }

       setHomePoint(49.514079511.371378700000037);
       setOperationPoint(49.51796524416318611.365173625021976);
      });
0 Kudos
1 Reply