Latest Contributions by AshishNagrale

‎03-26-2015

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Driving Directions</title> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dgrid/css/dgrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"> <style> html,body { font-family: Arial,Helvetica,sans-serif; height:100%; margin:0; } #map { height:100%; overflow:hidden; } #dialog { top: 15px; right: 15px; position: absolute; padding: 5px; width: 380px; background-color: #ffffff; border-radius: 5px; margin: 8px; box-shadow: 0px 1px 3px #888; } #dialog input{ margin: 0.5em; width: 20em; } #grid{ overflow-x:hidden; overflow-y:auto; } input#directions { margin: 0.5em auto; width: 8em; display: block; } .dgrid-row{ padding:5px; margin-bottom:5px; min-height:50px; border-bottom: solid 1px #C0C0C0; } .dgrid-row .detail div { cursor: pointer; } .dgrid-row .detail div:hover{ text-decoration:underline; } .distance{ float:right; color:#C0C0C0; font-style:italic; } </style> <script src="http://js.arcgis.com/3.13/"></script> <script> var map; require([ "esri/map", "esri/tasks/locator", "esri/SpatialReference", "esri/tasks/RouteTask", "esri/tasks/RouteParameters", "esri/tasks/FeatureSet", "esri/units", "esri/config", "esri/lang", "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/symbols/SimpleLineSymbol", "esri/urlUtils", "dojo/promise/all", "dojo/_base/array", "esri/Color", "dojo/dom", "dojo/dom-construct", "dojo/on", "dojo/number", "dgrid/Grid", "dojo/domReady!" ], function( Map, Locator, SpatialReference, RouteTask, RouteParameters, FeatureSet, esriUnits, esriConfig, esriLang, PictureMarkerSymbol, Graphic, SimpleLineSymbol, urlUtils, all, arrayUtils, Color, dom, domConstruct, on, number, Grid ) { var locator, routeTask, routeParams = [], segmentGraphic, directionFeatures, grid; on(dom.byId("directions"), "click", getDirections); on(dom.byId("Car"), "click", getCarDirections); on(dom.byId("Truck"), "click", getTruckDirections); on(dom.byId("Walking"), "click", getWalkingDirections); // Use a proxy to access the routing service, which requires credits urlUtils.addProxyRule({ urlPrefix : "route.arcgis.com", //proxyUrl : "/sproxy/" proxyUrl: "http://WebServer/proxy/proxy.ashx" }); //Create a map with an initial extent. Change the extent to match the area you would like to show. map = new Map("map", { basemap: "streets", center: [-117.185, 34.065], zoom: 13 }); //Add a geocoding server as the locator. This locator will be used to find the origin and destination coordinates by input addresses. locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"); locator.outSpatialReference = map.spatialReference; //Fire errorHandler if the locator return en error. locator.on("error", errorHandler); //Add a network analyst server with related parameters to execute the routing task. routeTask = new RouteTask("http://route.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World"); routeParams = new RouteParameters(); routeParams.stops = new FeatureSet(); routeParams.returnRoutes = false; routeParams.returnDirections = true; routeParams.directionsLengthUnits = esriUnits.MILES; routeParams.outSpatialReference = new SpatialReference({ wkid:102100 }); //Show the route when the routing task is solved successfully, otherwise fire errorHandler. routeTask.on("solve-complete", showRoute); routeTask.on("error", errorHandler); //Execute a routing task when clicking "get direction". function getDirections() { routeParams.stops.features = []; map.graphics.clear(); //Get origin address. var optionsFrom = { address: { "SingleLine": dom.byId("fromTxf").value }, outFields: ["Loc_name"] }; var fromAddress = locator.addressToLocations(optionsFrom); //Get destination address. var optionsTo = { address: { "SingleLine": dom.byId("toTxf").value }, outFields: ["Loc_name"] }; var toAddress = locator.addressToLocations(optionsTo); //Use dojo/promises/all to manage multiple asynchronous tasks. Once both geocodes finish, a route is calculated. //http://livedocs.dojotoolkit.org/dojo/promise/all all({ from: fromAddress, to: toAddress }).then(configureRoute); } function getCarDirections(){ alert('Car button click'); } function getTruckDirections(){ alert('Truck button click'); } function getWalkingDirections(){ alert('Walking button click'); } //Check if the origin and destination addresses are executed successfully //and solve the routing task. function configureRoute(results) { //Configure symbols to be used for destinations and route segments. var fromSymbol = new PictureMarkerSymbol({ "angle":0, "xoffset":0, "yoffset":10, "type":"esriPMS", "url":"http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png", "contentType":"image/png", "width":24, "height":24 }); var toSymbol = new PictureMarkerSymbol({ "angle":0, "xoffset":0, "yoffset":12, "type":"esriPMS", "url":"http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png", "contentType":"image/png", "width":24, "height":24 }); var fromStop = getCandidate(results.from); if ( fromStop === null ) { errorHandler("The origin address is invalid"); } else { var fromGraphic = new Graphic(fromStop.location, fromSymbol, { address:fromStop.address }); routeParams.stops.features[0] = map.graphics.add(fromGraphic); } var toStop = getCandidate(results.to); if ( toStop === null ) { errorHandler("The destination address is invalid"); } else { var toGraphic = new Graphic(toStop.location, toSymbol, { address:toStop.address }); routeParams.stops.features[1] = map.graphics.add(toGraphic); } if ( fromStop !== null && toStop !== null ) { routeTask.solve(routeParams); } } //Handle all the coordinate candidates of the origin and destination addresses and //return the candidate with the highest score. function getCandidate(candidates){ var stop = null, score = 0; arrayUtils.forEach(candidates, function(candidate){ if( candidate.score > score ) { stop = candidate; score = candidate.score; } }); return stop; } //Show the result of the routing task. function showRoute(e) { debugger; var data = []; if ( grid ) { grid.refresh(); } var directions = e.result.routeResults[0].directions; directionFeatures = directions.features; var routeSymbol = new SimpleLineSymbol().setColor(new Color([0,0,255,0.5])).setWidth(4); // Zoom to results. map.setExtent(directions.mergedGeometry.getExtent(), true); // Add route to the map. var routeGraphic = new Graphic(directions.mergedGeometry, routeSymbol); map.graphics.add(routeGraphic); routeGraphic.getShape().moveToBack(); map.setExtent(directions.extent, true); //Display the directions. var directionsInfo = e.result.routeResults[0].directions.features; var totalDistance = number.format(directions.totalLength); var totalLength = number.format(directions.totalTime); data = arrayUtils.map(directionsInfo,function(feature,index){ return { "detail": feature.attributes.text, "distance": number.format(feature.attributes.length,{places:2}), "index": index }; }); grid = new Grid({ renderRow: renderList, showHeader:false }, "grid"); grid.renderArray(data); grid.on(".dgrid-row:click", zoomToSegment); } function renderList(obj,options){ var template = "<div class='detail'><div style='max-width:70%;float:left;'>${detail}</div><span style='float:right;' class='distance'>${distance} mi</span></div>"; return domConstruct.create("div", { innerHTML: esriLang.substitute(obj, template) }); } //Display any errors that were caught when attempting to solve the route. function errorHandler(err) { alert("An error occured\n" + err); } function zoomToSegment(e) { //Grid row id corresponds to the segment to highlight var index = grid.row(e).id; var segment = directionFeatures[index]; var segmentSymbol = new SimpleLineSymbol().setColor(new Color([255,0,0,0.5])).setWidth(8); map.setExtent(segment.geometry.getExtent(), true); if ( !segmentGraphic ) { segmentGraphic = map.graphics.add(new Graphic(segment.geometry, segmentSymbol)); } else { segmentGraphic.setGeometry(segment.geometry); } } }); </script> </head> <body class="claro"> <div id="map"></div> <div id="dialog"> <div> <label for="fromTxf"><img src="http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png" width=24 height=24></label> <input type="text" id="fromTxf" value="380 New York St, Redlands, CA 92373"> </div> <div > <label for="toTxf"><img src="http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png" width=24 height=24></label> <input type="text" id="toTxf" value="1320 Mona Ave, Redlands, CA 92374"> </div> <input id="directions" type="button" value="Get Directions"> <div> <input id="Car" type="button" value="Get Car Route"> <input id="Truck" type="button" value="Get Truck Route"> <input id="Walking" type="button" value="Get Walking Route"> </div> <div id="directionsDetail" style="clear:both;"> <div id="grid"></div> </div> </div> </body> </html> Message was edited by: Ashish Nagrale

