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

Identify ??? Popup sample: Customize for hyperlink

JanBenson

I am trying to customize the Identify �?? Popup sample (under Find and Identify) from samples at http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm?Legend such that a hyperlink is enabled from the field name. At present the hyperlink appears in the window, but it is not clickable. I would like to instead have an alias name for the hyperlink. When a user clicks on the name the hyperlink is activated.   In the function executeIdentifyTask (evt) { there is an else if statement

else if (result.layerName === 'Building Footprints'){
              var template = new esri.InfoTemplate("", "Parcel ID: ${PARCELID}");
              feature.setInfoTemplate(template);

I am presuming PARCELID if the field name. How would I make PARCELID as a clickable hyperlink? Is there a way to put an alias name on PARCELID so the user would see somethink like URL or Link that would be clickable?

Thanks for any suggestions.

Vind meer berichten getagd met

Accepted answers

All comments

BulbulMajumder1

Kelly Hutchins now it works in this way....I watched your Making Popups video...It helped.

var template = { // autocasts as new PopupTemplate()
title: "SNaP Record {SampleId}",
content: "<table>" + "<tr valign='top'><td style='white-space:nowrap;'>Sample Name</td><td>{SampleName}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Report</td><td><a target='_newwellwin' href='http://data.mbmg.mtech.edu/proppant/Report.asp?SampleId=${SampleId}&reqby=M&'>View</a></td></tr>" +
"<tr><td style='white-space:nowrap;'>Elevation</td><td style='white-space:nowrap;'>{Elevation}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>{Township} {Range} {Section} {QSection}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Lat/Long</td><td>{Latitude}, {Longitude}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Sampled?</td><td>{SampleTaken}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Sample Date</td><td>{SampleDate}</td></tr>" +
"</table>"
};

Thank you for your elaborate Video demonstration.
Regards
Bulbul

BulbulMajumder1

@Kelly can you help me please why this is not working ? Adding hyperlink in popup template for JS API 4.8

{
fieldName: "Report",
label: "Report",
Link :"href='http://data.mbmg.mtech.edu/proppant/Report.asp?SampleId=${SampleId}&reqby=M&'",
visible: true
},

adrian.marsden_DevonCC

This may help. I have my site that is Independent of script for the ID popup. It cycles the layers and builds up the template from all exposed field aliases.

I also get a "more Info" hyperlink, based on the contents of a particular field - this is defined in the layer description in the MXD

You'll see a working example here http://maps2.eastdevon.gov.uk/mapping/assets/ you'll need to go the Planning & Policy group in the TOC (Key and other maps accordion) and select current planning applications to see the "more Info" link in action

ACM

PS just looked at that, and I really must change that layers symbology, I can hardly see it! This extent has a few examples as of today http://maps2.eastdevon.gov.uk/mapping/assets/?x1=311112&y1=87627&x2=311789&y2=88262

ChrisBrannin

I am a newbi here with javascript. I am asking for some help with adding multiple featurelayers that connect to a legend, can be toggled on and off and all have popups. I am using this code but it doesn't seem to work with the legend and checkbox dijit. Any help would be greatly appreciated!

var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{Building} {Type}",
          fieldInfos: [
          {fieldName: "Building", visible: true, label:"Building Name:"},
          {fieldName: "Descrip", visible:true, label:"Info:"},
          ],

  mediaInfos: [
    {
      "type":"image",
      "value":{
          "sourceURL":"{Images}",
          "linkURL":"{Hyperlink}"
    }
    }] 
          
        });
 
        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://webgis.uwm.edu/ArcGISUWM/rest/services/Sustain1/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: popupTemplate,
          outFields: ['Type','Building','Descrip','Images','Hyperlink']
        });
        featureLayer.setDefinitionExpression("Type != ''");
      
        dojo.connect(featureLayer,"onClick",function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
        });
       
       
        map.addLayer(featureLayer);

JanBenson

Kelly,

Thanks so much for your suggestion. I got it to work and am now am ready to move to the next step. I did this by using a series of if statements to process the multiple layers. It looks like this:
            if(result.layerName === 'AllPoints'){
     var template = new esri.InfoTemplate();
              template.setTitle("Name");
              template.setContent(getWindowContent);
              feature.setInfoTemplate(template);
            }
            else if (result.layerName === 'FishCommunitiesProfile'){
              var template = new esri.InfoTemplate();
              template.setTitle("Name");
              template.setContent(getWindowContent);
              feature.setInfoTemplate(template);

Then I have the function as follows:
       function getWindowContent(graphic){
   var content = "Name: " + graphic.attributes.Name + "<br>" + "<a href='" + graphic.attributes.Link + "'>URL Link</a>";
         return content;
      }

It is working nicely. I really do appreciate the help.

Cheers,

IdentifyPopUp2.jpg

khutchins

Jan,

When you create the template for the popup you can define a function that will be used to create and format the content. So in this snippet instead of setting the content when you create the info template you specify the name of a function in setContent. In this example the function is called getWindowContent.

   
var template = new esri.InfoTemplate();
    template.setTitle("Advisories");
    template.setContent(getWindowContent);
    // var template = new esri.InfoTemplate("", "Parcel ID: ${PARCELID}");
    feature.setInfoTemplate(template);
  }

