Skip to content

Commit f96c4ab

Browse files
jtrobertsjtroberts
committed
Added separate shapeImage and shapeIcon (to enable mdi icons) fields
- Removes shapeOverride field - shapeIcon will use mdi icons for the legend - shapeImage will use a URL to a .png or .svg for the legend
1 parent 7f60069 commit f96c4ab

File tree

3 files changed

+112
-117
lines changed

3 files changed

+112
-117
lines changed

‎configure/src/metaconfigs/layer-vector-config.json‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -496,12 +496,19 @@
496496
"type": "colorpicker",
497497
"width": 2
498498
},
499+
{
500+
"field": "value",
501+
"name": "Label",
502+
"description": "A label description for this legend entry.",
503+
"type": "text",
504+
"width": 8
505+
},
499506
{
500507
"field": "shape",
501508
"name": "Shape",
502509
"description": "The symbol for which to use for this legend entry. Discreet and continuous describe scales. These scales are broken into groups by a change in shape value. For instance, 'discreet, discreet, discreet, circle, discreet, discreet' represents a discreet scales of three colors, a circle and then a discreet scale of two colors.",
503510
"type": "dropdown",
504-
"width": 5,
511+
"width": 4,
505512
"options": [
506513
"circle",
507514
"square",
@@ -512,24 +519,18 @@
512519
]
513520
},
514521
{
515-
"field": "value",
516-
"name": "Label",
517-
"description": "A label description for this legend entry.",
522+
"field": "shapeIcon",
523+
"name": "Shape From Icon",
524+
"description": "Shape but taken from the Material Design Icon (mdi) library. Takes priority over the value in the 'shape' field. See <a target='_blank' href='https://pictogrammers.com/library/mdi/'>https://pictogrammers.com/library/mdi/</a>",
518525
"type": "text",
519-
"width": 3
520-
},
521-
{
522-
"field": "",
523-
"name": "",
524-
"description": "",
525526
"width": 4
526527
},
527528
{
528-
"field": "shapeOverride",
529-
"name": "Shape Override",
530-
"description": "A URL to a custom symbol for which to use for this legend entry. If the path is relative, it will be relative to the mission's directory. This field will override values in the Shape field.",
529+
"field": "shapeImage",
530+
"name": "Shape From Image",
531+
"description": "A URL to a custom image (.png or .svg) for which to use for this legend entry. If the path is relative, it will be relative to the mission's directory. This field will override values in the Shape and Shape From Icon fields.",
531532
"type": "text",
532-
"width": 8
533+
"width": 4
533534
}
534535
]
535536
}

‎configure/src/metaconfigs/layer-vectortile-config.json‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -469,12 +469,19 @@
469469
"type": "colorpicker",
470470
"width": 2
471471
},
472+
{
473+
"field": "value",
474+
"name": "Label",
475+
"description": "A label description for this legend entry.",
476+
"type": "text",
477+
"width": 8
478+
},
472479
{
473480
"field": "shape",
474481
"name": "Shape",
475482
"description": "The symbol for which to use for this legend entry. Discreet and continuous describe scales. These scales are broken into groups by a change in shape value. For instance, 'discreet, discreet, discreet, circle, discreet, discreet' represents a discreet scales of three colors, a circle and then a discreet scale of two colors.",
476483
"type": "dropdown",
477-
"width": 5,
484+
"width": 4,
478485
"options": [
479486
"circle",
480487
"square",
@@ -485,24 +492,18 @@
485492
]
486493
},
487494
{
488-
"field": "value",
489-
"name": "Label",
490-
"description": "A label description for this legend entry.",
495+
"field": "shapeIcon",
496+
"name": "Shape From Icon",
497+
"description": "Shape but taken from the Material Design Icon (mdi) library. Takes priority over the value in the 'shape' field. See <a target='_blank' href='https://pictogrammers.com/library/mdi/'>https://pictogrammers.com/library/mdi/</a>",
491498
"type": "text",
492-
"width": 3
493-
},
494-
{
495-
"field": "",
496-
"name": "",
497-
"description": "",
498499
"width": 4
499500
},
500501
{
501-
"field": "shapeOverride",
502-
"name": "Shape Override",
503-
"description": "A URL to a custom symbol for which to use for this legend entry. If the path is relative, it will be relative to the mission's directory. This field will override values in the Shape field.",
502+
"field": "shapeImage",
503+
"name": "Shape From Image",
504+
"description": "A URL to a custom image (.png or .svg) for which to use for this legend entry. If the path is relative, it will be relative to the mission's directory. This field will override values in the Shape and Shape From Icon fields.",
504505
"type": "text",
505-
"width": 8
506+
"width": 4
506507
}
507508
]
508509
}