‎03-25-2015

Hi Jake, This is my code and using Web map in my application. I have configure the pop-up, its working in Map Viewer of ArcGIS Online. But in application popup is not coming while clicking on incident in app. Even when i am running this code in Sandbox its showing the traffic and incident, but not showing the popup <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>World Traffic</title> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"> <link rel="stylesheet" href="css/layout.css"> <script src="http://js.arcgis.com/3.13/"></script> <script> require([ "dojo/parser", "dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom", "esri/map", "esri/urlUtils", "esri/arcgis/utils", "dojo/domReady!" ], function( parser, ready, BorderContainer, ContentPane, dom, Map, urlUtils, arcgisUtils ) { ready(function(){ parser.parse(); //all requests to traffic.arcgis.com will proxy to the proxyUrl defined in this object. urlUtils.addProxyRule({ urlPrefix: "traffic.arcgis.com", //proxyUrl: "/sproxy/" proxyUrl: "http://WebServer/proxy/proxy.ashx" }); arcgisUtils.createMap("089d24a6d1SAMPLE96a383fa75239921","map").then(function(response){ //update the app var map = response.map; }); }); }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> </div> </body> </html> Thanks I am adding service as dynamic layer also but popup is not showing result. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Sample Map</title>  <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } </style> <script src="http://js.arcgis.com/3.13/"></script> <script> var map; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/urlUtils","esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters","esri/InfoTemplate", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!" ], function( Map, ArcGISDynamicMapServiceLayer, urlUtils, IdentifyTask, IdentifyParameters, InfoTemplate, dom, on, array ) { urlUtils.addProxyRule({ urlPrefix: "traffic.arcgis.com", proxyUrl: "http://WebServer/proxy/proxy.ashx" }); map = new Map("mapDiv", { basemap: "streets", center: [-81.792107, 26.150807], zoom: 8 }); var webmap; webmap = "http://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer"; var webmapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(webmap, { id: 'Dynamic' } ); map.addLayer(webmapLayer); on(map, "click", function(evt) { alert('1'); executeIdentifyTask(evt); }); identifyTask = new IdentifyTask(webmap); identifyParams = new IdentifyParameters(); identifyParams.tolerance = 3; identifyParams.returnGeometry = true; identifyParams.layerIds = webmapLayer.visibleLayers; identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL; identifyParams.width = map.width; identifyParams.height = map.height; function executeIdentifyTask(evt) { alert('2'); identifyParams.geometry = evt.mapPoint; identifyParams.mapExtent = map.extent; identifyParams.layerIds = webmapLayer.visibleLayers; var deferred = identifyTask.execute(identifyParams); deferred.addCallback(function (response) { return dojo.map(response, function (result) { var feature = result.feature; feature.attributes.layerName = result.layerName; var template = new InfoTemplate("", "${*}"); feature.setInfoTemplate(template); return feature; }); }); map.infoWindow.setFeatures([deferred]); map.infoWindow.show(evt.mapPoint); } }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>

