topic Resize image in popup in ArcGIS JavaScript Maps SDK Questions

Resize image in popup

RoxanneWilson — Thu, 12 May 2016 17:25:42 GMT

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("Location: ${Name} " +

"DVR: ${DVR} " +

"IP Address: ${IPaddress} " +

"Year Installed: ${YearInst} " +

"Make: ${Make} " +

"Model: ${Model} " +

"Comments: ${Comments} " +

"Camera: Click image to see live feed <a target = '${HTMLlink}' href=${HTMLlink} </a> <img src= https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/images/115334main_image_feature_329_ys_full.jpg?itok=5fCNhx13 </a> ") ;

Re: Resize image in popup

RickeyFight — Thu, 12 May 2016 17:41:06 GMT

This is how I do that:

Re: Resize image in popup

RoxanneWilson — Thu, 12 May 2016 17:46:47 GMT

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.

Re: Resize image in popup

RickeyFight — Thu, 12 May 2016 18:16:27 GMT

Yes change height or width to auto:

WIDTH=150 HEIGHT=Auto

This will keep the ratio of the image.

Re: Resize image in popup

RobertScheitlin__GISP — Thu, 12 May 2016 18:42:55 GMT

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;

}));

});

Re: Resize image in popup

DavidMc_Laughlin — Fri, 24 May 2024 11:14:45 GMT

Has anyone tried this within the configure Pop-ups dialog in the new map viewer?