‎src/essence/Tools/Legend/LegendTool.js‎

Lines changed: 82 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -217,71 +217,10 @@ function drawLegends(tools, _legend, layerUUID, display_name, opacity) {
217217
let lastContinues = []
218218
let lastShape = ''
219219
for (let d in _legend) {
220-
var shape = _legend[d].shapeOverride && _legend[d].shapeOverride.trim()
221-
? _legend[d].shapeOverride : _legend[d].shape
222-
if (
223-
shape == 'circle' ||
224-
shape == 'square' ||
225-
shape == 'rect' ||
226-
shape == 'triangle'
227-
) {
228-
// finalize discreet and continuous
229-
if (lastContinues.length > 0) {
230-
pushScale(lastContinues)
231-
lastContinues = []
232-
}
233-
234-
var r = c
235-
.append('div')
236-
.attr('class', 'row')
237-
.style('display', 'flex')
238-
.style('margin', '0px 0px 8px 9px')
239-
240-
switch (shape) {
241-
case 'circle':
242-
r.append('div')
243-
.attr('class', layerUUID + '_legendshape')
244-
.style('width', '18px')
245-
.style('height', '18px')
246-
.style('background', _legend[d].color)
247-
.style('opacity', opacity)
248-
.style('border', `1px solid ${_legend[d].strokecolor}`)
249-
.style('border-radius', '50%')
250-
break
251-
case 'square':
252-
r.append('div')
253-
.attr('class', layerUUID + '_legendshape')
254-
.style('width', '18px')
255-
.style('height', '18px')
256-
.style('background', _legend[d].color)
257-
.style('opacity', opacity)
258-
.style('border', `1px solid ${_legend[d].strokecolor}`)
259-
break
260-
case 'rect':
261-
r.append('div')
262-
.attr('class', layerUUID + '_legendshape')
263-
.style('width', '18px')
264-
.style('height', '8px')
265-
.style('margin', '5px 0px 5px 0px')
266-
.style('background', _legend[d].color)
267-
.style('opacity', opacity)
268-
.style('border', `1px solid ${_legend[d].strokecolor}`)
269-
break
270-
default:
271-
}
272-
273-
r.append('div')
274-
.style('margin-left', '5px')
275-
.style('height', '100%')
276-
.style('line-height', '19px')
277-
.style('font-size', '14px')
278-
.style('overflow', 'hidden')
279-
.style('white-space', 'nowrap')
280-
.style('max-width', '270px')
281-
.style('text-overflow', 'ellipsis')
282-
.attr('title', _legend[d].value)
283-
.text(_legend[d].value)
284-
} else if (shape == 'continuous' || shape == 'discreet') {
220+
var shape = _legend[d].shapeImage && _legend[d].shapeImage.trim()
221+
? _legend[d].shapeImage : _legend[d].shapeIcon && _legend[d].shapeIcon.trim()
222+
? _legend[d].shapeIcon : _legend[d].shape
223+
if (shape == 'continuous' || shape == 'discreet') {
285224
if (lastShape != shape) {
286225
if (lastContinues.length > 0) {
287226
pushScale(lastContinues)
@@ -294,37 +233,91 @@ function drawLegends(tools, _legend, layerUUID, display_name, opacity) {
294233
value: _legend[d].value,
295234
})
296235
lastShape = shape
297-
} else if ( String(shape).endsWith('.png') || String(shape).endsWith('.svg')) {
298-
// PNG or SVG markers
236+
} else {
237+
238+
// finalize discreet and continuous
239+
if (lastContinues.length > 0) {
240+
pushScale(lastContinues)
241+
lastContinues = []
242+
}
299243
var r = c
300244
.append('div')
301245
.attr('class', 'row')
302246
.style('display', 'flex')
303-
.style('margin', '0px 0px 8px 9px')
247+
.style('margin', '0px 0px 8px 9px')
304248

305-
r.append('div')
306-
.attr('class', layerUUID + '_legendcustom')
307-
.style('width', '24px')
308-
.style('height', '24px')
309-
.style('background', _legend[d].color)
310-
.style('opacity', opacity)
311-
.style('border', `1px solid ${_legend[d].strokecolor}`)
312-
.style('background-image', `url(${L_.missionPath + shape})`)
313-
.style('background-size', 'contain')
314-
.style('background-repeat', 'no-repeat')
249+
if (
250+
shape == 'circle' ||
251+
shape == 'square' ||
252+
shape == 'rect' ||
253+
shape == 'triangle'
254+
) {
255+
switch (shape) {
256+
case 'circle':
257+
r.append('div')
258+
.attr('class', layerUUID + '_legendshape')
259+
.style('width', '18px')
260+
.style('height', '18px')
261+
.style('background', _legend[d].color)
262+
.style('opacity', opacity)
263+
.style('border', `1px solid ${_legend[d].strokecolor}`)
264+
.style('border-radius', '50%')
265+
break
266+
case 'square':
267+
r.append('div')
268+
.attr('class', layerUUID + '_legendshape')
269+
.style('width', '18px')
270+
.style('height', '18px')
271+
.style('background', _legend[d].color)
272+
.style('opacity', opacity)
273+
.style('border', `1px solid ${_legend[d].strokecolor}`)
274+
break
275+
case 'rect':
276+
r.append('div')
277+
.attr('class', layerUUID + '_legendshape')
278+
.style('width', '18px')
279+
.style('height', '8px')
280+
.style('margin', '5px 0px 5px 0px')
281+
.style('background', _legend[d].color)
282+
.style('opacity', opacity)
283+
.style('border', `1px solid ${_legend[d].strokecolor}`)
284+
break
285+
default:
286+
}
287+
} else if ( String(shape).endsWith('.png') || String(shape).endsWith('.svg')) {
288+
// PNG or SVG markers
289+
r.append('div')
290+
.attr('class', layerUUID + '_legendcustom')
291+
.style('width', '24px')
292+
.style('height', '24px')
293+
.style('background', _legend[d].color)
294+
.style('opacity', opacity)
295+
.style('border', `1px solid ${_legend[d].strokecolor}`)
296+
.style('background-image', `url(${shape.startsWith("http")
297+
? shape : L_.missionPath + shape})`)
298+
.style('background-size', 'contain')
299+
.style('background-repeat', 'no-repeat')
300+
} else { // try using shape from Material Design Icon (mdi) library
301+
r.append('div')
302+
.attr('class', layerUUID + '_legendicon' + ' mdi mdi-18px mdi-' + shape)
303+
.style('width', '18px')
304+
.style('height', '18px')
305+
.style('background', _legend[d].color)
306+
.style('opacity', opacity)
307+
.style('border', `1px solid ${_legend[d].strokecolor}`)
308+
}
315309

316310
r.append('div')
317-
.style('margin-left', '5px')
318-
.style('height', '100%')
319-
.style('line-height', '19px')
320-
.style('font-size', '14px')
321-
.style('overflow', 'hidden')
322-
.style('white-space', 'nowrap')
323-
.style('max-width', '270px')
324-
.style('text-overflow', 'ellipsis')
325-
.attr('title', _legend[d].value)
326-
.text(_legend[d].value)
327-
311+
.style('margin-left', '5px')
312+
.style('height', '100%')
313+
.style('line-height', '19px')
314+
.style('font-size', '14px')
315+
.style('overflow', 'hidden')
316+
.style('white-space', 'nowrap')
317+
.style('max-width', '270px')
318+
.style('text-overflow', 'ellipsis')
319+
.attr('title', _legend[d].value)
320+
.text(_legend[d].value)
328321
}
329322
}
330323
if (lastContinues.length > 0) {

0 commit comments

Comments
 (0)
⚡