topic Re: Concatenate two fields in pop up in ArcGIS JavaScript Maps SDK Questions

Concatenate two fields in pop up

KARIMLABIDI — Tue, 14 Feb 2023 10:22:59 GMT

Hello,

I would like concatenate two attributes in pop up. I 'd like to merge these attributes

like that

Thank you for your help!

Re: Concatenate two fields in pop up

Sage_Wall — Tue, 14 Feb 2023 15:09:43 GMT

Hi @KARIMLABIDI ,

The easiest way to do this would be to use an Arcade expression to concatenate the two attribute values:

https://developers.arcgis.com/arcade/function-reference/text_functions/#concatenate

Concatenate([$feature.FIELD1, TextFormatting.NewLine, $feature.FIELD2])

Then use that arcade expression in your popup. There is an sample for using arcade in popups located here: https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-arcade/

Re: Concatenate two fields in pop up

KARIMLABIDI — Wed, 15 Feb 2023 12:35:00 GMT

Thank you @Sage_Wall but it doesn't work. I tried with Concatenate and without this function and nothing happens.

//ARCADE const arcadeExpressionInfos = [ { name: "loca", title: "Localisation", // defined in separate script element expression: `$feature.IDARRET+ TextFormatting.NewLine + $feature.IDARRET" ` }, { name: "Coord", title: img_coord, expression: `function MetersToLatLon(x, y) { // Converts XY point from Spherical Mercator EPSG:900913 to lat/lon in WGS84 Datum // Fuente: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/ var originShift = 2.0 * PI * 6378137.0 / 2.0; var lon = (x / originShift) * 180.0; var lat = (y / originShift) * 180.0; lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0); return [lat, lon]; } var latlon = MetersToLatLon(Geometry($feature).X, Geometry($feature).Y); //var url = CreateWazeURL(latlon[0], latlon[1]); //return round(latlon[0],2)+"-------"+ round(latlon[1],2); var a = 6378137; //demi grand axe de l'ellipsoide (m) var e = 0.08181919106; //première excentricité de l'ellipsoide var l0 = PI /180 * 3 var lc = l0 var phi0 = PI / 180 * 46.5 // latitude d origine en radian var phi1 = PI / 180 * 44 // 1er parallele automécoïque var phi2 = PI / 180 * 49 // 2eme parallele automécoïque var x0 = 700000; //coordonnées à l'origine var y0 = 6600000; //coordonnées à l'origine var long = latlon[0] var lat = latlon[1] var phi = (PI / 180) * long; var l = (PI / 180) * lat; //calcul des grandes normales var gN1 = a / Sqrt(1 - e * e * Sin(phi1) * Sin(phi1)); var gN2 = a / Sqrt(1 - e * e * Sin(phi2) * Sin(phi2)); //calculs des latitudes isométriques var gl1 = Log(Tan(PI / 4 + phi1 / 2) * Pow((1 - e * Sin(phi1)) / (1 + e * Sin(phi1)), e / 2)); var gl2 = Log(Tan(PI / 4 + phi2 / 2) * Pow((1 - e * Sin(phi2)) / (1 + e * Sin(phi2)), e / 2)); var gl0 = Log(Tan(PI / 4 + phi0 / 2) * Pow((1 - e * Sin(phi0)) / (1 + e * Sin(phi0)), e / 2)); var gl = Log(Tan(PI / 4 + phi / 2) * Pow((1 - e * Sin(phi)) / (1 + e * Sin(phi)), e / 2)); //calcul de l'exposant de la projection var n = (Log((gN2 * Cos(phi2)) / (gN1 * Cos(phi1)))) / (gl1 - gl2);//ok //calcul de la constante de projection var c = ((gN1 * Cos(phi1)) / n) * Exp(n * gl1);//ok //calcul des coordonnées var ys = y0 + c * Exp(-1 * n * gl0); var $x = x0 + c * Exp(-1 * n * gl) * Sin(n * (l - lc)); // var y93 = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc)); //var $x= (($c*exp(-$n*($lat_iso)))*sin($n*(latlon[0]-3)/180*PI)+$xs); var $y = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc)); return round($x,2) +TextFormatting.NewLine+ round($y,2)` } ]; //TEMPLATE const template = { // autocasts as new PopupTemplate() title: "{IDARRET} / {NOMARRET} <i>/ {MNLP_HASTUS}</i>", lastEditInfoEnabled : false, content: [ { // It is also possible to set the fieldInfos outside of the content // directly in the popupTemplate. If no fieldInfos is specifically set // in the content, it defaults to whatever may be set within the popupTemplate. type: "fields", fieldInfos: [ { fieldName: "expression/loca", //expression : arcadeExpressionInfos, label: img_adresse, }, { fieldName: "VILLE", label: "Ville", }, { fieldName: "MNLP_HASTUS", label: "MNLP Hastus", }, { fieldName: "expression/Coord", } ], expressionInfos: arcadeExpressionInfos } ], actions: [editPROD,editPROJ1,editPROJ2], };