‎03-24-2015

Hi Jake, This is Ashish Nagrale and I had raised the query from Shrikant's account. Your code is running fine, but its not showing pop-up when clicking on incident circle on traffic. Is that due to proxy usage or isolated from dynamicLayer?

‎03-24-2015

Great..... Thankyou jake, Its working. But why the legend code is not working with popup parser.parse(); //all requests to traffic.arcgis.com will proxy to the proxyUrl defined in this object. urlUtils.addProxyRule({ urlPrefix: "traffic.arcgis.com", proxyUrl: "http://WebService/proxy/proxy.ashx" }); arcgisUtils.createMap("327687e9b2664d65aa7a7f5c85398cff","map").then(function(response){ //update the app dom.byId("title").innerHTML = response.itemInfo.item.title; dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; var map = response.map; //add the scalebar var scalebar = new Scalebar({ map: map, scalebarUnit: "english" }); //add the legend. Note that we use the utility method getLegendLayers to get //the layers to display in the legend from the createMap response. var legendLayers = arcgisUtils.getLegendLayers(response); var legendDijit = new Legend({ map: map, layerInfos: legendLayers },"legend"); legendDijit.startup(); }); }); }); How to create WebMapId i.e 327687e9b2664d65aa7a7f5c85398cff

Online Status	Offline
Date Last Visited	‎11-11-2020 02:24 AM

My Ideas

Latest Contributions by AshishNagrale

How to change the Route Direction when click on button Car/Truck/Walking

Re: how to use traffic service in our application without using proxy

Re: how to use traffic service in our application without using proxy

Re: how to use traffic service in our application without using proxy