How to zoom to a calulated route?

201
1
09-27-2019 01:37 AM
JensDinstuehler
New Contributor

Hi,

i'm barely new to ArcGIS and facing a simple problem. I'm displaying a map in browser and initiate a routing between two points. Points are set by two lat/lon pairs.

The route is calculated and displayed properly, but i want the map to zoom to the route. The route shoul be displayed as big as possible. 

I'm sure i'm missing something really simple, as this is a common use case i think.


    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);
      });

      

    
Tags (3)
0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Esteemed Contributor

Jens,

  Set the maps extent to the resultant routes extent instead of the layers full extent.

map.setExtent(routeResult.geometry.getExtent());