topic Re: Click Feature to Open URL in Classic Esri Story Maps Questions

Click Feature to Open URL

ChrisHolmes — Wed, 06 May 2015 21:12:30 GMT

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!

Re: Click Feature to Open URL

JamesCrandall — Wed, 06 May 2015 21:18:50 GMT

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>

Re: Click Feature to Open URL

JaiSiva1 — Sun, 12 Dec 2021 01:05:15 GMT

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.

Re: Click Feature to Open URL

ChrisHolmes — Thu, 07 May 2015 14:32:01 GMT

Thanks, I will give this a try.

Re: Click Feature to Open URL

ChrisHolmes — Sun, 12 Dec 2021 01:05:18 GMT

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>

Re: Click Feature to Open URL

ChrisHolmes — Thu, 07 May 2015 20:00:07 GMT

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

    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>

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

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

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

Re: Click Feature to Open URL

JaiSiva1 — Fri, 08 May 2015 06:32:49 GMT

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

Step 2:

- Select "A Custom attribute display" under display.

- click configure

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.

Now , your popup will have the specific hyperlink.

Re: Click Feature to Open URL

ChrisHolmes — Fri, 08 May 2015 15:19:08 GMT

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

Re: Click Feature to Open URL

StephenSylvia — Fri, 08 May 2015 15:47:41 GMT

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.

Re: Click Feature to Open URL

ChrisHolmes — Fri, 08 May 2015 17:46:00 GMT

Thanks for your insight Stephen. Very good points!

Re: Click Feature to Open URL

PhillipSherman1 — Fri, 21 Apr 2017 16:37:18 GMT

Do you know if it’s possible to add interactive arrows in ArcGIS Online web maps/apps? We have multiple facilities that accept different recyclable materials and our idea was to show an overview web map and have the arrows be clickable and interactive so that when a user clicks an arrow it takes them to a specific facility within the same app/map and so they can see the flow of materials from our county to the different locations.

Re: Click Feature to Open URL

AaronNepple1 — Sun, 08 Oct 2017 23:59:11 GMT

Jai Siva‌ Thank you. This code worked perfectly for me. #javascript api 3.x

Does anyone know how to make the feature label a hyperlink as well?

-Aaron

Re: Click Feature to Open URL

AaronNepple1 — Tue, 10 Oct 2017 14:54:29 GMT

If anyone is still having issues with the labels not being clickable, Robert Scheitlin, GISP‌ outlined a fix in this thread:

https://community.esri.com/message/720934-re-workaround-to-ignore-a-label-layer-when-click?commentID=720934&et=watches.e…

Re: Click Feature to Open URL

MarquesMunson1 — Tue, 16 Jul 2019 12:58:28 GMT

I am trying this code for point features I have in an application I am building with JS 4.12.

//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);
});

How would this code work for a feature layer where the link is in the attribute field. I have it in a field called Link. Right now I have it shown below but it is not working.

//Code for the specific URL to open in a new window
featureLayer.on('click',function(e){
var specific = e.graphic.attributes['Link']
window.open(specific);
});