ThumbnailBuilder
Details
index.html 1(+1 -0)
diff --git a/index.html b/index.html
index 7489e1c..9aaa23d 100644
--- a/index.html
+++ b/index.html
@@ -74,6 +74,7 @@
<option value="Feature Service">Feature Service</option>
<option value="Feature Layer">Feature Layer</option>
<option value="Feature Layer (Hosted)">Feature Layer (Hosted)</option>
+ <option value="Feature Layer (Hosted, View)">Feature Layer (Hosted, View)</option>
<option value="Group">Group</option>
<option value="Hub Site">Hub Site</option>
<option value="Map Image Layer">Map Image Layer</option>
js/editCanvas.js 23(+22 -1)
diff --git a/js/editCanvas.js b/js/editCanvas.js
index a2e40c9..3bab494 100644
--- a/js/editCanvas.js
+++ b/js/editCanvas.js
@@ -77,7 +77,28 @@ var categoryComponent = {
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
ctx.font = (this.properties.text().length > 18) ? '37px sans-serif' : '48px sans-serif'
ctx.textAlign = "center"
- ctx.fillText(this.properties.text(), 0, 0)
+
+ function wrapText(context, text, x, y, maxWidth, lineHeight) {
+ var words = text.split(' ')
+ var line = ''
+
+ for (var n = 0; n < words.length; n++) {
+ var testLine = line + words[n] + ' '
+ var metrics = context.measureText(testLine)
+ var testWidth = metrics.width
+ if (testWidth > maxWidth && n > 0) {
+ context.fillText(line, x, -22)
+ line = words[n] + ' '
+ y += lineHeight
+ } else {
+ line = testLine
+ }
+ }
+ context.fillText(line, x, y)
+ }
+
+ // ctx.fillText(this.properties.text(), 0, 0)
+ wrapText(ctx, this.properties.text(), 5, 0, 375, 35)
ctx.restore()
}
}