| title | description | author | ms.author | ms.date | ms.topic | ms.service | services | manager | ms.custom |
|---|---|---|---|---|---|---|---|---|---|
Show directions with Azure Maps | Microsoft Docs |
How to display directions between two locations on a Javascript map |
jingjing-z |
jinzh |
11/15/2018 |
conceptual |
azure-maps |
azure-maps |
timlt |
codepen |
This article shows you how to make a route request and show the route on the map.
There are two ways to do so. The first way is to query the Azure Maps Route API through a service module. The second way is to make a XMLHttpRequest to the API. Both ways are discussed below.
<iframe height='500' scrolling='no' title='Show directions from A to B on a map (Service Module)' src='//codepen.io/azuremaps/embed/RBZbep/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Show directions from A to B on a map (Service Module) by Azure Maps (@azuremaps) on CodePen. </iframe>In the code above, the first block of code constructs a Map object. You can see create a map for instructions.
The line in the second block of code instantiates a client service.
The third creates and adds a DataSource object to the map.
A line is a Feature of LineString. A LineLayer renders line objects wrapped in the DataSource as lines on the map. The fourth block of code creates and add a line layer to the map. See properties of a line layer at LinestringLayerOptions.
A symbol layer uses text or icons to render point-based data wrapped in the DataSource as symbols on the map. The fifth block of code creates and add a symbol layer to the map.
The sixth block of code creates start and end points object and adds them to the dataSource object.
The seventh block of code sets the bounds of the map using the Map's setCamera property.
The last block of code queries the Azure Maps routing service, which is part of the service module. The getRouteDirections method is used to get a route between the start and end points. The response is then parsed into GeoJSON format using the getGeoJsonRouteDirectionsResponse method. It then renders the response as a route on the map. For more information about adding a line to the map, see add a line on the map.
The route query, data source, symbol, and line layers and the camera bounds are created and set within the map's event listener to ensure that the results are displayed after the map loads fully.
<iframe height='500' scrolling='no' title='Show directions from A to B on a map' src='//codepen.io/azuremaps/embed/zRyNmP/?height=469&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Show directions from A to B on a map by Azure Maps (@azuremaps) on CodePen. </iframe>The first block of code constructs a Map object. You can see create a map for instructions.
The second block of code creates and adds a DataSource object to the map.
The third code block creates the start and destination points for the route and adds them to the data source. You can see add a pin on the map for instructions about using addPins.
A LineLayer renders line objects wrapped in the DataSource as lines on the map. The fourth block of code creates and adds a line layer to the map. See properties of a line layer at LineLayerOptions.
A symbol layer uses text or icons to render point-based data wrapped in the DataSource as symbols on the map. The fifth block of code creates and add a symbol layer to the map. See properties of a symbol layer at SymbolLayerOptions.
The next code block creates SouthWest and NorthEast points from the start and destination points and sets the bounds of the map using the Map's setCamera property.
The last block of code sends an XMLHttpRequest to Azure Maps Route API. It then parses the incoming response. And for a successful response, it collects the latitude and longitude information for each route point and creates an array of lines by connecting those points. It then adds all those lines onto the dataSource to render the route on the map. You can see add a line on the map for instructions.
The route query, data source, symbol, and line layers and the camera bounds are created and set within the map's event listener to ensure that the results are displayed after the map loads fully.
Learn more about the classes and methods used in this article:
[!div class="nextstepaction"] Map
See the following articles for full code examples:
[!div class="nextstepaction"] Show traffic on the map
[!div class="nextstepaction"] Interacting with the map - mouse events