nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Click Feature to Open URL

cwh

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!

Find more posts tagged with

Accepted answers

JaiSiva1

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.

All comments

AaronNepple1

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…

AaronNepple1

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

PhillipSherman1

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.

JaiSiva1

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.

cwh

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>

cwh

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>

cwh

Thanks, I will give this a try.

JaiSiva1

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.

JamesCrandall

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>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.