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: [255, 255, 255, 0.9]
}
};
// Define the symbology used to display the route
var routeSymbol = {
type: "simple-line", // autocasts as SimpleLineSymbol()
color: [255, 0, 0, 0.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.365173625021976, 49.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.5140795, 11.371378700000037);
setOperationPoint(49.517965244163186, 11.365173625021976);
});
