From 6709a028e63f40c2c2178aa94b6bc0bc72c878a0 Mon Sep 17 00:00:00 2001
From: Chris Mingay <chris@chrismingay.co.uk>
Date: Sun, 14 Nov 2021 14:01:03 +0000
Subject: [PATCH] Add a CSSClass parameter to the Map component

---
 .../Pages/CssClasses.razor                    | 52 +++++++++++++++++++
 .../Pages/CssClasses.razor.cs                 | 41 +++++++++++++++
 .../Shared/NavMenu.razor                      |  4 ++
 .../FisSst.BlazorMaps/Components/Map.razor    |  2 +-
 .../FisSst.BlazorMaps/Components/Map.razor.cs |  3 ++
 5 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor
 create mode 100644 FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor.cs

diff --git a/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor b/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor
new file mode 100644
index 0000000..ea3ac12
--- /dev/null
+++ b/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor
@@ -0,0 +1,52 @@
+@page "/css-classes"
+
+<div class="top-container">
+    <h1 class="page-header">Container CSS class</h1>
+</div>
+
+<div class="map-wrapper">
+    <Map @ref="mapRef" MapOptions="@mapOptions" CssClass="custom-css-class"></Map>
+</div>
+
+
+<div class="side-panel">
+    <h3 class="header">Functionalities</h3>
+    <SidePanelButton Label="get center"
+                     IconSrc="@Icons.InitializationGetCenterIconSrc"
+                     OnClick="async () => await GetCenterExample()"/>
+    <SidePanelButton Label="set view"
+                     IconSrc="@Icons.InitializationSetViewIconSrc"
+                     OnClick="async () => await mapRef.SetView(center)"/>
+    <SidePanelButton Label="set zoom"
+                     IconSrc="@Icons.InitializationSetZoomIconSrc"
+                     OnClick="async () => await mapRef.SetZoom(zoom: 16)"/>
+    <SidePanelButton Label="zoom in"
+                     IconSrc="@Icons.InitializationZoomInIconSrc"
+                     OnClick="async () => await mapRef.ZoomIn(zoomDelta: 1)"/>
+    <SidePanelButton Label="zoom out"
+                     IconSrc="@Icons.InitializationZoomOutIconSrc"
+                     OnClick="async () => await mapRef.ZoomOut(zoomDelta: 3)"/>
+    <SidePanelButton Label="set zoom around"
+                     IconSrc="@Icons.InitializationSetZoomAroundIconSrc"
+                     OnClick="async () => await mapRef.SetZoomAround(center, 10)"/>
+</div>
+
+<style>
+    .side-panel {
+        min-width: 400px;
+        display: grid;
+        grid-template-rows: minmax(3rem, 5rem) repeat(2, 150px);
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .side-panel .header {
+        grid-column: 1/-1;
+    }
+
+    .side-panel .icon-wrapper .icon {
+        height: auto;
+    }
+    .custom-css-class {
+        border: 2px solid red;
+    }
+</style>
\ No newline at end of file
diff --git a/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor.cs b/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor.cs
new file mode 100644
index 0000000..24c6812
--- /dev/null
+++ b/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/CssClasses.razor.cs
@@ -0,0 +1,41 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace FisSst.BlazorMaps.Examples.Pages
+{
+    public partial class CssClasses
+    {
+        private readonly LatLng center;
+        private Map mapRef;
+        private MapOptions mapOptions;
+
+        public CssClasses()
+        {
+            this.center = new LatLng(50.279133, 18.685578);
+            this.mapOptions = new MapOptions()
+            {
+                DivId = "mapId",
+                Center = center,
+                Zoom = 13,
+                UrlTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                SubOptions = new MapSubOptions()
+                {
+                    Attribution = "&copy; <a lhref='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
+                    MaxZoom = 18,
+                    TileSize = 512,
+                    ZoomOffset = -1,
+                }
+            };
+        }
+
+        [Inject]
+        private IJSRuntime JsRuntime { get; init; }
+
+        private async Task GetCenterExample()
+        {
+            LatLng center = await this.mapRef.GetCenter();
+            await this.JsRuntime.InvokeAsync<string>("alert", $"Map centered at: Lat: {center.Lat}, Lng: {center.Lng}");
+        }
+    }
+}
diff --git a/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Shared/NavMenu.razor b/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Shared/NavMenu.razor
index 18fbe4e..62e987b 100644
--- a/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Shared/NavMenu.razor
+++ b/FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Shared/NavMenu.razor
@@ -25,6 +25,10 @@
         <div class="circle"></div>
         <span class="label">Popups</span>
     </NavLink>
+    <NavLink class="button-wrapper nav-link" href="css-classes">
+            <div class="circle"></div>
+            <span class="label">CSS Class</span>
+        </NavLink>
     <NavLink class="button-wrapper nav-link" href="tests">
         <div class="circle"></div>
         <span class="label">Tests</span>
diff --git a/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor b/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor
index 32b2ca2..97f05e9 100644
--- a/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor
+++ b/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor
@@ -1,3 +1,3 @@
 @namespace FisSst.BlazorMaps
 
-<div id="@MapOptions.DivId"></div>
+<div id="@MapOptions.DivId" class="@CssClass"></div>
diff --git a/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor.cs b/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor.cs
index 45589c1..b56000f 100644
--- a/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor.cs
+++ b/FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor.cs
@@ -22,6 +22,9 @@ public partial class Map : ComponentBase
 
         [Parameter]
         public MapOptions MapOptions { get; set; }
+        
+        [Parameter]
+        public string CssClass { get; set; }
 
         [Parameter]
         public EventCallback AfterRender { get; set; }