Good way to move/hide measurement line labels in 4.5/2.6?
Does anyone have a recommendation for moving the new labels for measurement lines? Specifically the total distance box. It displays right over the end of the line? And if the line is small enough, it displays over the entire line.
Example:
I do like the labels, but they may need to be more responsive to the size of the line as well as the final length off the end of the line like it was in 4.4:
For now, I'm working on a button to show/hide the div "Drawings_measurement_layer".
0
-
Hello, Did you find a way to get this working? I have managed to create a button to show/hide drawings, but I could not hide the measurement labels. Thanks! 0 -
Good afternoon,
I did in fact find a way to hide/show the measurement labels as well as offset the total measurement label to see the end of the line. I altered some Latitude code in Mapping.js to do the offset, but created a simple module that I added to the measurement line transient toolbar with snapping.
I have created a zip file with the instructions, code, and typescript that you can download here: http://gis.miottawa.org/files/geocortex/hideshowLbls.zip
If you want to see how it works, go here: https://gis.miottawa.org/ottawa/geocortex/propertymapping
Hope this helps. First time posting custom module, so please let me know if the instructions work (and are understandable)
Marshall0 -
That's great Marshall! Do you mind if we add your code to our Code Gallery for others to try and use?
Regards,
Wayne Richard
Latitude Geographics Group Ltd.
Head Office: 300 – 1117 Wharf Street Victoria, BC Canada V8W 1T7
Tel: (250) 381-8130 | Fax: (250) 381-8132 | wrichard@latitudegeo.com
Developers of Geocortex web-based mapping software | www.geocortex.com
An Esri Platinum Business Partner0 -
Sure thing, I didn't know if you wanted it in there with the edit to the Mapping.js that I did for the offset. But yeah, I'm fine with you adding it to the code gallery.
Marshall0 -
Thanks Marshall! I was hesitant to modify any code, but I'm glad you work it out. 0 -
An excellent solution to measurement labels, Marshall! Thanks so much for sharing that.
What I'm interested in now is enabling the user to hide just the segment length labels, or just the total length label, because as it stands, it's all or none. I took a look at custom.js, but couldn't tell from that whether there'd be a way to interact with the total label apart from the segment length. Have you considered that?0 -
Marshall,
The code modification you changed in the mapping.js file will display fine in the Viewer but when the map is exported to a pdf, the black box moves but the text stays put. See attached image for an example. Any ideas on how to fix this?
0 -
Justin, that is a great question. I'm sure there is a solution for it and when things calm down a little here I'll take a look. The tough part is that each measurement (including the final) is part of the same graphic layer so for me it was easier to just hide/show that layer.
Nelson, great catch! Always seems as much testing as I do, I skip something simple like that. I'll take a look at that as soon as I can and get an update if possible. Interesting that when you export the map (print it) it moves the text but not the polygon...0 -
not the most elegant solution for the text movement of the total measurement label. But in Essentials.js, look for b.adjustTextSymbl=function(a,b) and just before the statement 'return d', towards the end of the function, add 'if(d.text.indexOf("Total:") !==-1)d.yoffset=-7;' b.adjustTextSymbol = function(a, b) { if (a && a.symbol instanceof esri.symbol.TextSymbol) { var c = function(a, b) { b.font.size = void 0 != a.font.size && "number" === typeof a.font.size ? Math.round(a.font.size) + "px" : a.font.size; b.x = a.x; b.y = a.y; b.xoffset = a.xoffset; b.yoffset = a.yoffset; b.align = a.align; b.angle = a.angle; b.color.hasOwnProperty("a") && (b.color.a = 0 <= a.color.a && 1 >= a.color.a ? 255 * a.color.a : a.color.a) }, d = new esri.symbol.TextSymbol(a.symbol.toJson()); d.color = new esri.Color({ r: a.symbol.color.r, g: a.symbol.color.g, b: a.symbol.color.b, a: a.symbol.color.a }); c(a.symbol, d); if (d.toJson && "function" === typeof d.toJson) { var f = d.toJson; d.toJson = function() { var a = f.call(d); c(d, a); return a } } var l = null, k = null; if (b) { var q = document.getElementById(b + "_layer"), p = null, p = document.createElementNS("http://www.w3.org/2000/svg", "text"); p.setAttributeNS(null, "font-size", d.font.size); p.setAttributeNS(null, "font-family", d.font.family); p.setAttributeNS(null, "visibility", "hidden"); p.textContent = d.text; q.appendChild(p); var r = p.getBBox(), k = null === k ? r.height : k, l = null === l ? p.getComputedTextLength() : l } else { q = document.body; p = document.createElement("div"); l = { fontFamily: d.font.family, fontSize: d.font.size, fontWeight: d.font.weight, padding: "0", position: "absolute", lineHeight: "1", visibility: "hidden" }; for (r in l) p.style[r] = l[r]; p.appendChild(document.createTextNode(d.text)); q.appendChild(p); l = p.clientWidth; k = p.clientHeight } q.removeChild(p); d.xoffset = 0 === d.angle ? d.xoffset : 0; d.yoffset = 0 === d.angle ? d.yoffset : 0; if ((a.measurementId || a.coordinateId) && a.attributes && a.attributes.numberOfLines) d.xoffset = a.measurementId ? -(l / 2 + k / 4) : -(l / 4 + k / 2), d.yoffset = a.attributes.numberOfLines && 1 == a.attributes.numberOfLines ? k / 2 : d.yoffset, "start" == d.verticalAlignment && a.attributes.numberOfLines && 1 < a.attributes.numberOfLines && (d.yoffset = d.yoffset - 0.5 * k / 2 + k * a.attributes.numberOfLines / 2); else { switch (d.verticalAlignment) { case "top": break; case "middle": d.yoffset += k / 2; break; default: d.yoffset += 0.75 * k } a.attributes && a.attributes.customVerticalAlignment && "middle" === a.attributes.customVerticalAlignment && (d.xoffset = 0, d.yoffset = 0, d.yoffset += Math.ceil(k / 2)); if (q = d.horizontalAlignment || d.align || null) switch (q) { case esri.symbol.TextSymbol.ALIGN_MIDDLE: case "center": case "justify": d.xoffset -= Math.ceil(l / 2); a.coordinateId || (d.xoffset -= Math.ceil(k / 4)); break; case esri.symbol.TextSymbol.ALIGN_END: case "right": d.xoffset -= l } } if (d.text.indexOf("Total:") !== -1) d.yoffset = -7; return d } return null };0 -
Thank you Marshall! This worked great!
I put the offset in the Mapping.js file to -30 so my yoffset in the code above for the Essentials.js file is -23.
Thank you for getting a fix out there so quickly!0 -
Marshall, thanks for both tips!! 0 -
Marshall, I've got a site I created that uses the same GVH as the one on which I successfully implemented your label offsets. Trouble I noticed just today is that its measurement tool will draw lines just fine, but it draws no labels.
Suspecting maybe the offset adjustment was not properly implemented for this site--and hence to blame--and believing the Mapping.js to be the same as that for the site that does measurement label offsets properly, I made the required edits to Desktop.json.js of the faulty site. But this made no difference, because it simply added a toggle for labels that aren't available.
Now perhaps the missing label problem has nothing at all to do with the label offset I successfully made on the original site, but I'm interested to learn of any suggestions you (or anyone) might have for correcting this problem.
Thanks,
Justin0 -
I've answered my own question. After adding the geometry Service URL to the troublesome site after noticing it was blank, the labels appeared on the measurement lines. 0 -
Marshall,
We want to hide segment labels and boxes while using the measurement tools meanwhile keep the total result label and box. Do you know if we can do it or not? If yes, how??
Your help is highly appreciated!!
Qiaomei0 -
Thank you, Marshall. I'll definitely be trying this out The measurement tools sure could use some help! I do wish we could turn off individual pieces of the labels. If the user is only drawing one line, it gets labeled twice - - one for the segment and then again for the total length. That's a bit redundant. With polygons, the perimeter lengths are not always needed either. Users also miss the ability to choose whether or not to have the measurement ouput persist as a graphic or disappear when they are done measuring. 0 -
Thank you Marshall, I was able to implement this very useful function with your code and instructions. Much appreciated. Wendy 0 -
Hi Marshall,
This thread made me look good today in enabling me to correct the black box mis-positioning problem on print output (as posted by Nelson Dobbs) within moments of the user noting the problem to me this morning. I had spotted this thread yesterday and it was fresh in mind. So thank you!
To my issue today: a different user has recently asked for the ability to label only the segment lengths (i.e. to optionally stop the measurement totals from appearing). In your September 20 post when I first asked about this, you said "the tough part is that each measurement (including the final) is part of the same graphic layer so for me it was easier to just hide/show that layer."
This makes me wonder if it be possible to set the measurement total to nothing when it's being set for display on the map. Or maybe reposition it beyond the map extent, so long as the scale would remain intact.
I don't know if a toolbar button could be added to implement this or how to instigate it from a UI perspective. Any chance things have "calmed down" for you by now? :)
Thanks,
Justin0 -
Hi Marshall,
I had implemented this in 4.5/2.6 and it was working wonderfully! Thank you for that. Since upgrading to the latest version of Essentials and HTML5 Viewer, it seems my viewer is tripping up loading based on this information from hitting F12:
Error: scriptError
Stack trace:
f@https://[servername]/Html5Viewer2_8/Resources/Scripts/esri.js:11:382
m.injectUrl/h<@https://[servername]/Html5Viewer2_8/Resources/Scripts/esri.js:36:210
esri.js:37:495
src: dojoLoader esri.js:38:36
info: Array [ "Resources/Compiled/showHideLabels.js", error ]0 -
Hi Stephanie,
Custom modules need a little work to make them compatible with 2.8. Please take a look at the following KBA (https://support.geocortex.com/essentialsGSCkba?sub-nav=kba&main-nav=essentials&/feedtype=SINGLE_ARTICLE_DETAIL&criteria=BESTANSWERS&id=kA360000000PPcMCAW) for guidance on that. Looking at the module's README file, I think you need to add the Mapping/modules/Measurement/MeasurementView namespace.
If you need some assistance getting it working, please open a support case so we can assist you!
Thanks,
Danny0 -
Hey Marshall,
Great additions to the functionality. To move the "Area..." labeling for nonlinear geometries , I made an addition to your code for Essentials.js below:
if ((d.text.indexOf("Total:") !== -1) || (d.text.indexOf("Area:") !== -1)) d.yoffset = -7 .
This moves the Area and Perimeter text when printing. Thanks again for sharing.
Regards,
Frank0 -
Thanks for creating this solution Marshall!
Stephanie, were you able to get it to work? I'm also getting a showHideLabels.js error. I've added a "require": "Mapping/modules/Measurement/MeasurementView" statement for 2.8, however it's still not working.0 -
Chelsea, from my pespective, being able to correct the measurement label position was more important than toggling the labels on and off. With help from Amanda at Latitude support I learned how to correct the measurement label position in 2.8.x.
So instead of the changes you had to make to Mapping.js, you need to edit Measurement.js (default location
"C:\inetpub\wwwroot\Html5Viewer\Resources\Compiled\Measurement.js")
Open Measurement.js and search for
e.highlightedLabelGraphic=i.addHighlightedLabelToMap(e.labelStr,a,e.id,p.MEASUREMENT_LAYER_ID,this.app,!1,this._textOffset,this._textOffset,"Arial",this._textSize,
when you find it, replace the second this._textOffset with -15
To stop the errors on viewer load, you need to undo the changes made from Marshall's instructions to Desktop.json.js
I also learned through Amanda the measurement label placement problem has been filed as bug GVH-13409 for labels obscuring their lines. There is also an improvement filed for out-of-the-box measurement label toggling (GVH-15168). I don't know when to expect these, but it's good to know they're coming.
Regards,Justin
0 -
When printing or exporting the map with GVH 2.8 you will want to update how the label is offset there as well. As mentioned by Marshall on September 20th, 2016 you will need to edit one more file. This file is now the "C:\inetpub\wwwroot\Html5Viewer\Resources\Compiled\Essentials.bundle.js" file. Search for e.adjustTextSymbol = function (e, t) and just before the 'return r' you will want to enter in' if (r.text.indexOf("Total:") !== -1) r.yoffset = -7; ' return e.adjustTextSymbol = function (e, t) { if (e && e.symbol instanceof esri.symbol.TextSymbol) { var i = function (e, t) { t.font.size = void 0 != e.font.size && "number" == typeof e.font.size ? Math.round(e.font.size) + "px" : e.font.size, t.x = e.x, t.y = e.y, t.xoffset = e.xoffset, t.yoffset = e.yoffset, t.align = e.align, t.angle = e.angle, t.color.hasOwnProperty("a") && (t.color.a = e.color.a >= 0 && e.color.a <= 1 ? 255 * e.color.a : e.color.a) }, r = new esri.symbol.TextSymbol(e.symbol.toJson()); if (r.color = new esri.Color({ r : e.symbol.color.r, g : e.symbol.color.g, b : e.symbol.color.b, a : e.symbol.color.a }), i(e.symbol, r), r.toJson && "function" == typeof r.toJson) { var n = r.toJson; r.toJson = function () { var e = n.call(r); return i(r, e), e } } var s = null, a = null; if (t) { var o = document.getElementById(t + "_layer"), l = null; l = document.createElementNS("http://www.w3.org/2000/svg", "text"), l.setAttributeNS(null, "font-size", r.font.size.toString()), l.setAttributeNS(null, "font-family", r.font.family), l.setAttributeNS(null, "visibility", "hidden"), l.textContent = r.text, o.appendChild(l); var c = l.getBBox(); a = null === a ? c.height : a, s = null === s ? l.getComputedTextLength() : s, o.removeChild(l) } else { var u = document.body, p = document.createElement("div"), h = { fontFamily : r.font.family, fontSize : r.font.size, fontWeight : r.font.weight, padding : "0", position : "absolute", lineHeight : "1", visibility : "hidden" }; for (var d in h) p.style[d] = h[d]; p.appendChild(document.createTextNode(r.text)), u.appendChild(p), s = p.clientWidth, a = p.clientHeight, u.removeChild(p) } if (r.xoffset = 0 === r.angle ? r.xoffset : 0, r.yoffset = 0 === r.angle ? r.yoffset : 0, (e.measurementId || e.coordinateId) && e.attributes && e.attributes.numberOfLines) { if (e.measurementId ? r.xoffset = - (s / 2 + a / 4) : r.xoffset = - (s / 4 + a / 2), r.yoffset = e.attributes.numberOfLines && 1 == e.attributes.numberOfLines ? a / 2 : r.yoffset, "start" == r.verticalAlignment && e.attributes.numberOfLines && e.attributes.numberOfLines > 1) { var f = e.attributes.numberOfLines; r.yoffset = r.yoffset - .5 * a / 2 + a * f / 2 } } else { switch (r.verticalAlignment) { case "top": break; case "middle": r.yoffset += a / 2; break; default: r.yoffset += .75 * a } e.attributes && e.attributes.customVerticalAlignment && "middle" === e.attributes.customVerticalAlignment && (r.xoffset = 0, r.yoffset = 0, r.yoffset += Math.ceil(a / 2)); var y = r.horizontalAlignment || r.align || null; if (y) switch (y) { case esri.symbol.TextSymbol.ALIGN_MIDDLE: case "center": case "justify": r.xoffset -= Math.ceil(s / 2), e.coordinateId || (r.xoffset -= Math.ceil(a / 4)); break; case esri.symbol.TextSymbol.ALIGN_END: case "right": r.xoffset -= s } } if (r.text.indexOf("Total:") !== -1) r.yoffset = -23; return r } return null0 -
Thanks Marshall for posting this.
I was able to add a custom typescript code in my viewer its working perfectly fine. And i was wondering how i can added in tablet json and handheld json when i search for "stateName": "MeasureState" "widgetId": "CompactToolbarTransientBase", in tablet and handheld json i could'nt find Any idea where i need to update the following code in tablet and handheld json
{
"id":"MeasurementLineLabelToggle",
"type":"toggleButton",
"iconUri":"Resources/Images/Icons/Toolbar/draw-text-24.png",
"toggleStateName":"",
"toggleOn":{
"name":"Hide Labels",
"command":"ChangeTheDisplay",
"commandParameter":"hide",
"tooltip":"Disable Labels for Measurement Lines"
},
"toggleOff":{
"name":"Show Labels",
"command":"ChangeTheDisplay",
"commandParameter":"show",
"tooltip":"Enable Labels for Measurement Lines"
}
}.0 -
Hi everyone,
As of HTML5 viewer version 2.10, the final label on a distance measurement no longer shows up on the center of the line's endpoint. Instead it's offset so that the end of the line should be visible and the measurement appears just after it (as you would expect). Thanks to everyone for their patience and feedback on this.
An additional setting was also added to the MeasurementViewModel in the viewer config file to set how far away from the line this label should be offset. This setting is not accessible from Manager, so you need to add it manually to the viewer config file of you want to use it. To use this setting:- Navigate to the viewer's dekstop config file. The default location is: C:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\Default\REST Elements\Sites\SITENAME\Viewers\VIEWERNAME\VirtualDirectory\Resources\Config\Default\Desktop.json.js
- Backup the file and edit the original in a text editor like Notepad
- Use CTRL + F to search for "id": "MeasurementViewModel"
- In the list of configuration properties below, add a new line at the bottom:
, "polylineLabelOffset": 50(use whatever number you want instead of 50, the default is 5 if it is not set). Example:{ "id": "MeasurementViewModel", "type": "geocortex.essentialsHtmlViewer.mapping.modules.measurement.MeasurementViewModel", "configuration": { "markupLayerName": "Drawings", "lineColor": "#0000FF", "fillColor": "#6495ED", "textColor": "#000000", "highlightColor": "#FFFFFF", "outlineColor": "#000000", "outlineWidth": "1", "totalMeasurementTextColor": "#FFFFFF", "totalMeasurementHighlightColor": "#000000", "totalMeasurementOutlineColor": "#FFFFFF", "totalMeasurementOutlineWidth": "2", "highlightRadius": "5", "textSize": "12px", "addMarkupToMapByDefault": true, "polylineLabelOffset": 50 } } - Save the file and test the viewer
- Repeat for Tablet.json.js and Handheld.json.js if necessary
-Amanda0 -
Toggling the measurement labels can be done really simply now from Workflow 5 (requires GE 4.8/GVH 2.9+). I've posted a workflow for this here (https://communities.geocortex.com/s/question/0D5f200004wvzy4CAA/toggle-measurement-labels-in-the-geocortex-html5-viewer-using-workflow-5) if anyone is interested in getting a "toggle measurement labels" button for their viewer without needing to modify any code. 0 -
Hi Amanda,
whenever I try to save the workflow and add it to ArcOnline it keeps sending me back to the workflow app. I have link my ESRI accoun with the geocortex account and still it keeps sending me back to the workflow app and I am not able to save.
DO you know whats going on here?0 -
Hi Amanda,
I was able to sign in with my ArcOnline account and got this Error message when I tried to save the workflow: "You do not have permissions to access this resource or perform this operation" . I tried to upload a screen shot but the insert button was unresponsive.
How can this be fixed and should I be contacting ESRI as well?
Thanks in advance0 -
Hello Marshall or to whom it may concern,
Thank you for the codes and module.
I don't have luck to get the "offset total measurement label" and "custom module to show/hide measurement labels" work followed by your instructions.
1. The Gecoretex essential version we have is 4.7.0.566. Will this version can adopt your codes?
2. For "the offset total measurement label", the "a.highlightedLabelGraphic=f.MeasurementUtils.addHighlightedLabelToMap" cannot be found from the Mapping.js. However, "a.highlightedLabelGraphic=g.MeasurementUtils." can be found. (The "f" was replaced by "g".
3. the second 'this._textOffset' with -15 was replaced followed by your instructions, however, nothing was changed for the application.
4. No luck for the "Custom Module to show/hide measurement labels'.
Your guidance is truly appreciated.0 -
Thanks to Marshall, Daniel and Justin's notes. The code is working now for offset the lable. Truly appreciated. 0
Please sign in to leave a comment.
Comments
33 comments