<!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",
"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>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</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.......
Solved! Go to Solution.
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>
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:
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
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>
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
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?
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?
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.
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">
<!--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","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>