In this blog, we\u2019ll look at how directions and routing is implemented with Google, and how it is done with ArcGIS.<\/p>\n
Getting started<\/h3>\n
To get started with ArcGIS, sign up for the ArcGIS Developer Program<\/a> at no cost. This account will get you access to the JavaScript API, 1,000,000 basemaps and geosearch transactions per month, credits towards routing, unlimited apps deployed, and quite a bit more for free. More information can be found in the first blog<\/a> of this series.<\/p>\n Once you have signed up for your Developer account, create an ArcGIS Online hosted proxy<\/a> for routing which you\u2019ll use when you build your app.<\/p>\n Check out the Getting Started blog<\/a>\u00a0for an overview on how to load the JavaScript API and create a map.<\/p>\n Now let\u2019s look at how you can create and display directions and a route between two predefined locations.<\/p>\n With Google, it is done like this:<\/p>\n With ArcGIS you can calculate directions between two predefined locations<\/a> or take advantage of the out of box Directions widget<\/a> which allows you to integrate a dynamic directions\/routing experience with just a few lines of code. The Directions widget allows you to:<\/p>\n To use the widget, simply initialize it with the routeServiceUrl pointing to the ArcGIS Online hosted proxy that you created in the Getting Started step, and then add it to the View UI. The API has convenient UI placement<\/a> tools and other goodies; the below code adds the widget in the top right corner.<\/p>\n This code is using the World Navigation basemap, but you can select from a wide variety of basemaps<\/a> such as the night streets map:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":301992,"id":301992,"title":"directions_night2","filename":"directions_night2.png","filesize":155471,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/migrating-web-apps-from-google-to-arcgis-directions-and-routing\/directions_night2","alt":"","author":"4271","description":"","caption":"","name":"directions_night2","status":"inherit","uploaded_to":300452,"date":"2018-08-17 21:44:17","modified":"2018-08-17 21:44:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1373,"height":660,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","thumbnail-width":213,"thumbnail-height":102,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","medium-width":464,"medium-height":223,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","medium_large-width":768,"medium_large-height":369,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","large-width":1373,"large-height":660,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","1536x1536-width":1373,"1536x1536-height":660,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","2048x2048-width":1373,"2048x2048-height":660,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","card_image-width":826,"card_image-height":397,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/directions_night2.png","wide_image-width":1373,"wide_image-height":660}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" <\/a> You can also use the API\u2019s RouteTask<\/a> directly which finds routes between two or more locations and provides driving directions. RouteTask allows you to solve simple routing problems as well as complex ones that take into account multiple stops, barriers, and time windows. To build a simple experience that allows the user to find a route between two locations on the map, create graphics for the origin and destination and then use the RouteTask to calculate a route. The calculated route is then displayed on the map. Similar to the previous example, the ArcGIS Online hosted proxy URL is referenced in the RouteTask:<\/p>\n See the SDK’s routing sample<\/a> to learn more about RouteTask.<\/p>\n You\u2019ve now seen the basics of migrating your Google Maps directions app to the ArcGIS API for JavaScript. With ArcGIS you get flexibility of using an out of box UI component or building an entirely customized experience.<\/p>\n Be sure to check out these additional resources to help you get started:<\/p>\nCreate a basic mapping app<\/h3>\n
Displaying directions<\/h3>\n
\r\nconst<\/span> map = new<\/span> google.maps.Map(document<\/span>.getElementById(\"map\"<\/span>), {\r\n mapTypeId: \"roadmap\",\r\n center: {lat: 39.8367<\/span>, lng: 105.0372<\/span>},\r\n zoom: 10<\/span>\r\n});\r\n\r\nconst<\/span> directionsService = new<\/span> google.maps.DirectionsService;\r\nconst<\/span> directionsDisplay = new<\/span> google.maps.DirectionsRenderer;\r\ndirectionsDisplay.setMap(map);\r\ndirectionsService.route({\r\n origin: \"Denver, CO\",\r\n destination: \"Boulder, CO\",\r\n travelMode: \"DRIVING\"<\/span>\r\n}, function<\/span>(response, status) {\r\n if<\/span> (status === \"OK\"<\/span>) {\r\n directionsDisplay.setDirections(response);\r\n }\r\n});\r\n<\/code><\/pre>\n\n
\r\nrequire<\/span>([\r\n \"esri\/Map\"<\/span>,\r\n \"esri\/views\/MapView\"<\/span>,\r\n \"esri\/widgets\/Directions\"<\/span>\r\n], function<\/span>(\r\n Map,\r\n MapView,\r\n Directions) {\r\n\r\n const<\/span> map = new<\/span> Map<\/span>({\r\n basemap: \"streets-navigation-vector\"<\/span>\r\n });\r\n\r\n const<\/span> view = new<\/span> MapView({\r\n container: \"viewDiv\"<\/span>,\r\n map: map\r\n });\r\n\r\n const<\/span> directionsWidget = new<\/span> Directions({\r\n view: view,\r\n \/\/ Paste the hosted proxy URL here that you created previously<\/span>\r\n routeServiceUrl: \"https:\/\/utility.arcgis.com\/usrsvcs\/appservices\/<your-id>\/rest\/services\/World\/Route\/NAServer\/Route_World\/\"<\/span>\r\n });\r\n\r\n \/\/ Add the Directions widget to the top right corner of the view<\/span>\r\n view.ui.add(directionsWidget, {\r\n position: \"top-right\"<\/span>\r\n });\r\n});\r\n\r\n<\/code><\/pre>\n
\nYou can play around with the directions widget using the SDK sample<\/a>.<\/p>\nUse the route service directly<\/h3>\n
\r\nrequire<\/span>([\r\n \"esri\/Map\"<\/span>,\r\n \"esri\/views\/MapView\"<\/span>,\r\n \"esri\/Graphic\"<\/span>,\r\n \"esri\/tasks\/RouteTask\"<\/span>,\r\n \"esri\/tasks\/support\/RouteParameters\"<\/span>,\r\n \"esri\/tasks\/support\/FeatureSet\"<\/span>\r\n], function<\/span>(\r\n Map, MapView, Graphic, RouteTask, RouteParameters, FeatureSet\r\n) {\r\n\r\n \/\/ Point the URL to a valid route service<\/span>\r\n const<\/span> routeTask = new<\/span> RouteTask({\r\n url: \"https:\/\/utility.arcgis.com\/usrsvcs\/appservices\/<your-id>\/rest\/services\/World\/Route\/NAServer\/Route_World\/\"<\/span>\r\n });\r\n\r\n const<\/span> map = new<\/span> Map<\/span>({\r\n basemap: \"streets-navigation-vector\"<\/span>\r\n });\r\n\r\n const<\/span> view = new<\/span> MapView({\r\n container: \"viewDiv\"<\/span>,\r\n map: map,\r\n center: [-105.0372<\/span>, 39.8367<\/span>],\r\n zoom: 10<\/span>\r\n });\r\n\r\n const<\/span> origin = new<\/span> Graphic({\r\n symbol: {\r\n type: \"simple-marker\"<\/span>,\r\n color: \"cyan\"<\/span>\r\n },\r\n geometry: {\r\n type: \"point\"<\/span>,\r\n longitude: -104.9903<\/span>,\r\n latitude: 39.7392<\/span>\r\n }\r\n });\r\n\r\n const<\/span> destination = new<\/span> Graphic({\r\n symbol: {\r\n type: \"simple-marker\"<\/span>,\r\n color: \"yellow\"<\/span>\r\n },\r\n geometry: {\r\n type: \"point\"<\/span>,\r\n longitude: -105.2705<\/span>,\r\n latitude: 40.0150<\/span>\r\n }\r\n });\r\n\r\n const<\/span> route = [origin, destination];\r\n view.graphics.addMany(route);\r\n\r\n const<\/span> routeParams = new<\/span> RouteParameters({\r\n stops: new<\/span> FeatureSet({\r\n features: route\r\n })\r\n });\r\n\r\n routeTask.solve(routeParams).then(function<\/span>(data) {\r\n data.routeResults.forEach(function<\/span>(result) {\r\n result.route.symbol = {\r\n type: \"simple-line\"<\/span>,\r\n color: \"blue\"<\/span>,\r\n width: \"4px\"<\/span>\r\n };\r\n\r\n view.graphics.add(result.route);\r\n\r\n });\r\n });\r\n});\r\n\r\n<\/code><\/pre>\nSummary and next steps<\/h3>\n
\n
"},{"ID":4271,"user_firstname":"Julie","user_lastname":"Powell","nickname":"Julie Powell","user_nicename":"julie-powell","display_name":"Julie Powell","user_email":"julie_powell@esri.com","user_url":"","user_registered":"2018-03-02 00:15:51","user_description":"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. \r\nJulie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.","user_avatar":"
"}],"related_articles":[{"ID":295342,"post_author":"4271","post_date":"2018-08-09 10:29:10","post_date_gmt":"2018-08-09 17:29:10","post_content":"","post_title":"Migrating from Google Maps JavaScript API to ArcGIS API for JavaScript","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"migrating-from-google-maps-javascript-api-to-arcgis-api-for-javascript","to_ping":"","pinged":"","post_modified":"2018-08-30 10:31:39","post_modified_gmt":"2018-08-30 17:31:39","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=295342","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":244632,"post_author":"4271","post_date":"2018-07-05 10:46:38","post_date_gmt":"2018-07-05 17:46:38","post_content":"","post_title":"What's New in the ArcGIS API for JavaScript (version 4.8 & 3.25)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"jsapi-4-8","to_ping":"","pinged":"","post_modified":"2018-07-26 12:07:52","post_modified_gmt":"2018-07-26 19:07:52","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=244632","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":82861,"post_author":"7451","post_date":"2018-02-26 08:10:48","post_date_gmt":"2018-02-26 08:10:48","post_content":"","post_title":"Maps App JavaScript","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"maps-app-javascript","to_ping":"","pinged":"","post_modified":"2018-04-25 20:42:44","post_modified_gmt":"2018-04-25 20:42:44","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/maps-app-javascript\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/adrivingdir2.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/08\/adrivingdir-1.png"},"yoast_head":"\n