diff --git a/browser/src/navigation/SamplesBrowser.tsx b/browser/src/navigation/SamplesBrowser.tsx
index 9f27496964..3e2308b3a3 100644
--- a/browser/src/navigation/SamplesBrowser.tsx
+++ b/browser/src/navigation/SamplesBrowser.tsx
@@ -285,7 +285,8 @@ export class SamplesBrowser extends React.Component<any, any>
     };
     
     private preventDocumentScroll(event:any) {
-        if (event.target.outerHTML.toLowerCase().includes('igx')) {
+        const eventPath = event.composedPath();
+        if (event.target.outerHTML.toLowerCase().includes('igx') && eventPath.filter(x => x.classList?.value === 'igx-grid__tbody').length > 0) {
             event.preventDefault();
         }
     }
diff --git a/samples/maps/geo-map/shape-selection/src/MapElectionStyleUtility.ts b/samples/maps/geo-map/shape-selection/src/MapElectionStyleUtility.ts
index 1db7c4e303..ab7d9c9a0a 100644
--- a/samples/maps/geo-map/shape-selection/src/MapElectionStyleUtility.ts
+++ b/samples/maps/geo-map/shape-selection/src/MapElectionStyleUtility.ts
@@ -5,7 +5,7 @@ import { Style } from 'igniteui-react-core';
 export abstract class ShapeStyling {
   public defaultStroke = 'white';
   public defaultFill = 'gray';
-  public defaultThickness = 0.5;
+  public defaultThickness = 0.75;
   public defaultOpacity = 1.0;
   public defaultStyle = new Style();
 
@@ -23,7 +23,7 @@ export abstract class ShapeStyling {
     let itemValue = null;
 
     if (item === undefined) { // .hasOwnProperty("fieldValues")) {
-        console.log('WARNING: Data item is missing');
+      console.log('WARNING: Data item is missing');
     } else if (item.hasOwnProperty(itemMemberPath)) {
       itemValue = item[itemMemberPath];
     } else {
@@ -33,18 +33,6 @@ export abstract class ShapeStyling {
   }
 }
 
-export class ShapeRange {
-
-  public minimum: number;
-  public maximum: number;
-
-  public opacity?: number;
-  public fill: string;
-  public stroke?: string;
-  public strokeThickness?: number;
-
-}
-
 export class ShapeComparisonStyling extends ShapeStyling {
 
   public itemMemberPath = '';
@@ -53,7 +41,8 @@ export class ShapeComparisonStyling extends ShapeStyling {
   public generate(record: any): Style {
 
     let itemValue = this.getValue(this.itemMemberPath, record);
-    // let itemStroke = this.getValue("KeyRace", record) > 0 ? "black" : "white";
+    let itemStroke = this.getValue("KeyRace", record) > 0 ? "black" : "white";
+
     if (itemValue === null || itemValue === "") {
       return this.defaultStyle;
     }
diff --git a/samples/maps/geo-map/shape-selection/src/index.tsx b/samples/maps/geo-map/shape-selection/src/index.tsx
index 297fc417bb..68a6b60822 100644
--- a/samples/maps/geo-map/shape-selection/src/index.tsx
+++ b/samples/maps/geo-map/shape-selection/src/index.tsx
@@ -143,7 +143,7 @@ export default class MapShapeSelection extends React.Component<any, any> {
                 <div className="stateLabel" style={{background: stateColor}}>{stateLabel}</div>
             </div>);
         }
-        this.sortByKey(statePickers);
+        // this.sortByKey(statePickers);
         
         let widthMenu = "16rem";
         let widthContent = "calc(100% - " + widthMenu + ")";
@@ -443,6 +443,10 @@ export default class MapShapeSelection extends React.Component<any, any> {
             this.usaSymbols.push(state);
         }
 
+        
+        this.sortByName(this.usaStates);
+        this.sortByName(this.usaSymbols);
+
         // this.usaData["VT"].X -=  1; 
         this.usaData["NH"].Y -=  3.5; 
         this.usaData["NH"].X -=  3; 
@@ -608,7 +612,22 @@ export default class MapShapeSelection extends React.Component<any, any> {
         args.shapeStroke = shapeStyle.stroke;
         args.shapeStrokeThickness = shapeStyle.strokeThickness;
     }
-   
+
+    public static drawText(ctx: any , text: string, x: number, y: number, lineHeight: number, useMultipleLines: boolean)
+    { 
+        if (!useMultipleLines)
+        {
+            ctx.fillText(text, x, y );
+            return;
+        }
+        
+        let lines = text.split(' ');
+        for (let i = 0; i < lines.length; i++) {
+            let str = lines[i];
+            ctx.fillText(str, x, y + (i * lineHeight));
+        }
+    }
+
     public createMarker(): any
     {
         let smallStates = ["NH", "VT", "MA", "RI", "CT", "NJ", "DE", "MD", "DC", ];
@@ -644,11 +663,10 @@ export default class MapShapeSelection extends React.Component<any, any> {
                     ctx.fillRect(x - (width / 2), y - (height / 2), width, height);
                     return;
                 }
-
-                let xOffset = 35;
-                let yOffset = 10; 
-
+ 
+                let isSmallState = false;
                 if (smallStates.indexOf(code) >= 0) {
+                    isSmallState = true;
                     ctx.beginPath();     
                     ctx.fillStyle =  item.Color;
                     ctx.fillRect(x - (width / 2), y - (height / 2), width, height);
@@ -658,10 +676,21 @@ export default class MapShapeSelection extends React.Component<any, any> {
                 let kr = ""; //item.KeyRace > 0 ? "* " : "";
                 let txt = kr + code + " (" + item.Electors + ")";
                 
-                ctx.font = '7pt Verdana';
-                ctx.textBaseline = 'top';
                 ctx.fillStyle = code === "HI" ? "black" : "white";
-                ctx.fillText(txt, x - (xOffset / 2), y - (yOffset / 2));
+                ctx.font = '7pt Verdana';
+                 
+                // ctx.lineWidth = 40;
+                // x = x - (xOffset / 2); 
+                // ctx.textBaseline = 'top';
+                // ctx.fillText(txt, x - (xOffset / 2), y - (yOffset / 2));
+
+                ctx.textBaseline = 'middle';
+                if (isSmallState) {
+                    MapShapeSelection.drawText(ctx, txt, x, y, 12, false);
+                } else {
+                    ctx.textAlign = 'center';
+                    MapShapeSelection.drawText(ctx, txt, x, y - 5, 12, true);
+                }
             }
         }
     }
@@ -677,7 +706,7 @@ export default class MapShapeSelection extends React.Component<any, any> {
         const winner = this.getPartyCandidateName(item.Party);
         const party = this.getPartyName(item.Party);
         const color = this.getPartyColor(item.Party);
-        const statusColor = item.KeyRace > 0 ? this.partyColorUKN : item.Lean === "D" ? this.partyColorDEM : this.partyColorREP;
+        const statusColor = item.KeyRace > 0 ? "black" : item.Lean === "D" ? this.partyColorDEM : this.partyColorREP;
         const statusText = item.KeyRace > 0 ? "Toss-up" : item.Lean === "D" ? "Democrat" : "Republican";
             
         return <div className="tooltipBox" style={{color: color}}>