I'm creating my first web app based on the javascript API. I'm creating a custom popup that has an image that when clicked on takes you to a specified link. I've got the popup setup complete, with the exception of the image size. I can't figure out where the resizing information gets placed. Below is popup code.
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("${FacilityID}");
infoTemplate.setContent("<b>Location: </b>${Name}<br/>" +
"<b>DVR: </b>${DVR}<br/>" +
"<b>IP Address: </b>${IPaddress}<br/>" +
"<b>Year Installed: </b>${YearInst}<br/>" +
"<b>Make: </b>${Make}<br/>" +
"<b>Model: </b>${Model}<br/>" +
"<b>Comments: </b>${Comments} <br/>" +
"<b>Camera: </b> Click image to see live feed <br/> <br/> <a target = '${HTMLlink}' href=${HTMLlink} </a> <img src= https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/images/115334main_image_... </a> <br/>") ;
Solved! Go to Solution.
This is how I do that:
<a href=http://gis.ashland.or.us/cemetery/${Photo_loc} target='_blank'> <img src=${Photo_loc} WIDTH=150 HEIGHT=150></a> <br/>
This is how I do that:
<a href=http://gis.ashland.or.us/cemetery/${Photo_loc} target='_blank'> <img src=${Photo_loc} WIDTH=150 HEIGHT=150></a> <br/>
That worked!
Do you know if there is a way to resize to maintain proportion? At this point, I'm not sure if each image will be at the same resolution size.
Yes change height or width to auto:
WIDTH=150 HEIGHT=Auto
This will keep the ratio of the image.
Roxanne,
I would use a function to set the content that way you can calculate the size for width and height in the JS code to maintain aspect ratio.
require(['dojo/Deferred', 'dojo/_base/lang'], function(Deferred, lang){
function getMeta(url){
var def = new Deffered();
var img = new Image();
img.onload = function(){
def.resolve({width: this.width, height: this.height});
};
img.src = url;
return def;
}
var imgSize;
getMeta("your image url").then( lang.hitch(this, function(value){
imgSize = value;
var imgWidth = 150;
var imgHeight = (150/imgSize.width) * imgSize.height;
}));
});
Has anyone tried this within the configure Pop-ups dialog in the new map viewer?