mirror of
https://github.com/umap-project/umap.git
synced 2025-04-28 19:42:36 +02:00
feat: add minimal "raw" icon shape (#2597)
Basically, it means "no shape".  It's a 48x48 max square (but if image is smaller it will stay smaller), popup and tooltip always centered. Let's see how this will be used and add more controls if needed later (like size, center position…). Also I've added a small border to the default white round icon, so it's visible even on a white background. (Not sure why the flower size is 47.8 instead of 48, cf screenshot, sounds like a Leaflet rounding issue…) cf #125
This commit is contained in:
commit
3720ccff01
5 changed files with 33 additions and 4 deletions
|
@ -528,6 +528,7 @@ i.info {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.umap-pictogram-choice img {
|
.umap-pictogram-choice img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<svg version="1.1" id="circle" width="15" height="15" viewBox="0 0 15 15" sodipodi:docname="marker.svg" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
<svg version="1.1" id="circle" width="15" height="15" viewBox="0 0 15 15" sodipodi:docname="marker.svg" inkscape:version="1.4.1 (93de688d07, 2025-03-30)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
<defs id="defs1" />
|
<defs id="defs1" />
|
||||||
<sodipodi:namedview id="namedview1" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:zoom="53.666667" inkscape:cx="7.4906832" inkscape:cy="7.5" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="circle" />
|
<sodipodi:namedview id="namedview1" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" inkscape:zoom="23.966903" inkscape:cx="7.8232888" inkscape:cy="5.9665616" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="circle" />
|
||||||
<path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z" id="path1" style="fill:#ffffff" />
|
<path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z" id="path1" style="fill:#ffffff;stroke:#3e4444;stroke-opacity:1;stroke-width:0.5;stroke-dasharray:none" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1.1 KiB |
|
@ -15,6 +15,8 @@ export function getClass(name) {
|
||||||
return Ball
|
return Ball
|
||||||
case 'Drop':
|
case 'Drop':
|
||||||
return Drop
|
return Drop
|
||||||
|
case 'Raw':
|
||||||
|
return Raw
|
||||||
default:
|
default:
|
||||||
return DefaultIcon
|
return DefaultIcon
|
||||||
}
|
}
|
||||||
|
@ -152,6 +154,17 @@ const Circle = BaseIcon.extend({
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const Raw = DefaultIcon.extend({
|
||||||
|
default_options: {
|
||||||
|
iconSize: new L.Point(48, 48),
|
||||||
|
popupAnchor: new L.Point(0, 0),
|
||||||
|
tooltipAnchor: new L.Point(0, 0),
|
||||||
|
className: 'umap-raw-icon',
|
||||||
|
},
|
||||||
|
|
||||||
|
_getColor: () => 'transparent',
|
||||||
|
})
|
||||||
|
|
||||||
const Drop = DefaultIcon.extend({
|
const Drop = DefaultIcon.extend({
|
||||||
default_options: {
|
default_options: {
|
||||||
iconAnchor: new L.Point(16, 42),
|
iconAnchor: new L.Point(16, 42),
|
||||||
|
|
|
@ -214,6 +214,7 @@ export const SCHEMA = {
|
||||||
['Circle', translate('Circle')],
|
['Circle', translate('Circle')],
|
||||||
['Drop', translate('Drop')],
|
['Drop', translate('Drop')],
|
||||||
['Ball', translate('Ball')],
|
['Ball', translate('Ball')],
|
||||||
|
['Raw', translate('None')],
|
||||||
],
|
],
|
||||||
default: 'Default',
|
default: 'Default',
|
||||||
},
|
},
|
||||||
|
|
|
@ -892,7 +892,21 @@ a.umap-control-caption,
|
||||||
.umap-edit-enabled .readonly {
|
.umap-edit-enabled .readonly {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
.leaflet-container .umap-raw-icon img {
|
||||||
|
max-height: 48px !important;
|
||||||
|
max-width: 48px !important;
|
||||||
|
}
|
||||||
|
.umap-raw-icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.umap-raw-icon.umap-icon-active {
|
||||||
|
box-shadow: var(--block-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
/* ********************************* */
|
/* ********************************* */
|
||||||
/* Ajax loader */
|
/* Ajax loader */
|
||||||
|
|
Loading…
Reference in a new issue