Link to Popup

2243
35
Jump to solution
11-30-2018 10:33 AM
jaykapalczynski
Frequent Contributor

I have an info template returning a link.  

Right now with I click on it it opens to a new browser tab (_blank)

Looking for 2 options.  

1. Display this in a DIV

2. Pop this up into a new floating popup 

Any ideas

var infoHighwayCameras = new InfoTemplate();
     infoHighwayCameras.setTitle("Highway Cameras");        
     infoHighwayCameras.setContent("<table>" +
     "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
     "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
     "<tr><td></td><td></td></tr>" +
     "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>For Camera Image <a href='${image_url}' target='_blank'><font color='0x84CCDA'>click here</font></a>."+     
     "</table><hr>");     
0 Kudos
35 Replies
jaykapalczynski
Frequent Contributor

Yea they have a Service

This service has a bunch of features in it.

Each feature has a field called image_url

This URL will NOT change...it will reference the SAME .png file every time.  

See Below

This is how I think they do it.

  1. The database value for this field stays constant including the name of the image.
  2. The image is simply replaced on their server in the "thumbs" folder with a new image every few seconds via an upload from the cameras in the field.

I just cant get the InfoTemplate to refresh with the new image.

0 Kudos
jaykapalczynski
Frequent Contributor

If you click this link you can see that the popup image is replaced... takes about 5-10 seconds for a new image to be taken.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Jay,

  OK this is what I got working on my end:

    var infoHighwayCameras = new InfoTemplate();
    infoHighwayCameras.setTitle("Highway Cameras");
    infoHighwayCameras.setContent(getTextContent);

    function getTextContent(graphic) {
      return "<table>" +
        "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
        "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
        "<tr><td></td><td></td></tr>" +
        "<tr><td id='tblMainline1'>description</td><td id='tblSubline2'> " + graphic.attributes.descriptio + " </td></tr>" +
        "<tr><td id='tblSubline2' colspan='2'><img src= " + graphic.attributes.image_url + "?t=" + new Date().getTime() + " /></td></tr>" +
        //Notice my little time stamp change to the url above
        "</table><hr>";
    }

    function onLayerUpdateEnd(){
      //when the layer is refereshed if the popup has a selected feature then
      //force the popup to get the content again
      if(map.infoWindow.count > 0){
        var graphic = map.infoWindow.getSelectedFeature();
        map.infoWindow.setFeatures([graphic]);
      }
    }

    var HighwayCameras = new FeatureLayer("https://services.arcgis.com/DO4gTjwJVIJ7O9Ca/arcgis/rest/services/Camera_Location_VDOT/FeatureServer...", {
      mode: FeatureLayer.MODE_ONDEMAND,
      visible: true,
      opacity: .5,
      outFields: ["*"],
      infoTemplate: infoHighwayCameras,
      refreshInterval: 0.1
    });
    legendLayers3.push({
      layer: HighwayCameras,
      title: 'Highway Cameras'
    });

    HighwayCameras.on('update-end', onLayerUpdateEnd);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
jaykapalczynski
Frequent Contributor

I put this code in and I get an error:  Uncaught SyntaxError: Unexpected token if

var infoHighwayCameras = new InfoTemplate();
     infoHighwayCameras.setTitle("Highway Cameras");          
     infoHighwayCameras.setContent(getTextContent);
     function getTextContent(graphic) {
          return "<table>" +
          "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
          "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
          "<tr><td></td><td></td></tr>" +
          "<tr><td id='tblMainline1'>description</td><td id='tblSubline2'> " + graphic.attributes.descriptio + " </td></tr>" +
          "<tr><td id='tblSubline2' colspan='2'><img src= " + graphic.attributes.image_url + "?t=" + new Date().getTime() + " /></td></tr>" +
                    //Notice my little time stamp change to the url above
                    "</table><hr>";
     }

     function onLayerUpdateEnd()
     //when the layer is refereshed if the popup has a selected feature then
     //force the popup to get the content again
          if(map.infoWindow.count > 0){
          var graphic = map.infoWindow.getSelectedFeature();
          map.infoWindow.setFeatures([graphic]);
          }
          }

var HighwayCameras = new FeatureLayer("https://services.arcgis.com/DO4gTjwJVIJ7O9Ca/arcgis/rest/services/Camera_Location_VDOT/FeatureServer...", {
     mode: FeatureLayer.MODE_ONDEMAND,
     visible: true,
     opacity: .5,
     outFields: ["*"],
     infoTemplate: infoHighwayCameras,
     refreshInterval: 0.1
        });
legendLayers3.push({
     layer: HighwayCameras,
     title: 'Highway Cameras'
     });
          
HighwayCameras.on('update-end', onLayerUpdateEnd);
0 Kudos
jaykapalczynski
Frequent Contributor

Think I got it...  function onLayerUpdateEnd(){     missing the { on the Function

Testin now

0 Kudos
jaykapalczynski
Frequent Contributor

Thats it....yes the image refreshed automatically.....GREAT....thanks for your help so very appreciated.

0 Kudos