UI: New Map widgets - introduce new marker icon containers.
This commit is contained in:
Igor Kulikov
parent
151a087e45
commit
1e7e1a2854
@ -50,6 +50,10 @@ export enum MarkerIconContainer {
|
||||
iconContainer1 = 'iconContainer1',
|
||||
iconContainer2 = 'iconContainer2',
|
||||
iconContainer3 = 'iconContainer3',
|
||||
iconContainer4 = 'iconContainer4',
|
||||
iconContainer5 = 'iconContainer5',
|
||||
iconContainer6 = 'iconContainer6',
|
||||
iconContainer7 = 'iconContainer7',
|
||||
tripIconContainer1 = 'tripIconContainer1',
|
||||
tripIconContainer2 = 'tripIconContainer2',
|
||||
tripIconContainer3 = 'tripIconContainer3'
|
||||
@ -85,6 +89,10 @@ const markerIconContainerMap = new Map<MarkerIconContainer, string>(
|
||||
[MarkerIconContainer.iconContainer1, '/assets/markers/iconContainer1.svg'],
|
||||
[MarkerIconContainer.iconContainer2, '/assets/markers/iconContainer2.svg'],
|
||||
[MarkerIconContainer.iconContainer3, '/assets/markers/iconContainer3.svg'],
|
||||
[MarkerIconContainer.iconContainer4, '/assets/markers/iconContainer4.svg'],
|
||||
[MarkerIconContainer.iconContainer5, '/assets/markers/iconContainer5.svg'],
|
||||
[MarkerIconContainer.iconContainer6, '/assets/markers/iconContainer6.svg'],
|
||||
[MarkerIconContainer.iconContainer7, '/assets/markers/iconContainer7.svg'],
|
||||
[MarkerIconContainer.tripIconContainer1, '/assets/markers/tripIconContainer1.svg'],
|
||||
[MarkerIconContainer.tripIconContainer2, '/assets/markers/tripIconContainer2.svg'],
|
||||
[MarkerIconContainer.tripIconContainer3, '/assets/markers/tripIconContainer3.svg']
|
||||
@ -106,11 +114,11 @@ const emptyIconContainerDefinition: MarkerIconContainerDefinition = {
|
||||
|
||||
const defaultIconContainerDefinition: MarkerIconContainerDefinition = {
|
||||
iconSize: 12,
|
||||
iconColor: (color) => tinycolor.mix(color.clone().setAlpha(1), tinycolor('rgba(0,0,0,0.38)')),
|
||||
iconColor: (color) => color,
|
||||
iconAlpha: color => color.getAlpha()
|
||||
}
|
||||
|
||||
const defaultTripIconContainerDefinition: MarkerIconContainerDefinition = {
|
||||
const defaultMaskIconContainerDefinition: MarkerIconContainerDefinition = {
|
||||
iconSize: 24,
|
||||
iconColor: () => tinycolor('#000'),
|
||||
iconAlpha: () => 1,
|
||||
@ -142,9 +150,13 @@ const markerIconContainerDefinitionMap = new Map<MarkerIconContainer, MarkerIcon
|
||||
[MarkerIconContainer.iconContainer1, defaultIconContainerDefinition],
|
||||
[MarkerIconContainer.iconContainer2, defaultIconContainerDefinition],
|
||||
[MarkerIconContainer.iconContainer3, defaultIconContainerDefinition],
|
||||
[MarkerIconContainer.tripIconContainer1, defaultTripIconContainerDefinition],
|
||||
[MarkerIconContainer.tripIconContainer2, {...defaultTripIconContainerDefinition, iconSize: 16}],
|
||||
[MarkerIconContainer.tripIconContainer3, {...defaultTripIconContainerDefinition, iconSize: 16}]
|
||||
[MarkerIconContainer.iconContainer4, defaultMaskIconContainerDefinition],
|
||||
[MarkerIconContainer.iconContainer5, defaultMaskIconContainerDefinition],
|
||||
[MarkerIconContainer.iconContainer6, {...defaultMaskIconContainerDefinition, iconSize: 28}],
|
||||
[MarkerIconContainer.iconContainer7, {...defaultMaskIconContainerDefinition, iconSize: 28}],
|
||||
[MarkerIconContainer.tripIconContainer1, defaultMaskIconContainerDefinition],
|
||||
[MarkerIconContainer.tripIconContainer2, {...defaultMaskIconContainerDefinition, iconSize: 16}],
|
||||
[MarkerIconContainer.tripIconContainer3, {...defaultMaskIconContainerDefinition, iconSize: 16}]
|
||||
]
|
||||
);
|
||||
|
||||
@ -177,13 +189,19 @@ export const tripMarkerShapes = [
|
||||
export const markerIconContainers = [
|
||||
MarkerIconContainer.iconContainer1,
|
||||
MarkerIconContainer.iconContainer2,
|
||||
MarkerIconContainer.iconContainer3
|
||||
MarkerIconContainer.iconContainer3,
|
||||
MarkerIconContainer.iconContainer4,
|
||||
MarkerIconContainer.iconContainer5,
|
||||
MarkerIconContainer.iconContainer6,
|
||||
MarkerIconContainer.iconContainer7
|
||||
];
|
||||
|
||||
export const tripMarkerIconContainers = [
|
||||
MarkerIconContainer.tripIconContainer1,
|
||||
MarkerIconContainer.tripIconContainer2,
|
||||
MarkerIconContainer.tripIconContainer3
|
||||
MarkerIconContainer.tripIconContainer3,
|
||||
MarkerIconContainer.iconContainer4,
|
||||
MarkerIconContainer.iconContainer5
|
||||
];
|
||||
|
||||
const generateElementId = () => {
|
||||
|
||||
14
ui-ngx/src/assets/markers/iconContainer4.svg
Normal file
14
ui-ngx/src/assets/markers/iconContainer4.svg
Normal file
@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" class="marker-color" fill="#307FE5">
|
||||
<circle cx="17" cy="17" r="17" mask="url(#icon-mask)"/>
|
||||
<circle cx="17" cy="17" r="17" mask="url(#icon-mask-2)" fill="#fff"/>
|
||||
<mask id="icon-mask" class="icon-mask-exclude">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#fff" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
<mask id="icon-mask-2" class="icon-mask-overlay">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#000" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 711 B |
15
ui-ngx/src/assets/markers/iconContainer5.svg
Normal file
15
ui-ngx/src/assets/markers/iconContainer5.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" class="marker-color" fill="#307FE5">
|
||||
<path d="m17 0a17 17 0 0 0-17 17 17 17 0 0 0 17 17 17 17 0 0 0 17-17 17 17 0 0 0-17-17zm0 3a14 14 0 0 1 14 14 14 14 0 0 1-14 14 14 14 0 0 1-14-14 14 14 0 0 1 14-14z" />
|
||||
<circle cx="17" cy="17" r="14" mask="url(#icon-mask)" fill="#fff"/>
|
||||
<circle cx="17" cy="17" r="14" mask="url(#icon-mask-2)"/>
|
||||
<mask id="icon-mask" class="icon-mask-exclude">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#fff" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
<mask id="icon-mask-2" class="icon-mask-overlay">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#000" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 882 B |
27
ui-ngx/src/assets/markers/iconContainer6.svg
Normal file
27
ui-ngx/src/assets/markers/iconContainer6.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" class="marker-color" fill="#307FE5">
|
||||
<rect x="2" y="2" width="30" height="30" rx="4" mask="url(#rect-mask)" fill="#fff" fill-opacity="1" filter="url(#shadow-filter)"></rect>
|
||||
<rect x="2" y="2" width="30" height="30" rx="4" mask="url(#icon-mask)" fill="#fff"></rect>
|
||||
<rect x="2" y="2" width="30" height="30" mask="url(#icon-mask-2)"></rect>
|
||||
<mask id="rect-mask" class="rect-mask-exclude">
|
||||
<rect width="100%" height="100%" fill="#fff"></rect>
|
||||
</mask>
|
||||
<mask id="icon-mask" class="icon-mask-exclude">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#fff" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
<mask id="icon-mask-2" class="icon-mask-overlay">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#000" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
<defs>
|
||||
<filter id="shadow-filter" x="-.085714" y="-.085714" width="1.1714" height="1.1714" style="color-interpolation-filters:sRGB">
|
||||
<feFlood flood-color="rgb(0,0,0)" flood-opacity=".49804" result="flood"/>
|
||||
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
|
||||
<feGaussianBlur in="composite1" result="blur" stdDeviation="1"/>
|
||||
<feOffset dx="0" dy="0" result="offset"/>
|
||||
<feComposite in="SourceGraphic" in2="offset" result="composite2"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
27
ui-ngx/src/assets/markers/iconContainer7.svg
Normal file
27
ui-ngx/src/assets/markers/iconContainer7.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" class="marker-color" fill="#307FE5">
|
||||
<rect x="2" y="2" width="30" height="30" rx="4" mask="url(#rect-mask)" fill="#fff" fill-opacity="1" filter="url(#shadow-filter)"></rect>
|
||||
<rect x="2" y="2" width="30" height="30" rx="4" mask="url(#icon-mask)"></rect>
|
||||
<rect x="2" y="2" width="30" height="30" mask="url(#icon-mask-2)" fill="#fff"></rect>
|
||||
<mask id="rect-mask" class="rect-mask-exclude">
|
||||
<rect width="100%" height="100%" fill="#fff"></rect>
|
||||
</mask>
|
||||
<mask id="icon-mask" class="icon-mask-exclude">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#fff" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
<mask id="icon-mask-2" class="icon-mask-overlay">
|
||||
<g class="marker-icon-container" transform="translate(17,17)">
|
||||
<rect width="100%" height="100%" fill="#000" transform="translate(-17,-17)"></rect>
|
||||
</g>
|
||||
</mask>
|
||||
<defs>
|
||||
<filter id="shadow-filter" x="-.085714" y="-.085714" width="1.1714" height="1.1714" style="color-interpolation-filters:sRGB">
|
||||
<feFlood flood-color="rgb(0,0,0)" flood-opacity=".49804" result="flood"/>
|
||||
<feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
|
||||
<feGaussianBlur in="composite1" result="blur" stdDeviation="1"/>
|
||||
<feOffset dx="0" dy="0" result="offset"/>
|
||||
<feComposite in="SourceGraphic" in2="offset" result="composite2"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
x
Reference in New Issue
Block a user