Click Feature to Open URL

10221
13
Jump to solution
05-06-2015 02:12 PM
ChrisHolmes
Occasional Contributor III

Hello, I`ve downloaded a story map template to work with (just the one for single map). I`m wondering if there is a way to set it up so that when a polygon in a map service is clicked that a url can be opened (url is stored as attribute for that specific polygon). So far everything I`ve seen has to do with using the popup window to access information, I`d really like to be able to just click the polygon and have that url specific to that polygon open up.

Thanks for any help!

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
JaiSiva1
New Contributor III

I am really sorry , the above mentioned code will work only if you are creating your own application.

Assuming that you are using AGOL with an organisational account, you can set the hyperlink to a specific  layer by the following method while creating the specific web map.

Step 1:

  After adding the respective layer while creating the web map ,

  Select the specific layer and choose configure pop-up

popup1.png

Step 2:

  - Select "A Custom attribute display" under display.

  - click configure      

  popup2.png

Step 3:

- select the hyperlink option.

- set the URL with the specific field ( http://www.yourwebsite.com/{specificField}  )

- set the description , click ok

- Save the Pop-up.

   popup3.png

  Now , your popup will have the specific hyperlink.

View solution in original post

0 Kudos
13 Replies
JamesCrandall
MVP Frequent Contributor

I'm not exactly sure if the actual features and their attributes are exposed like that thru a Story Map but you might be able to set some html on other elements (text, or graphics I suppose).  You would set it's text properties to something like:

<a href="url">link text</a>

JaiSiva1
New Contributor III

Hi chris,

  I would suggest the following code :

  var map;

      require(["esri/map",
                "esri/layers/FeatureLayer",
                "esri/InfoTemplate",
                "dojo/on",
                "dojo/domReady!"], 
  function(Map,FeatureLayer,InfoTemplate,on) {
          map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [0, 0] // longitude, latitude        
        });

  var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
  map.addLayer(featureLayer);

  //Code for the specific URL to open in a new window
  featureLayer.on('click',function(e){ 
    var specific = e.graphic.attributes['SpecificAttribute'] 
    window.open("http://YourUrl.com/"+specific);
  });
      });

Hope You would find this useful.

ChrisHolmes
Occasional Contributor III

Thanks, I will give this a try.

0 Kudos
ChrisHolmes
Occasional Contributor III

I'm having some trouble trying to figure out where to insert your code sample into the index.html file that is with the template. Also what needs to be commented out from the original index.html file. Here is the index.html file that came with the template, any help appreciated. Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=9, IE=10">
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css">
   <script type="text/javascript">
    var path_location = location.pathname.replace(/\/[^/]+$/, '');
    var dojoConfig = {
      parseOnLoad: true,
      packages:[
        {
          name:"esriTemplate",
          location: path_location
        },
        {
          name:"utilities",
          location: path_location + "/javascript"
        },
        {
         name: "templateConfig",
          location: path_location
        }
      ]
    };
  </script>
    <script type="text/javascript" src="//js.arcgis.com/3.13/"></script>
    <script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="javascript/layout.js"></script>
    <script type="text/javascript">

    function init(){
     dojo.require("utilities.app");
     dojo.require("templateConfig.commonConfig");
      var defaults = {
        //The ID for the map from ArcGIS.com
        //webmap for coc login:
    //webmap : "cc6a46cf138d4173bac845d9534320e9",
    //webmap for trplcwh login:
    webmap : "b6a070e9b35d479597dbbd130fade937",
      //The id for the web mapping applciation item that contains configuration info - in most
        //cases this will be null.
        appid:"",
        //Enter a title, if no title is specified, the webmap's title is used.
        title : "Ward Maps",
        //Enter a subtitle, if not specified the ArcGIS.com web map's summary is used
        subtitle : "This is a single story map. The goal is to link each polygon click to open the story map for the ward that was clicked.",
      //Display legend
        legend : "true",
        //specify a proxy url if needed
        proxyurl:"",
        //Modify this to point to your sharing service URL if you are using the portal
        sharingurl :"http://thecityofcalgary.maps.arcgis.com",
        //add default template options. This includes the bing key, sharing url, proxy url,
        //and any service urls (geometry, geocode, print)
        //that may be needed by the template.
        bingmapskey: commonConfig.bingMapsKey,
        helperServices:commonConfig.helperServices
      };
      var app = new utilities.App(defaults);
      app.init().then(function(options){
        initMap(options);
      });
    }
    //show map on load
    dojo.addOnLoad(init);
    </script>
  </head>
      <body class="tundra">
        <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
        gutters="false" style="width:100%; height:100%;">
          <!-- Header Section-->
          <div id="header" dojotype="dijit.layout.ContentPane" region="top">
           <div id="headerText">
              <div id="title"></div>
              <div id="subtitle"></div>
            </div>
            <div id="logoArea">
            </div>
        <div id="header_flourish"></div>
          </div>
          <!-- Map Section -->
          <div id="map" dojotype="dijit.layout.ContentPane" region="center" dir="ltr">
            <div id="legendCon"  dir="ltr">
               <div id="legendToggle"><p id="legTogText"></p></div>
              <div id="legendDiv"></div>
            </div>
            <img id="swipeImg" src="images/swipeStart.png" alt="">
          </div>
        </div>
        <!--Loading Panel-->
        <div id="loadingCon">
      <div id="loadingDialog">
        <div id="loadingHeader"></div>
         <div id="loading"></div>
           <img id="loadingImg" alt="" src="images/progressBar.gif">
         </div>
     </div>
       </body>
  </html>
