topic Re: how to use traffic service in our application without using proxy in ArcGIS JavaScript Maps SDK Questions

how to use traffic service in our application without using proxy

ShrikantNistane — Sat, 21 Mar 2015 07:58:08 GMT

<!DOCTYPE html>

<html>

<head>

<title>World Traffic</title>

require([

"dojo/parser",

"dojo/ready",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/dom",

"esri/map",

"esri/urlUtils",

"esri/arcgis/utils",

"esri/dijit/Legend",

"esri/dijit/Scalebar",

"dojo/domReady!"

], function(

parser,

ready,

BorderContainer,

ContentPane,

dom,

Map,

urlUtils,

arcgisUtils,

Legend,

Scalebar

) {

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/"

});

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

});

</script>

</head>

</div>

</div>

</body>

</html>

The above code works in ESRI Sandbox , but does not work when I use the above code in separate .html file , may be because of proxyUrl.

Please help.......

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

JakeSkinner — Mon, 23 Mar 2015 12:30:59 GMT

Hi Shrikant,

You will need to use a proxy for this sample. The ArcGIS Online web map that the code calls has a secured Traffic service. An ArcGIS Online Organization account is required to use this service. The proxy is used to successfully pass credentials to this service. The below links should be helpful:

Using the proxy | Guide | ArcGIS API for JavaScript

ArcGIS Online Authentication | ArcGIS for Developers

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

ShrikantNistane — Mon, 23 Mar 2015 15:48:20 GMT

Hi Jake,

I have Trial Organization account and I have register the new application with

Type:Application

Tags: Live Traffic, Real time traffic, traffic map, traffic accidents, incidents, congestion

Now I have

Client ID:XtsxmSampleUFIp

Client Secret: 6ca936b16Sample4763409825

Token: 8jazdB1eIMxd0AeS47qtlGNSample_t21uUqyL2TgLT9vuxtCxH-hW0Uwhi9Q..

Then I have changed the code of proxy.config

<serverUrl clientId="XtsxmSampleUFIp" clientSecret="6ca936b16Sample4763409825" rateLimit="10" rateLimitPeriod="60"

matchAll="true" url="http://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer"/>

</serverUrls>

</ProxyConfig>

http://localhost/DotNet/ here my proxy is run on IIS

Now I am using the ESRI sample code of traffic as mention in shrikant add and changing proxyUrl: "/sproxy/" to proxyUrl: "/DotNet/"

But Still the Esri sample code is not working ........Please help

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

JakeSkinner — Sat, 11 Dec 2021 07:45:42 GMT

It looks like you registered an application, which I don't believe will work when trying to access a service. Try updating your proxy to the following:

<serverUrl url="http://traffic.arcgis.com/arcgis/rest/services/"
                   username="agolUserAccount"
                   password="agolPassword"
                   matchAll="true"/>

After your proxy is updated, try the following below. You will just need to update the proxyUrl.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <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/dijit/themes/claro/claro.css">-->
    <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",
        "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer, urlUtils,
        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 dynamicLayer = new ArcGISDynamicMapServiceLayer("http://traffic.arcgis.com/arcgis/rest/services/World/Traffic/MapServer");  
        
        map.addLayer(dynamicLayer);                

      });
    </script>
  </head>
  
  <body>
    
    <div id="mapDiv"></div>

  </body>
</html>

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

AshishNagrale — Tue, 24 Mar 2015 07:17:05 GMT

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

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

ShrikantNistane — Wed, 25 Mar 2015 04:59:18 GMT

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?

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

AshishNagrale — Wed, 25 Mar 2015 05:12:18 GMT

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?

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

JakeSkinner — Wed, 25 Mar 2015 11:57:46 GMT

Hi Ashish,

Are you using a web map to show the traffic service, or are you adding the service as a dynamic layer? It will be easier to add the service to a web map, configuring the pop-ups there, and then add the web map to your application. If you want to post your code, I can take a look at it.

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

AshishNagrale — Thu, 26 Mar 2015 05:57:08 GMT

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>

<title>World Traffic</title>

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>

</div>

</body>

</html>

Thanks

I am adding service as dynamic layer also but popup is not showing result.

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Sample Map</title>

<style>

html, body, #mapDiv {

padding:0;

margin:0;

height:100%;

}

</style>

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>

</body>

</html>