Skip to content

Adds ShapeImage and ShapeIcon fields to display custom marker icons in the legend #679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jtroberts merged 4 commits into from
Apr 29, 2025
Merged

Adds ShapeImage and ShapeIcon fields to display custom marker icons in the legend #679

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f60069
Adds a Shape Override to display custom marker icons in the legend #657
jtroberts Apr 21, 2025
f96c4ab
Added separate shapeImage and shapeIcon (to enable mdi icons) fields
jtroberts Apr 23, 2025
cb62360
Fixed issues with using shape icons on the legend
jtroberts Apr 23, 2025
cb63ecc
Support additional image file formats for the legend
jtroberts Apr 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions configure/src/metaconfigs/layer-vector-config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -496,12 +496,19 @@
"type": "colorpicker",
"width": 2
},
{
"field": "value",
"name": "Label",
"description": "A label description for this legend entry.",
"type": "text",
"width": 8
},
{
"field": "shape",
"name": "Shape",
"description": "The symbol for which to us 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.",
"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.",
"type": "dropdown",
"width": 5,
"width": 4,
"options": [
"circle",
"square",
Expand All @@ -512,11 +519,18 @@
]
},
{
"field": "value",
"name": "Label",
"description": "A label description for this legend entry.",
"field": "shapeIcon",
"name": "Shape From Icon",
"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>",
"type": "text",
"width": 3
"width": 4
},
{
"field": "shapeImage",
"name": "Shape From Image",
"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.",
"type": "text",
"width": 4
}
]
}
Expand Down
26 changes: 20 additions & 6 deletions configure/src/metaconfigs/layer-vectortile-config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,12 +469,19 @@
"type": "colorpicker",
"width": 2
},
{
"field": "value",
"name": "Label",
"description": "A label description for this legend entry.",
"type": "text",
"width": 8
},
{
"field": "shape",
"name": "Shape",
"description": "The symbol for which to us 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.",
"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.",
"type": "dropdown",
"width": 5,
"width": 4,
"options": [
"circle",
"square",
Expand All @@ -485,11 +492,18 @@
]
},
{
"field": "value",
"name": "Label",
"description": "A label description for this legend entry.",
"field": "shapeIcon",
"name": "Shape From Icon",
"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>",
"type": "text",
"width": 3
"width": 4
},
{
"field": "shapeImage",
"name": "Shape From Image",
"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.",
"type": "text",
"width": 4
}
]
}
Expand Down
146 changes: 86 additions & 60 deletions src/essence/Tools/Legend/LegendTool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,82 +217,108 @@ function drawLegends(tools, _legend, layerUUID, display_name, opacity) {
let lastContinues = []
let lastShape = ''
for (let d in _legend) {
var shape = _legend[d].shape
if (
shape == 'circle' ||
shape == 'square' ||
shape == 'rect' ||
shape == 'triangle'
) {
var shape = _legend[d].shapeImage && _legend[d].shapeImage.trim()
? _legend[d].shapeImage : _legend[d].shapeIcon && _legend[d].shapeIcon.trim()
? _legend[d].shapeIcon : _legend[d].shape
if (shape == 'continuous' || shape == 'discreet') {
if (lastShape != shape) {
if (lastContinues.length > 0) {
pushScale(lastContinues)
lastContinues = []
}
}
lastContinues.push({
color: _legend[d].color,
shape: shape,
value: _legend[d].value,
})
lastShape = shape
} else {

// finalize discreet and continuous
if (lastContinues.length > 0) {
pushScale(lastContinues)
lastContinues = []
}

var r = c
.append('div')
.attr('class', 'row')
.style('display', 'flex')
.style('margin', '0px 0px 8px 9px')

switch (shape) {
case 'circle':
r.append('div')
.attr('class', layerUUID + '_legendshape')
.style('width', '18px')
.style('height', '18px')
.style('background', _legend[d].color)
.style('opacity', opacity)
.style('border', `1px solid ${_legend[d].strokecolor}`)
.style('border-radius', '50%')
break
case 'square':
r.append('div')
.attr('class', layerUUID + '_legendshape')
.style('width', '18px')
.style('height', '18px')
.style('background', _legend[d].color)
.style('opacity', opacity)
.style('border', `1px solid ${_legend[d].strokecolor}`)
break
case 'rect':
r.append('div')
.attr('class', layerUUID + '_legendshape')
.style('width', '18px')
.style('height', '8px')
.style('margin', '5px 0px 5px 0px')
.style('background', _legend[d].color)
if (
shape == 'circle' ||
shape == 'square' ||
shape == 'rect'
) {
switch (shape) {
case 'circle':
r.append('div')
.attr('class', layerUUID + '_legendshape')
.style('width', '18px')
.style('height', '18px')
.style('background', _legend[d].color)
.style('opacity', opacity)
.style('border', `1px solid ${_legend[d].strokecolor}`)
.style('border-radius', '50%')
break
case 'square':
r.append('div')
.attr('class', layerUUID + '_legendshape')
.style('width', '18px')
.style('height', '18px')
.style('background', _legend[d].color)
.style('opacity', opacity)
.style('border', `1px solid ${_legend[d].strokecolor}`)
break
case 'rect':
r.append('div')
.attr('class', layerUUID + '_legendshape')
.style('width', '18px')
.style('height', '8px')
.style('margin', '5px 0px 5px 0px')
.style('background', _legend[d].color)
.style('opacity', opacity)
.style('border', `1px solid ${_legend[d].strokecolor}`)
break
default:
}
} else if ( String(shape).endsWith('.png') || String(shape).endsWith('.svg')) {
Comment thread
tariqksoliman marked this conversation as resolved.
Outdated
// PNG or SVG markers
r.append('div')
.attr('class', layerUUID + '_legendcustom')
.style('width', '24px')
.style('height', '24px')
.style('background', _legend[d].color)
.style('opacity', opacity)
.style('border', `1px solid ${_legend[d].strokecolor}`)
.style('background-image', `url(${shape.startsWith("http")
? shape : L_.missionPath + shape})`)
.style('background-size', 'contain')
.style('background-repeat', 'no-repeat')
} else { // try using shape from Material Design Icon (mdi) library
r.append('div')
.attr('class', layerUUID + '_legendicon')
.style('width', '18px')
.style('height', '18px')
.append('i')
.attr('class', 'mdi mdi-18px mdi-' + shape)
.style('color', _legend[d].color)
.style('opacity', opacity)
.style('border', `1px solid ${_legend[d].strokecolor}`)
break
default:
}

r.append('div')
.style('margin-left', '5px')
.style('height', '100%')
.style('line-height', '19px')
.style('font-size', '14px')
.style('overflow', 'hidden')
.style('white-space', 'nowrap')
.style('max-width', '270px')
.style('text-overflow', 'ellipsis')
.attr('title', _legend[d].value)
.text(_legend[d].value)
} else if (shape == 'continuous' || shape == 'discreet') {
if (lastShape != shape) {
if (lastContinues.length > 0) {
pushScale(lastContinues)
lastContinues = []
}
}
lastContinues.push({
color: _legend[d].color,
shape: shape,
value: _legend[d].value,
})
lastShape = shape
.style('margin-left', '5px')
.style('height', '100%')
.style('line-height', '19px')
.style('font-size', '14px')
.style('overflow', 'hidden')
.style('white-space', 'nowrap')
.style('max-width', '270px')
.style('text-overflow', 'ellipsis')
.attr('title', _legend[d].value)
.text(_legend[d].value)
}
}
if (lastContinues.length > 0) {
Expand Down
⚡