In the getWindowContent function you are provided the graphic that was just clicked. You can then access the graphic's attributes and build the hyperlink.

      function getWindowContent(graphic){
        var content = "<a href='" + graphic.attributes.WEB + "'>Click here for more info</a>";
        return content;
      }

Here's a working sample:

http://jsfiddle.net/bTZwR/2/

JanBenson

Jeff,

Thanks for the reply. Will esri.dijit.PopupTemplate cycle through multiple found items or are you limited to one theme? I have multiple layers I want the identify to act upon. The Identify-Popup sample I found lets you use multiple layers through an if statement. The popup window has an arrow to cycle through the items found at the identified location. In the sample I am using (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm) under Find and Identify, Identify-Popup, esri.dijit.Popup is used as opposed to esri.dijit.PopupTemplate. It is working great except for the hyperlink. I hope it is a formatting problem combined with my lack of knowledge in this area.

Thanks!

JeffPace1

you are using esri.InfoTemplate

you need to use esri.dijit.PopupTemplate as per the example above

JanBenson

Kelly,

Thanks for your reply. I saw your popup sample, but it uses a single feature layer. In my map I will have points, lines, and polygon features. The Identify-Popup allows for multiple features. When I adapted the sample to my data, the hyperlink appears are regular text instead of a hyperlink (see IdentifyPopup.jpg). I listed some of my code below. I think the trick is to configure the InfoTemplate (var template = new esri.InfoTemplate("", "${Name} <br/> URL: ${Link}"); ) for my hyperlink. I just donï¿½??t know how to make it work.

    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.DropDownButton");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Bookmarks");
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      dojo.require("esri.dijit.Popup");

      var map, bookmarks;
var resizeTimer;
      var identifyTask,identifyParams;

      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-23034069,"ymin":5700229,"xmax":-14357334,"ymax":13000000,"spatialReference":{"wkid":102100}});

   //setup the popup window
        var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));

          map = new esri.Map("map", {
          infoWindow : popup, wrapAround180: true,extent: initialExtent
        }) ;

        // Resize the map when the browser resizes
        dojo.connect(map, 'onLoad', function() {
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });

     dojo.connect(map,"onLoad",mapReady);

        var url = "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
        map.addLayer(tiledLayer);
var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://xyz/arcgis/rest/services/WebDemo101C/MapServer");
map.addLayer(operationalLayer);

        // Bookmarks can be specified as an array of objects with the structure:
        // { extent: <esri.geometry.Extent>, name: <some string> }
        var bookmarks = [{
          "extent": {
            "spatialReference": {
                "wkid": 102100
            },
            "xmin":-20300897,
            "ymin":9822391,
            "xmax":-15056706,
            "ymax":13344609
          },
          "name": "Arctic"
        }];

        // Create the bookmark widget
        bookmarks = new esri.dijit.Bookmarks({
          map: map,
          bookmarks: bookmarks
        }, dojo.byId('bookmarks'));
      }

function mapReady(map){

       dojo.connect(map,"onClick",executeIdentifyTask);

       //create identify tasks and setup parameters
       identifyTask = new esri.tasks.IdentifyTask("http://localhost:6080/arcgis/rest/services/WebDemo101C/MapServer");

       identifyParams = new esri.tasks.IdentifyParameters();
       identifyParams.tolerance = 3;
       identifyParams.returnGeometry = true;
       identifyParams.layerIds = [0,1,2,3,4];
       identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
       identifyParams.width = map.width;
       identifyParams.height = map.height;


       //resize the map when the browser resizes
       dojo.connect(dijit.byId('map'), 'resize', map,map.resize);

      }

   function executeIdentifyTask(evt) {
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;

        var deferred = identifyTask.execute(identifyParams);

        deferred.addCallback(function(response) {
          // response is an array of identify result objects
          // Let's return an array of features.
          return dojo.map(response, function(result) {
            var feature = result.feature;
            feature.attributes.layerName = result.layerName;
            if(result.layerName === 'AllPoints'){
              console.log(feature.attributes.Name);
              var template = new esri.InfoTemplate("", "${Name} <br/> URL: ${Link}");
              feature.setInfoTemplate(template);
            }
            else if (result.layerName === 'FishCommunitiesProfile'){
              var template = new esri.InfoTemplate("", "${Name} <br/> URL: ${Link}");
              feature.setInfoTemplate(template);
            }
            return feature;
          });
        });


        // InfoWindow expects an array of features from each deferred
        // object that you pass. If the response from the task execution
        // above is not an array of features, then you need to add a callback
        // like the one above to post-process the response and return an
        // array of features.
        map.infoWindow.setFeatures([ deferred ]);
        map.infoWindow.show(evt.mapPoint);
      }
      //show map on load
      dojo.ready(init);
    </script>

IdentifyPopUp.jpg

khutchins

If the field contains a url you should just have to specify the field name when you define the popup template. For example in the code below a field named WEB contains a hyperlink.

        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{EVENT}",
          fieldInfos: [
          {fieldName: "EFFECTIVE", visible: true, label:"Effective"},
          {fieldName: "WEB", visible:true, label:"Link"}
          ],
          showAttachments:false
        });
  
        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_weat/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate: popupTemplate,
          outFields: ['*']
        });

When you view the popup you'll see a clickable link that says 'More Info' and takes you to the url defined in the WEB field. Here's a link so you can see this in action:
http://jsfiddle.net/khutchins/bTZwR/

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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