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

2941
1
Jump to solution
01-10-2017 03:24 PM
MattTenold2
New Contributor II

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/FeatureSe...",

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>

0 Kudos
1 Solution

Accepted Solutions
FC_Basson
MVP Regular Contributor

In your popup template content you need to make the html field value part of a valid HTML img element and not just echo the html field value e.g.

<img src="{html}" alt="">

Also have a look at the media options for popups: PopupTemplate | API Reference | ArcGIS API for JavaScript 4.2 

View solution in original post

1 Reply
FC_Basson
MVP Regular Contributor

In your popup template content you need to make the html field value part of a valid HTML img element and not just echo the html field value e.g.

<img src="{html}" alt="">

Also have a look at the media options for popups: PopupTemplate | API Reference | ArcGIS API for JavaScript 4.2