Add TileLayer and TileLayerFactory

FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/EventsPage.razor.cs

@@ -25,7 +25,7 @@ public EventsPage()
                 Center = center,
                 Zoom = 13,
                 UrlTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                SubOptions = new MapSubOptions()
+                SubOptions = new TileLayerOptions()
                 {
                     Attribution = "&copy; <a lhref='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
                     MaxZoom = 18,

FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/Index.razor.cs

@@ -19,7 +19,7 @@ public Index()
                 Center = center,
                 Zoom = 13,
                 UrlTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                SubOptions = new MapSubOptions()
+                SubOptions = new TileLayerOptions()
                 {
                     Attribution = "&copy; <a lhref='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
                     MaxZoom = 18,

FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/MarkersPage.razor.cs

@@ -30,7 +30,7 @@ public MarkersPage()
                 Center = center,
                 Zoom = 13,
                 UrlTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                SubOptions = new MapSubOptions()
+                SubOptions = new TileLayerOptions()
                 {
                     Attribution = "&copy; <a lhref='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
                     MaxZoom = 18,

FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/ObjectsPage.razor.cs

@@ -73,7 +73,7 @@ public ObjectsPage()
                 Center = center,
                 Zoom = 13,
                 UrlTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                SubOptions = new MapSubOptions()
+                SubOptions = new TileLayerOptions()
                 {
                     Attribution = "&copy; <a lhref='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
                     MaxZoom = 18,

FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/PopupsPage.razor.cs

@@ -25,7 +25,7 @@ public PopupsPage()
                 Center = center,
                 Zoom = 13,
                 UrlTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                SubOptions = new MapSubOptions()
+                SubOptions = new TileLayerOptions()
                 {
                     Attribution = "&copy; <a lhref='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
                     MaxZoom = 18,

FisSst.BlazorMaps/FisSst.BlazorMaps.Examples/Pages/TestsPage.razor.cs

@@ -35,7 +35,7 @@ public TestsPage()
                 Center = new LatLng(50.279133, 18.685578),
                 Zoom = 13,
                 UrlTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                SubOptions = new MapSubOptions()
+                SubOptions = new TileLayerOptions()
                 {
                     Attribution = "&copy; <a lhref='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
                     MaxZoom = 18,

FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor

@@ -1,3 +1,3 @@
 @namespace FisSst.BlazorMaps
 
-<div id="@MapOptions.DivId"></div>
+<div id="@MapOptions.DivId" style="@Style"></div>

FisSst.BlazorMaps/FisSst.BlazorMaps/Components/Map.razor.cs

@@ -3,6 +3,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System;
+using System.Reflection;
 using System.Threading.Tasks;
 
 namespace FisSst.BlazorMaps
@@ -23,6 +24,12 @@ public partial class Map : ComponentBase
         [Parameter]
         public MapOptions MapOptions { get; set; }
 
+        [Parameter]
+        public EventCallback AfterRender { get; set; }
+
+        [Parameter]
+        public string Style { get; set; }
+
         internal IJSObjectReference MapReference { get; set; }
 
         private const string getCenter = "getCenter";
@@ -33,15 +40,27 @@ public partial class Map : ComponentBase
         private const string setZoom = "setZoom";
         private const string zoomIn = "zoomIn";
         private const string zoomOut = "zoomOut";
-        private const string setZoomAround = "setZoomAround";        
+        private const string setZoomAround = "setZoomAround";
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (firstRender)
             {
                 this.MapReference = await this.MapJsInterop.Initialize(this.MapOptions);
                 this.MapEvented = new MapEvented(this.MapReference, this.EventedJsInterop);
-            }            
+                initialized = true;
+                await this.AfterRender.InvokeAsync();
+            }
+        }
+
+        private bool initialized;
+
+        public async Task WaitForInitialize()
+        {
+            while (!initialized)
+            {
+                await Task.Delay(10);
+            }
         }
 
         public async Task<LatLng> GetCenter()

FisSst.BlazorMaps/FisSst.BlazorMaps/Configurations/DependencyInjection/FisSstMapsDependencyInjection.cs

@@ -26,6 +26,7 @@ private static void AddFactories(IServiceCollection services)
             services.AddTransient<IPolygonFactory, PolygonFactory>();
             services.AddTransient<ICircleMarkerFactory, CircleMarkerFactory>();
             services.AddTransient<ICircleFactory, CircleFactory>();
+            services.AddTransient<ITileLayerFactory, TileLayerFactory>();
         }
 
         private static void AddJsInterops(IServiceCollection services)

FisSst.BlazorMaps/FisSst.BlazorMaps/Factories/TileLayers/ITileLayerFactory.cs

@@ -0,0 +1,9 @@
+using System.Threading.Tasks;
+
+namespace FisSst.BlazorMaps
+{
+    public interface ITileLayerFactory
+    {
+        Task<TileLayer> Create(string urlTemplate, TileLayerOptions options);
+    }
+}

FisSst.BlazorMaps/FisSst.BlazorMaps/Factories/TileLayers/TileLayerFactory.cs

@@ -0,0 +1,22 @@
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace FisSst.BlazorMaps
+{
+    public class TileLayerFactory : ITileLayerFactory
+    {
+        private const string create = "L.tileLayer";
+        private readonly IJSRuntime jsRuntime;
+
+        public TileLayerFactory(IJSRuntime jsRuntime)
+        {
+            this.jsRuntime = jsRuntime;
+        }
+
+        public async Task<TileLayer> Create(string urlTemplate, TileLayerOptions options)
+        {
+            IJSObjectReference jsReference = await this.jsRuntime.InvokeAsync<IJSObjectReference>(create, urlTemplate, options);
+            return new TileLayer(jsReference);
+        }
+    }
+}

FisSst.BlazorMaps/FisSst.BlazorMaps/Models/Maps/MapOptions.cs

@@ -9,6 +9,6 @@ public class MapOptions
         public LatLng Center { get; set; }
         public int Zoom { get; set; }
         public string UrlTileLayer { get; set; }
-        public MapSubOptions SubOptions { get; set; }
+        public TileLayerOptions SubOptions { get; set; }
     }
 }

FisSst.BlazorMaps/FisSst.BlazorMaps/Models/TileLayers/TileLayer.cs

@@ -0,0 +1,17 @@
+using FisSst.BlazorMaps.JsInterops.Events;
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace FisSst.BlazorMaps
+{
+    /// <summary>
+    /// It is used to display clickable/draggable icons on the Map.
+    /// </summary>
+    public class TileLayer : Layer
+    {
+        internal TileLayer(IJSObjectReference jsReference)
+        {
+            JsReference = jsReference;
+        }
+    }
+}

FisSst.BlazorMaps/FisSst.BlazorMaps/Models/Maps/MapSubOptions.cs → FisSst.BlazorMaps/FisSst.BlazorMaps/Models/TileLayers/TileLayerOptions.cs

@@ -1,9 +1,12 @@
-namespace FisSst.BlazorMaps
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace FisSst.BlazorMaps
 {
-    /// <summary>
-    /// It is a subset of MapOptions.
-    /// </summary>
-    public class MapSubOptions
+    public class TileLayerOptions
     {
         public string Id { get; set; }
         public string Attribution { get; set; }

FisSst.BlazorMaps/FisSst.BlazorMaps/wwwroot/map.js

@@ -1,5 +1,6 @@
 export function initialize(mapOptions) {
     const newMap = L.map(mapOptions.divId).setView(mapOptions.center, mapOptions.zoom);
-    L.tileLayer(mapOptions.urlTileLayer, mapOptions.subOptions).addTo(newMap);
+    if (mapOptions.urlTileLayer)
+        L.tileLayer(mapOptions.urlTileLayer, mapOptions.subOptions).addTo(newMap);
     return newMap;
 }