UI: New Map widgets - introduce new marker icon containers.

ui-ngx/src/app/shared/models/widget/maps/marker-shape.models.ts

@@ -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.iconContainer4, defaultMaskIconContainerDefinition],
-    [MarkerIconContainer.tripIconContainer2, {...defaultTripIconContainerDefinition, iconSize: 16}],
+    [MarkerIconContainer.iconContainer5, defaultMaskIconContainerDefinition],
-    [MarkerIconContainer.tripIconContainer3, {...defaultTripIconContainerDefinition, iconSize: 16}]
+    [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 = () => {

ui-ngx/src/assets/markers/iconContainer4.svg

@@ -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>

ui-ngx/src/assets/markers/iconContainer5.svg

@@ -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>

ui-ngx/src/assets/markers/iconContainer6.svg

@@ -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>

ui-ngx/src/assets/markers/iconContainer7.svg

@@ -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>