Overlay selected parcels on WMS preview

wwwroot/css/app.css

@@ -527,14 +527,46 @@ label {
     color: var(--muted);
 }
 
-.wms-preview-body img {
-    display: block;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+.wms-preview-map {
+    position: relative;
+    flex: 0 0 auto;
+    overflow: hidden;
     background: #fff;
 }
 
+.wms-preview-map[hidden] {
+    display: none;
+}
+
+.wms-preview-map img,
+.wms-preview-map svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.wms-preview-map svg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.wms-preview-parcel {
+    fill: rgba(251, 191, 36, 0.28);
+    fill-rule: evenodd;
+    stroke: #ef4444;
+    stroke-width: 4px;
+    vector-effect: non-scaling-stroke;
+}
+
+.wms-preview-gps-parcel {
+    fill: rgba(56, 189, 248, 0.24);
+    fill-rule: evenodd;
+    stroke: #1d4ed8;
+    stroke-width: 4px;
+    vector-effect: non-scaling-stroke;
+}
+
 .bottom-tabs {
     position: absolute;
     right: 0;