AnsweredAssumed Answered

How to show a picture from a url in a field for each feature

Question asked by MapManLynnwood on Jan 10, 2017
Latest reply on Jan 10, 2017 by fcbassongis

Hello all,

 

I am having issues showing a picture from a url in a field.   I am trying to show the image when a user clicks on the feature and the infowindow opens.   I can get a link to show up on the infowindow and then if I click on the link the image opens.  I want the picture to open without clicking on the link in the infowindow.  It seems easy when you type the url to the image but when the url is dynamic based on which feature the user clicks it only brings up the hyperlink to the image.

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

<meta name="description" content="[Get started with popups - 4.2]">

 

<title>Get started with popups - 4.2</title>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

#instruction {

z-index: 99;

position: absolute;

top: 15px;

left: 50%;

padding: 5px;

margin-left: -175px;

height: 20px;

width: 350px;

background: rgba(25, 25, 25, 0.8);

color: white;

}

</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">

<script src="https://js.arcgis.com/4.2/"></script>

<script>

require([

"esri/tasks/Locator",

"esri/Map",

"esri/views/MapView",

"esri/layers/FeatureLayer",

"dojo/domReady!"

 

], function(

Locator,

Map,

MapView,

FeatureLayer

) {

  

// Create the Map

var map = new Map({

basemap: "streets-navigation-vector"

});

// Create the MapView

var view = new MapView({

container: "viewDiv",

map: map,

center: [-122.30, 47.83],

zoom: 12

});

var template = {

title: "Lynnwood Traffic Camera",

content: [{

type: "fields",

fieldInfos: [{

fieldName: "html"

}]

}]

//content: "Traffic View: {html}"

};

// City of Lynnwood Traffic Cameras.

var featureLayer = new FeatureLayer({

url: "http://services2.arcgis.com/W2b0jYHWnOivta60/arcgis/rest/services/lynnwood_traffic_cameras/FeatureServer/0",

outFields: ["*"],

popupTemplate: template

});

map.add(featureLayer);

/*******************************************************************

* This click event sets generic content on the popup not tied to

* a layer, graphic, or popupTemplate. The location of the point is

* used as input to a reverse geocode method and the resulting

* address is printed to the popup content.

*******************************************************************/

});

</script>

</head>

<body>

<div id="viewDiv"></div>

<!--<div id="instruction">Click any location on the map to see its street address</div>-->

</body>

</html>

Outcomes