And on the pop up,

This link helps me https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=popuptemplate-arcade .

I don't know what I missed!

Re: Concatenate two fields in pop up

Sage_Wall — Wed, 15 Feb 2023 14:36:18 GMT

Are you getting any errors in the console by chance? Just looking at the code snippet provided I'm not seeing anything that jumps out as me as being wrong either. You might try simplifying things and seeing if you can get one simple expression to work and then build up from there. One thing I'm not totally sure of is if `fieldInfos` will take the expression with the `Textformatting.NewLine` function in it. You might try removing it as a test.

Is there any way you could send a codepen or some other complete sample that works except for the popup expressions to help debug?

Re: Concatenate two fields in pop up

KARIMLABIDI — Wed, 15 Feb 2023 15:06:56 GMT

I found!!The arcade expressions have to be in the template properties and not out. With your function concatenate it works.

//TEMPLATE const template = { // autocasts as new PopupTemplate() title: "{IDARRET} / {NOMARRET} <i>/ {MNLP_HASTUS}</i>", lastEditInfoEnabled : false, expressionInfos: [{ name: "loca", title: "Localisation", // defined in separate script element expression: `Concatenate([$feature.ADRESSE, TextFormatting.NewLine, $feature.VILLE])` }, { name: "Coord", title: img_coord, expression: `function MetersToLatLon(x, y) { // Converts XY point from Spherical Mercator EPSG:900913 to lat/lon in WGS84 Datum // Fuente: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/ var originShift = 2.0 * PI * 6378137.0 / 2.0; var lon = (x / originShift) * 180.0; var lat = (y / originShift) * 180.0; lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0); return [lat, lon]; } var latlon = MetersToLatLon(Geometry($feature).X, Geometry($feature).Y); //var url = CreateWazeURL(latlon[0], latlon[1]); //return round(latlon[0],2)+"-------"+ round(latlon[1],2); var a = 6378137; //demi grand axe de l'ellipsoide (m) var e = 0.08181919106; //première excentricité de l'ellipsoide var l0 = PI /180 * 3 var lc = l0 var phi0 = PI / 180 * 46.5 // latitude d origine en radian var phi1 = PI / 180 * 44 // 1er parallele automécoïque var phi2 = PI / 180 * 49 // 2eme parallele automécoïque var x0 = 700000; //coordonnées à l'origine var y0 = 6600000; //coordonnées à l'origine var long = latlon[0] var lat = latlon[1] var phi = (PI / 180) * long; var l = (PI / 180) * lat; //calcul des grandes normales var gN1 = a / Sqrt(1 - e * e * Sin(phi1) * Sin(phi1)); var gN2 = a / Sqrt(1 - e * e * Sin(phi2) * Sin(phi2)); //calculs des latitudes isométriques var gl1 = Log(Tan(PI / 4 + phi1 / 2) * Pow((1 - e * Sin(phi1)) / (1 + e * Sin(phi1)), e / 2)); var gl2 = Log(Tan(PI / 4 + phi2 / 2) * Pow((1 - e * Sin(phi2)) / (1 + e * Sin(phi2)), e / 2)); var gl0 = Log(Tan(PI / 4 + phi0 / 2) * Pow((1 - e * Sin(phi0)) / (1 + e * Sin(phi0)), e / 2)); var gl = Log(Tan(PI / 4 + phi / 2) * Pow((1 - e * Sin(phi)) / (1 + e * Sin(phi)), e / 2)); //calcul de l'exposant de la projection var n = (Log((gN2 * Cos(phi2)) / (gN1 * Cos(phi1)))) / (gl1 - gl2);//ok //calcul de la constante de projection var c = ((gN1 * Cos(phi1)) / n) * Exp(n * gl1);//ok //calcul des coordonnées var ys = y0 + c * Exp(-1 * n * gl0); var $x = x0 + c * Exp(-1 * n * gl) * Sin(n * (l - lc)); // var y93 = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc)); //var $x= (($c*exp(-$n*($lat_iso)))*sin($n*(latlon[0]-3)/180*PI)+$xs); var $y = ys - c * Exp(-1 * n * gl) * Cos(n * (l - lc)); return round($x,2) +TextFormatting.NewLine+ round($y,2)` } ], content: [ { // It is also possible to set the fieldInfos outside of the content // directly in the popupTemplate. If no fieldInfos is specifically set // in the content, it defaults to whatever may be set within the popupTemplate. type: "fields", fieldInfos: [ { fieldName: "expression/loca", //expression : "$feature.ADRESSE", label: img_adresse, }, { fieldName: "expression/Coord", } ], } ], actions: [editPROD,editPROJ1,editPROJ2], };

Thank you @Sage_Wall !