0 Kudos
ChrisHolmes
Occasional Contributor III

Tried to insert the html from index.html above, but didn't seem to work. Will try again:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=9, IE=10">
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css">

   <script type="text/javascript">
    var path_location = location.pathname.replace(/\/[^/]+$/, '');
    var dojoConfig = {
      parseOnLoad: true,
      packages:[
        {
          name:"esriTemplate",
          location: path_location
        },
        {
          name:"utilities",
          location: path_location + "/javascript"
        },
        {
         name: "templateConfig",
          location: path_location
        }
      ]
    };
  </script>
    <script type="text/javascript" src="//js.arcgis.com/3.13/"></script>
    <script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="javascript/layout.js"></script>
    <script type="text/javascript">

    function init(){
     dojo.require("utilities.app");
     dojo.require("templateConfig.commonConfig");

      var defaults = {
        //The ID for the map from ArcGIS.com
        //webmap for coc login:
    //webmap : "cc6a46cf138d4173bac845d9534320e9",
    //webmap for trplcwh login:
    webmap : "b6a070e9b35d479597dbbd130fade937",
      //The id for the web mapping applciation item that contains configuration info - in most
        //cases this will be null.
        appid:"",
        //Enter a title, if no title is specified, the webmap's title is used.
        title : "Ward Maps",
        //Enter a subtitle, if not specified the ArcGIS.com web map's summary is used
        subtitle : "This is a single story map. The goal is to link each polygon click to open the story map for the ward that was clicked.",
      //Display legend
        legend : "true",
        //specify a proxy url if needed
        proxyurl:"",
        //Modify this to point to your sharing service URL if you are using the portal
        sharingurl :"http://thecityofcalgary.maps.arcgis.com",
        //add default template options. This includes the bing key, sharing url, proxy url,
        //and any service urls (geometry, geocode, print)
        //that may be needed by the template.
        bingmapskey: commonConfig.bingMapsKey,
        helperServices:commonConfig.helperServices
      };
      var app = new utilities.App(defaults);
      app.init().then(function(options){
        initMap(options);
      });
    }

    //show map on load
    dojo.addOnLoad(init);
    </script>
  </head>

      <body class="tundra">
        <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
        gutters="false" style="width:100%; height:100%;">

          <!-- Header Section-->
          <div id="header" dojotype="dijit.layout.ContentPane" region="top">
           <div id="headerText">
              <div id="title"></div>
              <div id="subtitle"></div>
            </div>
            <div id="logoArea">
            </div>
        <div id="header_flourish"></div>

          </div>

          <!-- Map Section -->
          <div id="map" dojotype="dijit.layout.ContentPane" region="center" dir="ltr">
            <div id="legendCon"  dir="ltr">
               <div id="legendToggle"><p id="legTogText"></p></div>
              <div id="legendDiv"></div>
            </div>
            <img id="swipeImg" src="images/swipeStart.png" alt="">
          </div>

        </div>

        <!--Loading Panel-->
        <div id="loadingCon">
      <div id="loadingDialog">
        <div id="loadingHeader"></div>
         <div id="loading"></div>
           <img id="loadingImg" alt="" src="images/progressBar.gif">
         </div>
     </div>

       </body>

  </html>

0 Kudos
JaiSiva1
New Contributor III

I am really sorry , the above mentioned code will work only if you are creating your own application.

Assuming that you are using AGOL with an organisational account, you can set the hyperlink to a specific  layer by the following method while creating the specific web map.

Step 1:

  After adding the respective layer while creating the web map ,

  Select the specific layer and choose configure pop-up

popup1.png

Step 2:

  - Select "A Custom attribute display" under display.

  - click configure      

  popup2.png

Step 3:

- select the hyperlink option.

- set the URL with the specific field ( http://www.yourwebsite.com/{specificField}  )

- set the description , click ok

- Save the Pop-up.

   popup3.png

  Now , your popup will have the specific hyperlink.

0 Kudos
ChrisHolmes
Occasional Contributor III

Hi Jai, thanks for taking the time to reply. So if I`m correct what you`ve outlined above would allow the URL for the selected polygon in the story map to be accessed via the popup? So you would need to click the polygon to display the popup, then click the URL link in the polygon. If this is the case, then is it not possible to modify the code in the template to have the URL open just based on the first polygon click?

Thanks again for your time,

Chris

0 Kudos
StephenSylvia
Esri Regular Contributor

It is technically possible to modify one of the story map templates to allow the function you have stated, however you will need to be pretty familiar with the JavaScript API and web map data structure. That being said, we believe it would be a far better idea to keep the link in the popup. In usability testing, we found that users can get very confused when they click on something in a map and get taken to a new page without any notice. I recommend adding some brief information or at least the name then a link to the site. You could even make a nice looking button in photoshop that say something like “click for more information” which you then add the link to. This is all possible when you configure the popup in the web map viewer. Besides being far easier to accomplish, especially if you are not a developer, it will provide a better user experience.

ChrisHolmes
Occasional Contributor III

Thanks for your insight Stephen. Very good points!

0 Kudos