Impossible configuration: AGOL-hosted map, layers, and .PDF file; local JavaScript???

BradleyMecham · ‎06-19-2014

Hello,

After several days of combing through tutorials, API docs, and forums, and after many hours of coding and implementing, I've determined it's time to ask the question: is this even possible?

Here's the scenario:
1. I have created a map with the pertinent layers using my organization-access AGOL account. I have also uploaded several .PDF files to my account.
2. I created a JavaScript app, based on a template downloaded from ArcGIS.com, that should allow me to view the map in various browsers, including mobile browsers.
3. I added a "heatmap" layer to this map using the ESRI-suggested heatmap.js.

All of the above works great. The app makes you log in, and if you're not me, you can't see anything. But if you are me, then you get the layers, the heatmap, etc.

4. I would like to add some links to my app. They DO NOT need to be associated with the fields in my data--they can just be static(ish) links off to the side. These links need to point to, and open, the .PDF files I have mentioned.

This I do not seem to be able to do. I believe CORS works fine. I set up a proxy to circumvent it anyway. I've successfully stored (and loaded) the credential information used to bring up the map, but that doesn't seem to help. Perhaps it is not used when looking up files? Or maybe I haven't associated it correctly. If I share the PDF files with Everyone, the links work like a charm, but that is not OK. Currently I get the Error 403 page, with "You do not have permissions to access this resource or perform this operation," when I try to access the file when it's shared only with the organization. Nothing I have tried seems to get me any further than that.

So my question is, is this even possible? For example:
a) can I somehow create a JavaScript app that creates a heatmap and links to my files, and that I can upload to arcgis.com so that all files are local and logins are persistent?
b) am I missing something easy--maybe a function that's been written for this purpose?
c) can I somehow pass the login credentials in with my href request, so that permissions to access that resource can be given?

Thoughts?

Or should I just tell the boss that for now, it's just going to be a pretty heatmap? 🙂

Thanks for all your help!!

Bradley

KellyHutchins · ‎06-20-2014

Bradley,

There are a few ways to accomplish this but here's one that I think will work for your situation. You mentioned that users are already logged in to your application. If the credentials to log-in are the same as those needed to access the pdf then the code below will get the token from the credential and append it to the pdf download link.

<!DOCTYPE html>   <html>   <head>   <title>Create a Web Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <style>     html,body,#mapDiv,.map.container{       padding:0;       margin:0;       height:100%;     }     #linkDiv{       position: absolute;       top:4px;       right:20px;       background-color: #fff;       border: solid 1px #333;       border-radius:4px;       padding:10px;     }   </style>    <script>var dojoConfig = { parseOnLoad:true };</script>   <script src="http://js.arcgis.com/3.9/"></script>   <script>     require([       "esri/map",       "esri/arcgis/utils",       "esri/IdentityManager",       "esri/request",       "dojo/dom-construct",       "dojo/domReady!"       ], function (Map, arcgisUtils, IdentityManager, esriRequest, domConstruct) {         arcgisUtils.createMap("c1f07f8344284500b770bc36ee6f5d1d", "mapDiv");          //create links          var pdfUrl = "http://www.arcgis.com/sharing/rest/content/items/de2f584ecb77473985e6d0ae37a58713/data";         esri.id.getCredential(pdfUrl).then(function(credential){           if(credential.token){             pdfUrl += "?token=" + credential.token;           }           //create and add the download link to the page            domConstruct.create("a", {             href: pdfUrl,             target: "_blank",             innerHTML: "Capitol Forest PDF"           },"linkDiv");             });      });   </script>    </head>    <body class="claro">     <div id="mapDiv"></div>     <div id="linkDiv"></div>   </body>   </html>

View solution in original post

KellyHutchins · ‎06-20-2014

Bradley,

There are a few ways to accomplish this but here's one that I think will work for your situation. You mentioned that users are already logged in to your application. If the credentials to log-in are the same as those needed to access the pdf then the code below will get the token from the credential and append it to the pdf download link.

<!DOCTYPE html>   <html>   <head>   <title>Create a Web Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <style>     html,body,#mapDiv,.map.container{       padding:0;       margin:0;       height:100%;     }     #linkDiv{       position: absolute;       top:4px;       right:20px;       background-color: #fff;       border: solid 1px #333;       border-radius:4px;       padding:10px;     }   </style>    <script>var dojoConfig = { parseOnLoad:true };</script>   <script src="http://js.arcgis.com/3.9/"></script>   <script>     require([       "esri/map",       "esri/arcgis/utils",       "esri/IdentityManager",       "esri/request",       "dojo/dom-construct",       "dojo/domReady!"       ], function (Map, arcgisUtils, IdentityManager, esriRequest, domConstruct) {         arcgisUtils.createMap("c1f07f8344284500b770bc36ee6f5d1d", "mapDiv");          //create links          var pdfUrl = "http://www.arcgis.com/sharing/rest/content/items/de2f584ecb77473985e6d0ae37a58713/data";         esri.id.getCredential(pdfUrl).then(function(credential){           if(credential.token){             pdfUrl += "?token=" + credential.token;           }           //create and add the download link to the page            domConstruct.create("a", {             href: pdfUrl,             target: "_blank",             innerHTML: "Capitol Forest PDF"           },"linkDiv");             });      });   </script>    </head>    <body class="claro">     <div id="mapDiv"></div>     <div id="linkDiv"></div>   </body>   </html>

BradleyMecham · ‎06-20-2014

Oh, wow!!!

If that isn't the most beautiful thing I've seen all week, I don't know what is! That works PERFECTLY.

THANK YOU!!!

Bradley