From 90661d406a084a934cda8fa16a8d4453b9fd9f3d Mon Sep 17 00:00:00 2001 From: ardacetinkaya Date: Tue, 15 Oct 2019 11:54:14 +0300 Subject: [PATCH] ASP.NET Core 3.0 support - Blazor API(s) are fixed to for ASP.NET Core 3.0 - Google Maps final improvments are fixed --- .gitignore | 1 + Blazor.GoogleMap.sln | 28 ++--- README.md | 33 ++++-- demo/Blazor.GoogleMap.Client/App.razor | 1 - .../Blazor.GoogleMap.Client.csproj | 24 ---- .../Pages/FetchData.razor | 45 -------- .../Blazor.GoogleMap.Client/Pages/Index.razor | 7 -- .../Pages/_Imports.razor | 1 - demo/Blazor.GoogleMap.Client/Program.cs | 16 --- .../Shared/NavMenu.razor | 37 ------ .../Shared/SurveyPrompt.razor | 15 --- demo/Blazor.GoogleMap.Client/Startup.cs | 21 ---- .../wwwroot/index.html | 16 --- demo/Blazor.GoogleMap.Server/App.razor | 10 ++ .../Blazor.GoogleMap.Server.csproj | 23 ++-- .../Controllers/SampleDataController.cs | 30 ----- .../Blazor.GoogleMap.Server/Pages/Error.razor | 16 +++ .../Pages/Index.razor} | 51 +++----- .../Pages/_Host.cshtml | 25 ++++ demo/Blazor.GoogleMap.Server/Program.cs | 24 ++-- .../Shared/MainLayout.razor | 2 +- .../Shared/NavMenu.razor | 27 +++++ demo/Blazor.GoogleMap.Server/Startup.cs | 37 +++--- .../_Imports.razor | 10 +- demo/Blazor.GoogleMap.Server/appsettings.json | 11 ++ .../wwwroot/GoogleMapInterop.js | 75 ++++++++++++ .../wwwroot/GoogleMapMarkerInterop.js | 109 ++++++++++++++++++ .../wwwroot/css/bootstrap/bootstrap.min.css | 0 .../css/bootstrap/bootstrap.min.css.map | 0 .../wwwroot/css/open-iconic/FONT-LICENSE | 0 .../wwwroot/css/open-iconic/ICON-LICENSE | 0 .../wwwroot/css/open-iconic/README.md | 0 .../font/css/open-iconic-bootstrap.min.css | 0 .../open-iconic/font/fonts/open-iconic.eot | Bin .../open-iconic/font/fonts/open-iconic.otf | Bin .../open-iconic/font/fonts/open-iconic.svg | 0 .../open-iconic/font/fonts/open-iconic.ttf | Bin .../open-iconic/font/fonts/open-iconic.woff | Bin .../wwwroot/css/site.css | 93 ++++++++------- .../wwwroot/favicon.ico | Bin 0 -> 32038 bytes .../Blazor.GoogleMap.Shared.csproj | 8 -- .../WeatherForecast.cs | 17 --- src/Blazor.GoogleMap/Blazor.GoogleMap.csproj | 7 +- src/Blazor.GoogleMap/Components/GoogleMap.cs | 47 ++++---- .../Components/GoogleMapInfoWindow.cs | 5 +- .../Rendering/BlazorRendererTreeBuilder.cs | 4 +- .../Rendering/IRendererTreeBuilder.cs | 2 +- src/Blazor.GoogleMap/GoogleMapInterop.cs | 24 ++-- src/Blazor.GoogleMap/GoogleMapOptions.cs | 3 + .../Map/InfoWindows/IInfoWindowHandle.cs | 4 +- .../Map/InfoWindows/InfoWindow.cs | 8 +- src/Blazor.GoogleMap/Map/Markers/Marker.cs | 8 +- .../Map/Markers/MarkerCollection.cs | 2 +- .../ServiceCollectionExtensions.cs | 10 +- .../content/GoogleMapInterop.js | 27 ++--- .../content/GoogleMapMarkerInterop.js | 22 ++-- 56 files changed, 527 insertions(+), 459 deletions(-) delete mode 100644 demo/Blazor.GoogleMap.Client/App.razor delete mode 100644 demo/Blazor.GoogleMap.Client/Blazor.GoogleMap.Client.csproj delete mode 100644 demo/Blazor.GoogleMap.Client/Pages/FetchData.razor delete mode 100644 demo/Blazor.GoogleMap.Client/Pages/Index.razor delete mode 100644 demo/Blazor.GoogleMap.Client/Pages/_Imports.razor delete mode 100644 demo/Blazor.GoogleMap.Client/Program.cs delete mode 100644 demo/Blazor.GoogleMap.Client/Shared/NavMenu.razor delete mode 100644 demo/Blazor.GoogleMap.Client/Shared/SurveyPrompt.razor delete mode 100644 demo/Blazor.GoogleMap.Client/Startup.cs delete mode 100644 demo/Blazor.GoogleMap.Client/wwwroot/index.html create mode 100644 demo/Blazor.GoogleMap.Server/App.razor delete mode 100644 demo/Blazor.GoogleMap.Server/Controllers/SampleDataController.cs create mode 100644 demo/Blazor.GoogleMap.Server/Pages/Error.razor rename demo/{Blazor.GoogleMap.Client/Pages/Map.razor => Blazor.GoogleMap.Server/Pages/Index.razor} (53%) create mode 100644 demo/Blazor.GoogleMap.Server/Pages/_Host.cshtml rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/Shared/MainLayout.razor (70%) create mode 100644 demo/Blazor.GoogleMap.Server/Shared/NavMenu.razor rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/_Imports.razor (56%) create mode 100644 demo/Blazor.GoogleMap.Server/appsettings.json create mode 100644 demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapInterop.js create mode 100644 demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapMarkerInterop.js rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/bootstrap/bootstrap.min.css (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/bootstrap/bootstrap.min.css.map (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/FONT-LICENSE (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/ICON-LICENSE (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/README.md (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/font/fonts/open-iconic.eot (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/font/fonts/open-iconic.otf (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/font/fonts/open-iconic.svg (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/open-iconic/font/fonts/open-iconic.woff (100%) rename demo/{Blazor.GoogleMap.Client => Blazor.GoogleMap.Server}/wwwroot/css/site.css (56%) create mode 100644 demo/Blazor.GoogleMap.Server/wwwroot/favicon.ico delete mode 100644 demo/Blazor.GoogleMap.Shared/Blazor.GoogleMap.Shared.csproj delete mode 100644 demo/Blazor.GoogleMap.Shared/WeatherForecast.cs diff --git a/.gitignore b/.gitignore index 3e759b7..0b1e718 100644 --- a/.gitignore +++ b/.gitignore @@ -328,3 +328,4 @@ ASALocalRun/ # MFractors (Xamarin productivity tool) working folder .mfractor/ +demo/Blazor.GoogleMap.Server/appsettings.Development.json diff --git a/Blazor.GoogleMap.sln b/Blazor.GoogleMap.sln index 4340136..4045624 100644 --- a/Blazor.GoogleMap.sln +++ b/Blazor.GoogleMap.sln @@ -3,12 +3,6 @@ Microsoft Visual Studio Solution File, Format Version 12.00 # Visual Studio Version 16 VisualStudioVersion = 16.0.28902.138 MinimumVisualStudioVersion = 10.0.40219.1 -Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.GoogleMap.Server", "demo\Blazor.GoogleMap.Server\Blazor.GoogleMap.Server.csproj", "{9D7D3AA1-A81E-454B-9B17-0B35CDBDCC3C}" -EndProject -Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.GoogleMap.Client", "demo\Blazor.GoogleMap.Client\Blazor.GoogleMap.Client.csproj", "{8015065B-010D-420B-9539-518D042BA0B4}" -EndProject -Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.GoogleMap.Shared", "demo\Blazor.GoogleMap.Shared\Blazor.GoogleMap.Shared.csproj", "{5265BA8E-F1A9-436A-9A19-2AC97373E3D2}" -EndProject Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "demo", "demo", "{A76C4CD5-7315-48CE-8A01-122B0662BAA5}" EndProject Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{EB447513-2400-44A6-B2B1-A3E53EBFC999}" @@ -20,37 +14,29 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "_solutionItems", "_solution README.md = README.md EndProjectSection EndProject +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.GoogleMap.Server", "demo\Blazor.GoogleMap.Server\Blazor.GoogleMap.Server.csproj", "{72279C45-BCD5-4F61-8E2B-179DED8BE123}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU Release|Any CPU = Release|Any CPU EndGlobalSection GlobalSection(ProjectConfigurationPlatforms) = postSolution - {9D7D3AA1-A81E-454B-9B17-0B35CDBDCC3C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {9D7D3AA1-A81E-454B-9B17-0B35CDBDCC3C}.Debug|Any CPU.Build.0 = Debug|Any CPU - {9D7D3AA1-A81E-454B-9B17-0B35CDBDCC3C}.Release|Any CPU.ActiveCfg = Release|Any CPU - {9D7D3AA1-A81E-454B-9B17-0B35CDBDCC3C}.Release|Any CPU.Build.0 = Release|Any CPU - {8015065B-010D-420B-9539-518D042BA0B4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {8015065B-010D-420B-9539-518D042BA0B4}.Debug|Any CPU.Build.0 = Debug|Any CPU - {8015065B-010D-420B-9539-518D042BA0B4}.Release|Any CPU.ActiveCfg = Release|Any CPU - {8015065B-010D-420B-9539-518D042BA0B4}.Release|Any CPU.Build.0 = Release|Any CPU - {5265BA8E-F1A9-436A-9A19-2AC97373E3D2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {5265BA8E-F1A9-436A-9A19-2AC97373E3D2}.Debug|Any CPU.Build.0 = Debug|Any CPU - {5265BA8E-F1A9-436A-9A19-2AC97373E3D2}.Release|Any CPU.ActiveCfg = Release|Any CPU - {5265BA8E-F1A9-436A-9A19-2AC97373E3D2}.Release|Any CPU.Build.0 = Release|Any CPU {8833072A-796E-43D9-840C-346F4C80409E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU {8833072A-796E-43D9-840C-346F4C80409E}.Debug|Any CPU.Build.0 = Debug|Any CPU {8833072A-796E-43D9-840C-346F4C80409E}.Release|Any CPU.ActiveCfg = Release|Any CPU {8833072A-796E-43D9-840C-346F4C80409E}.Release|Any CPU.Build.0 = Release|Any CPU + {72279C45-BCD5-4F61-8E2B-179DED8BE123}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {72279C45-BCD5-4F61-8E2B-179DED8BE123}.Debug|Any CPU.Build.0 = Debug|Any CPU + {72279C45-BCD5-4F61-8E2B-179DED8BE123}.Release|Any CPU.ActiveCfg = Release|Any CPU + {72279C45-BCD5-4F61-8E2B-179DED8BE123}.Release|Any CPU.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE EndGlobalSection GlobalSection(NestedProjects) = preSolution - {9D7D3AA1-A81E-454B-9B17-0B35CDBDCC3C} = {A76C4CD5-7315-48CE-8A01-122B0662BAA5} - {8015065B-010D-420B-9539-518D042BA0B4} = {A76C4CD5-7315-48CE-8A01-122B0662BAA5} - {5265BA8E-F1A9-436A-9A19-2AC97373E3D2} = {A76C4CD5-7315-48CE-8A01-122B0662BAA5} {8833072A-796E-43D9-840C-346F4C80409E} = {EB447513-2400-44A6-B2B1-A3E53EBFC999} + {72279C45-BCD5-4F61-8E2B-179DED8BE123} = {A76C4CD5-7315-48CE-8A01-122B0662BAA5} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {9FE02341-2660-48BD-A738-C721556C415E} diff --git a/README.md b/README.md index 81c0651..ade2216 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,37 @@ # Blazor.GoogleMap -Blazor component for GoogleMap which allows to manipulate with GoogleMap just with C# language and no JS is required. +Blazor(Server) component for Google Map which allows to mapping features just with C# language and ASP.NET Core 3.0 + +Blazor Web Assembly is still in preview for ASP.NET Core 3.0 and its' API(s) are still changing a lot. So Blazor.GoogleMap.Client project is removed for now. ## IMPORTANT! -This is very very first preview version and API it will increase and also documentation. +This is just a preview version of the component but ready to use in PROD at your own risj. +In future new features will be added. Feel free to send PR(s). # Instalation -[![NuGet Pre Release](https://img.shields.io/badge/nuget-0.0.2--preview-orange.svg)](https://www.nuget.org/packages/BlazorMap) +Soon # Setup +Just add ``AddGoogleMaps`` service extension to default service collection of the application. Also don't forget to check other options. + ```cs public void ConfigureServices(IServiceCollection services) { services.AddGoogleMaps(options => { - options.ApiKey = "Your Google Maps Api Key"; + options.ApiKey = "Your Google Maps Api Key"; }); } ``` +Also don't forget to add following .js files into _Host.cshtml file as below + +```html + + + + +``` + # Features * Add marker to the map * Add OnClick, OnDoubleClick event listeners on the map and marker @@ -37,10 +51,11 @@ If you add marker into map whit filled property **AssociatedInfoWindowId**, afte @page "/map" @inject MarkerCollectionFactory MarkerCollectionFactory; @inject InfoWindow InfoWindow; +@inject IJSRuntime JsRuntime;

Google Map

- +

Infowindow 1

@@ -50,7 +65,7 @@ If you add marker into map whit filled property **AssociatedInfoWindowId**, afte } - +
@@ -63,7 +78,7 @@ If you add marker into map whit filled property **AssociatedInfoWindowId**, afte } - + @@ -72,9 +87,9 @@ If you add marker into map whit filled property **AssociatedInfoWindowId**, afte IMarkerCollection markers; Marker selectedMarker; - protected override void OnInit() + protected async override Task OnInitializedAsync() { - base.OnInit(); + await base.OnInitializedAsync(); markers = MarkerCollectionFactory.Create(); } diff --git a/demo/Blazor.GoogleMap.Client/App.razor b/demo/Blazor.GoogleMap.Client/App.razor deleted file mode 100644 index 80fb778..0000000 --- a/demo/Blazor.GoogleMap.Client/App.razor +++ /dev/null @@ -1 +0,0 @@ - diff --git a/demo/Blazor.GoogleMap.Client/Blazor.GoogleMap.Client.csproj b/demo/Blazor.GoogleMap.Client/Blazor.GoogleMap.Client.csproj deleted file mode 100644 index 05d1f26..0000000 --- a/demo/Blazor.GoogleMap.Client/Blazor.GoogleMap.Client.csproj +++ /dev/null @@ -1,24 +0,0 @@ - - - - netstandard2.0 - Exe - - https://dotnet.myget.org/F/aspnetcore-dev/api/v3/index.json; - https://dotnet.myget.org/F/blazor-dev/api/v3/index.json; - - 7.3 - 3.0 - - - - - - - - - - - - - diff --git a/demo/Blazor.GoogleMap.Client/Pages/FetchData.razor b/demo/Blazor.GoogleMap.Client/Pages/FetchData.razor deleted file mode 100644 index b82f1a2..0000000 --- a/demo/Blazor.GoogleMap.Client/Pages/FetchData.razor +++ /dev/null @@ -1,45 +0,0 @@ -@page "/fetchdata" -@using Blazor.GoogleMap.Shared -@inject HttpClient Http - -

Weather forecast

- -

This component demonstrates fetching data from the server.

- -@if (forecasts == null) -{ -

Loading...

-} -else -{ - - - - - - - - - - - @foreach (var forecast in forecasts) - { - - - - - - - } - -
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
-} - -@functions { - WeatherForecast[] forecasts; - - protected override async Task OnInitAsync() - { - forecasts = await Http.GetJsonAsync("api/SampleData/WeatherForecasts"); - } -} diff --git a/demo/Blazor.GoogleMap.Client/Pages/Index.razor b/demo/Blazor.GoogleMap.Client/Pages/Index.razor deleted file mode 100644 index e54d914..0000000 --- a/demo/Blazor.GoogleMap.Client/Pages/Index.razor +++ /dev/null @@ -1,7 +0,0 @@ -@page "/" - -

Hello, world!

- -Welcome to your new app. - - diff --git a/demo/Blazor.GoogleMap.Client/Pages/_Imports.razor b/demo/Blazor.GoogleMap.Client/Pages/_Imports.razor deleted file mode 100644 index 0f24eda..0000000 --- a/demo/Blazor.GoogleMap.Client/Pages/_Imports.razor +++ /dev/null @@ -1 +0,0 @@ -@layout MainLayout diff --git a/demo/Blazor.GoogleMap.Client/Program.cs b/demo/Blazor.GoogleMap.Client/Program.cs deleted file mode 100644 index 95a911d..0000000 --- a/demo/Blazor.GoogleMap.Client/Program.cs +++ /dev/null @@ -1,16 +0,0 @@ -using Microsoft.AspNetCore.Blazor.Hosting; - -namespace Blazor.GoogleMap.Client -{ - public class Program - { - public static void Main(string[] args) - { - CreateHostBuilder(args).Build().Run(); - } - - public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) => - BlazorWebAssemblyHost.CreateDefaultBuilder() - .UseBlazorStartup(); - } -} diff --git a/demo/Blazor.GoogleMap.Client/Shared/NavMenu.razor b/demo/Blazor.GoogleMap.Client/Shared/NavMenu.razor deleted file mode 100644 index 242dc90..0000000 --- a/demo/Blazor.GoogleMap.Client/Shared/NavMenu.razor +++ /dev/null @@ -1,37 +0,0 @@ - - -
- -
- -@functions { - bool collapseNavMenu = true; - - string NavMenuCssClass => collapseNavMenu ? "collapse" : null; - - void ToggleNavMenu() - { - collapseNavMenu = !collapseNavMenu; - } -} diff --git a/demo/Blazor.GoogleMap.Client/Shared/SurveyPrompt.razor b/demo/Blazor.GoogleMap.Client/Shared/SurveyPrompt.razor deleted file mode 100644 index 1db3c13..0000000 --- a/demo/Blazor.GoogleMap.Client/Shared/SurveyPrompt.razor +++ /dev/null @@ -1,15 +0,0 @@ - - -@functions { - // Demonstrates how a parent component can supply parameters - [Parameter] string Title { get; set; } -} diff --git a/demo/Blazor.GoogleMap.Client/Startup.cs b/demo/Blazor.GoogleMap.Client/Startup.cs deleted file mode 100644 index 5a2114f..0000000 --- a/demo/Blazor.GoogleMap.Client/Startup.cs +++ /dev/null @@ -1,21 +0,0 @@ -using Microsoft.AspNetCore.Components.Builder; -using Microsoft.Extensions.DependencyInjection; - -namespace Blazor.GoogleMap.Client -{ - public class Startup - { - public void ConfigureServices(IServiceCollection services) - { - services.AddGoogleMaps(options => - { - options.ApiKey = "AIzaSyDdjy-3jYU9UvXJLoTPzSyAhMH-kkiK6h4"; - }); - } - - public void Configure(IComponentsApplicationBuilder app) - { - app.AddComponent("app"); - } - } -} diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/index.html b/demo/Blazor.GoogleMap.Client/wwwroot/index.html deleted file mode 100644 index 8e6633b..0000000 --- a/demo/Blazor.GoogleMap.Client/wwwroot/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - Blazor.GoogleMap - - - - - - Loading... - - - - diff --git a/demo/Blazor.GoogleMap.Server/App.razor b/demo/Blazor.GoogleMap.Server/App.razor new file mode 100644 index 0000000..1c360b7 --- /dev/null +++ b/demo/Blazor.GoogleMap.Server/App.razor @@ -0,0 +1,10 @@ + + + + + + +

Sorry, there's nothing at this address.

+
+
+
diff --git a/demo/Blazor.GoogleMap.Server/Blazor.GoogleMap.Server.csproj b/demo/Blazor.GoogleMap.Server/Blazor.GoogleMap.Server.csproj index 8c68f54..702b6e2 100644 --- a/demo/Blazor.GoogleMap.Server/Blazor.GoogleMap.Server.csproj +++ b/demo/Blazor.GoogleMap.Server/Blazor.GoogleMap.Server.csproj @@ -1,22 +1,25 @@ - + netcoreapp3.0 - - https://dotnet.myget.org/F/aspnetcore-dev/api/v3/index.json; - https://dotnet.myget.org/F/blazor-dev/api/v3/index.json; - - 7.3 - - + + - - + + blazor:js:%(RecursiveDir)%(Filename)%(Extension) + + + blazor:js:%(RecursiveDir)%(Filename)%(Extension) + + + + + diff --git a/demo/Blazor.GoogleMap.Server/Controllers/SampleDataController.cs b/demo/Blazor.GoogleMap.Server/Controllers/SampleDataController.cs deleted file mode 100644 index cabe7f7..0000000 --- a/demo/Blazor.GoogleMap.Server/Controllers/SampleDataController.cs +++ /dev/null @@ -1,30 +0,0 @@ -using Blazor.GoogleMap.Shared; -using Microsoft.AspNetCore.Mvc; -using System; -using System.Collections.Generic; -using System.Linq; -using System.Threading.Tasks; - -namespace Blazor.GoogleMap.Server.Controllers -{ - [Route("api/[controller]")] - public class SampleDataController : Controller - { - private static string[] Summaries = new[] - { - "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" - }; - - [HttpGet("[action]")] - public IEnumerable WeatherForecasts() - { - var rng = new Random(); - return Enumerable.Range(1, 5).Select(index => new WeatherForecast - { - Date = DateTime.Now.AddDays(index), - TemperatureC = rng.Next(-20, 55), - Summary = Summaries[rng.Next(Summaries.Length)] - }); - } - } -} diff --git a/demo/Blazor.GoogleMap.Server/Pages/Error.razor b/demo/Blazor.GoogleMap.Server/Pages/Error.razor new file mode 100644 index 0000000..79929d7 --- /dev/null +++ b/demo/Blazor.GoogleMap.Server/Pages/Error.razor @@ -0,0 +1,16 @@ +@page "/error" + + +

Error.

+

An error occurred while processing your request.

+ +

Development Mode

+

+ Swapping to Development environment will display more detailed information about the error that occurred. +

+

+ The Development environment shouldn't be enabled for deployed applications. + It can result in displaying sensitive information from exceptions to end users. + For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development + and restarting the app. +

\ No newline at end of file diff --git a/demo/Blazor.GoogleMap.Client/Pages/Map.razor b/demo/Blazor.GoogleMap.Server/Pages/Index.razor similarity index 53% rename from demo/Blazor.GoogleMap.Client/Pages/Map.razor rename to demo/Blazor.GoogleMap.Server/Pages/Index.razor index a693914..8a3eabd 100644 --- a/demo/Blazor.GoogleMap.Client/Pages/Map.razor +++ b/demo/Blazor.GoogleMap.Server/Pages/Index.razor @@ -1,10 +1,15 @@ -@page "/map" +@page "/" + +

Hello, world!

+ @inject MarkerCollectionFactory MarkerCollectionFactory; -@inject InfoWindow InfoWindow; +@inject InfoWindow InfoWindow +@inject IJSRuntime JsRuntime; + +

This is a Google Map component demo for a Blazor App.

-

Google Map

+ -

Infowindow 1

@@ -13,8 +18,8 @@

@selectedMarker.Id

} + -
@@ -26,8 +31,8 @@

@selectedMarker.Id

} + - @@ -36,43 +41,33 @@ IMarkerCollection markers; Marker selectedMarker; - protected override void OnInit() + + protected async override Task OnInitializedAsync() { - base.OnInit(); + await base.OnInitializedAsync(); markers = MarkerCollectionFactory.Create(); } - void MapOnClick(MouseEventArgs mouseEvent) + void MapOnClick(Blazor.GoogleMap.Map.Events.MouseEventArgs mouseEvent) { Console.WriteLine($"Clicked! {mouseEvent.LatLng.Lat}, {mouseEvent.LatLng.Lng}"); markers.Add(new MarkerOptions(mouseEvent.LatLng) { Title = $"Test {DateTime.Now}", AssociatedInfoWindowId = markers.Count % 2 == 0 ? "infoWindow" : "infoWindowSecond", - Animation = MarkerAnimation.Drop, - Draggable = true, - //Label = new MarkerLabel("A"), - //Icon = $"{GoogleMapConstants.IconBase}parking_lot_maps.png" - OnMarkerClick = EventCallback.Factory.Create(this, MarkerClick), - OnDragEnd = EventCallback.Factory.Create(this, MarkerDragEnd), - OnMarkerRightClick = EventCallback.Factory.Create(this, MarkerRightClick), + OnMarkerClick = EventCallback.Factory.Create(this, MarkerClick) }); } - void MapOnDoubleClick(MouseEventArgs mouseEvent) + void MapOnDoubleClick(Blazor.GoogleMap.Map.Events.MouseEventArgs mouseEvent) { Console.WriteLine($"DoubleClicked! {mouseEvent.LatLng.Lat}, {mouseEvent.LatLng.Lng}"); } - Task MarkerClick(Marker marker) + void MarkerClick(Marker marker) { selectedMarker = marker; Console.WriteLine(marker.Options.Title); - - return Task.WhenAll( - selectedMarker.SetOpacity(0.5), - selectedMarker.SetIcon($"{GoogleMapConstants.IconBase}parking_lot_maps.png") - ); } async Task RemoveMarker() @@ -83,14 +78,4 @@ Console.WriteLine($"Marker removed: {removedResult}"); } } - - void MarkerDragEnd(Marker marker) - { - Console.WriteLine($"MarkerDragEnd: {marker.Options.Position}"); - } - - void MarkerRightClick(Marker marker) - { - marker.OpenInfoWindow(new MarkupString("

Simple static content

")); - } } diff --git a/demo/Blazor.GoogleMap.Server/Pages/_Host.cshtml b/demo/Blazor.GoogleMap.Server/Pages/_Host.cshtml new file mode 100644 index 0000000..f9ec138 --- /dev/null +++ b/demo/Blazor.GoogleMap.Server/Pages/_Host.cshtml @@ -0,0 +1,25 @@ +@page "/" +@namespace Blazor.GoogleMap.Server.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers + + + + + + + Blazor.GoogleMap.Server + + + + + + + @(await Html.RenderComponentAsync(RenderMode.ServerPrerendered)) + + + + + + + + diff --git a/demo/Blazor.GoogleMap.Server/Program.cs b/demo/Blazor.GoogleMap.Server/Program.cs index 3dacac5..3521b96 100644 --- a/demo/Blazor.GoogleMap.Server/Program.cs +++ b/demo/Blazor.GoogleMap.Server/Program.cs @@ -1,6 +1,13 @@ -using Microsoft.AspNetCore; +using System; +using System.Collections.Generic; +using System.IO; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.Hosting; +using Microsoft.Extensions.Logging; namespace Blazor.GoogleMap.Server { @@ -8,15 +15,14 @@ public class Program { public static void Main(string[] args) { - BuildWebHost(args).Run(); + CreateHostBuilder(args).Build().Run(); } - public static IWebHost BuildWebHost(string[] args) => - WebHost.CreateDefaultBuilder(args) - .UseConfiguration(new ConfigurationBuilder() - .AddCommandLine(args) - .Build()) - .UseStartup() - .Build(); + public static IHostBuilder CreateHostBuilder(string[] args) => + Host.CreateDefaultBuilder(args) + .ConfigureWebHostDefaults(webBuilder => + { + webBuilder.UseStartup(); + }); } } diff --git a/demo/Blazor.GoogleMap.Client/Shared/MainLayout.razor b/demo/Blazor.GoogleMap.Server/Shared/MainLayout.razor similarity index 70% rename from demo/Blazor.GoogleMap.Client/Shared/MainLayout.razor rename to demo/Blazor.GoogleMap.Server/Shared/MainLayout.razor index 0f4e22a..9b5407d 100644 --- a/demo/Blazor.GoogleMap.Client/Shared/MainLayout.razor +++ b/demo/Blazor.GoogleMap.Server/Shared/MainLayout.razor @@ -6,7 +6,7 @@
- About + About
diff --git a/demo/Blazor.GoogleMap.Server/Shared/NavMenu.razor b/demo/Blazor.GoogleMap.Server/Shared/NavMenu.razor new file mode 100644 index 0000000..2127987 --- /dev/null +++ b/demo/Blazor.GoogleMap.Server/Shared/NavMenu.razor @@ -0,0 +1,27 @@ + + +
+ +
+ +@code { + bool collapseNavMenu = true; + + string NavMenuCssClass => collapseNavMenu ? "collapse" : null; + + void ToggleNavMenu() + { + collapseNavMenu = !collapseNavMenu; + } +} diff --git a/demo/Blazor.GoogleMap.Server/Startup.cs b/demo/Blazor.GoogleMap.Server/Startup.cs index 4d8bb09..0343329 100644 --- a/demo/Blazor.GoogleMap.Server/Startup.cs +++ b/demo/Blazor.GoogleMap.Server/Startup.cs @@ -1,46 +1,57 @@ using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; -using Microsoft.AspNetCore.ResponseCompression; +using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; -using Newtonsoft.Json.Serialization; -using System.Linq; namespace Blazor.GoogleMap.Server { public class Startup { + public Startup(IConfiguration configuration) + { + Configuration = configuration; + } + + public IConfiguration Configuration { get; } + // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { - services.AddMvc().AddNewtonsoftJson(); - services.AddResponseCompression(opts => + services.AddRazorPages(); + services.AddServerSideBlazor().AddCircuitOptions(options => options.DetailedErrors = true); + + services.AddGoogleMaps(options => { - opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat( - new[] { "application/octet-stream" }); + options.ApiKey = Configuration["GoogleAPI"]; }); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { - app.UseResponseCompression(); - if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); - app.UseBlazorDebugging(); + } + else + { + app.UseExceptionHandler("/Error"); + // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. + app.UseHsts(); } + app.UseHttpsRedirection(); + app.UseStaticFiles(); + app.UseRouting(); app.UseEndpoints(endpoints => { - endpoints.MapDefaultControllerRoute(); + endpoints.MapBlazorHub(); + endpoints.MapFallbackToPage("/_Host"); }); - - app.UseBlazor(); } } } diff --git a/demo/Blazor.GoogleMap.Client/_Imports.razor b/demo/Blazor.GoogleMap.Server/_Imports.razor similarity index 56% rename from demo/Blazor.GoogleMap.Client/_Imports.razor rename to demo/Blazor.GoogleMap.Server/_Imports.razor index b6b2538..0310bd2 100644 --- a/demo/Blazor.GoogleMap.Client/_Imports.razor +++ b/demo/Blazor.GoogleMap.Server/_Imports.razor @@ -1,10 +1,12 @@ -@using System.Net.Http +@using System.Net.Http +@using Microsoft.AspNetCore.Authorization +@using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.Layouts @using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web @using Microsoft.JSInterop -@using Blazor.GoogleMap.Client -@using Blazor.GoogleMap.Client.Shared +@using Blazor.GoogleMap.Server +@using Blazor.GoogleMap.Server.Shared @using Blazor.GoogleMap.Components; @using Blazor.GoogleMap.Map.Events; @using Blazor.GoogleMap.Map.Markers; diff --git a/demo/Blazor.GoogleMap.Server/appsettings.json b/demo/Blazor.GoogleMap.Server/appsettings.json new file mode 100644 index 0000000..ff17aef --- /dev/null +++ b/demo/Blazor.GoogleMap.Server/appsettings.json @@ -0,0 +1,11 @@ +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft": "Warning", + "Microsoft.Hosting.Lifetime": "Information" + } + }, + "AllowedHosts": "*", + "GoogleAPI": "" +} diff --git a/demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapInterop.js b/demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapInterop.js new file mode 100644 index 0000000..9a1db77 --- /dev/null +++ b/demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapInterop.js @@ -0,0 +1,75 @@ +// This file is to show how a library package may provide JavaScript interop features +// wrapped in a .NET API + +window.blazorGoogleMap = { + infoWindowContentNodes: [], + + initMapCallback: function () { + var currentThis = this === window + ? this.blazorGoogleMap + : this; + + currentThis.map = new google.maps.Map(document.getElementById('map'), currentThis.initialMapOptions); + currentThis.infoWindow = new google.maps.InfoWindow(); + + if (currentThis.eventHandlersInvoker === undefined) { + return false; + } + + currentThis.initDotnetCallback.invokeMethodAsync('OnInitFinished'); + currentThis.eventHandlersInvoker.invokeMethodAsync('GetMouseEvents') + .then((events) => { + events.map(eventName => { + currentThis.map.addListener(eventName, + (function (e) { + return this.eventHandlersInvoker + .invokeMethodAsync('InvokeMouseEvent', eventName, e); + }).bind(currentThis) + ); + }); + }); + + return true; + }, + + initMap: function (initialMapOptions) { + blazorGoogleMap.initialMapOptions = initialMapOptions; + }, + + openInfoWindow: function (id, positionableObject, htmlContent) { + var content = {}; + if (htmlContent !== undefined) { + content = htmlContent; + } else { + var nodeContent = blazorGoogleMap.infoWindowContentNodes.find(function (n) { + return n.id === id; + }); + + if (nodeContent === undefined) { + var node = document.getElementById(id); + node.removeAttribute("style"); + blazorGoogleMap.infoWindowContentNodes.push({ id: id, node: node }); + content = node; + } else { + content = nodeContent.node; + } + } + + blazorGoogleMap.infoWindow.setContent(content); + + var marker = blazorGoogleMap.markersModule.findMarker(positionableObject.id); + if (marker !== undefined) { + blazorGoogleMap.infoWindow.open(blazorGoogleMap.map, marker); + } else { + blazorGoogleMap.infoWindow.setPosition(positionableObject.position); + blazorGoogleMap.infoWindow.open(blazorGoogleMap.map); + } + }, + registerEventInvokers: function (eventHandlersInvoker, initDotnetCallback) { + if (blazorGoogleMap) { + + blazorGoogleMap.eventHandlersInvoker = eventHandlersInvoker; + blazorGoogleMap.initDotnetCallback = initDotnetCallback; + } + } +}; diff --git a/demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapMarkerInterop.js b/demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapMarkerInterop.js new file mode 100644 index 0000000..687fd83 --- /dev/null +++ b/demo/Blazor.GoogleMap.Server/wwwroot/GoogleMapMarkerInterop.js @@ -0,0 +1,109 @@ +window.blazorGoogleMap = window.blazorGoogleMap || {}; +window.blazorGoogleMap.markersModule = { + markers: [], + + addMarker: function (markerRef, marker, markerId) { + var that = blazorGoogleMap.markersModule; + var mapMarker = new google.maps.Marker({ + map: blazorGoogleMap.map, + position: marker.position, + title: marker.title, + animation: marker.animation, + label: marker.label, + icon: marker.icon, + opacity: marker.opacity, + draggable: marker.draggable, + clickable: marker.clickable, + cursor: marker.cursor + }); + + mapMarker.addListener('dragend', function (e) { + return markerRef.invokeMethodAsync('OnDragEndHandle', e); + }); + + if (marker.onClick !== null) { + mapMarker.addListener('click', function () { + return markerRef.invokeMethodAsync('OnClickHandle'); + }); + } + + if (marker.onMarkerRightClick !== null) { + mapMarker.addListener('rightclick', function () { + return markerRef.invokeMethodAsync('OnRightClickHandle'); + }); + } + + if (marker.onMarkerDblClick !== null) { + mapMarker.addListener('dblclick', function () { + return markerRef.invokeMethodAsync('OnDoubleClickHandle'); + }); + } + + mapMarker.id = markerId; + that.markers.push({ mapMarker: mapMarker, markerRef: markerRef }); + + return true; + }, + + removeMarker: function (markerId) { + var markerPair = blazorGoogleMap.markersModule.markers.find(function (m) { + return m.mapMarker.id === markerId; + }); + + if (markerPair === undefined) { + return false; + } + + markerPair.mapMarker.setMap(null); + const filteredMarkers = blazorGoogleMap.markersModule.markers.filter( + function (marker) { + return marker.id !== markerId; + } + ); + + var removeResult = filteredMarkers.length === blazorGoogleMap.markersModule.markers.length - 1; + blazorGoogleMap.markersModule.markers = filteredMarkers; + + return removeResult; + }, + + setAnimation: function (markerId, animation) { + var marker =blazorGoogleMap.markersModule.findMarker(markerId); + if (marker !== undefined) { + marker.setAnimation(animation); + } + }, + + setIcon: function (markerId, icon) { + var marker = blazorGoogleMap.markersModule.findMarker(markerId); + if (marker !== undefined) { + marker.setIcon(icon); + } + }, + + setOpacity: function (markerId, opacity) { + var marker = blazorGoogleMap.markersModule.findMarker(markerId); + if (marker !== undefined) { + marker.setOpacity(opacity); + } + }, + + setVisibility: function (markerId, visible) { + var marker = blazorGoogleMap.markersModule.findMarker(markerId); + if (marker !== undefined) { + marker.setVisible(visible); + } + }, + + findMarker: function (markerId) { + var that = this === window + ? blazorGoogleMap.markersModule + : this; + + var marker = that.markers.find(function (m) { + return m.mapMarker.id === markerId; + }); + + return marker.mapMarker; + } +}; \ No newline at end of file diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/bootstrap/bootstrap.min.css b/demo/Blazor.GoogleMap.Server/wwwroot/css/bootstrap/bootstrap.min.css similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/bootstrap/bootstrap.min.css rename to demo/Blazor.GoogleMap.Server/wwwroot/css/bootstrap/bootstrap.min.css diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/bootstrap/bootstrap.min.css.map b/demo/Blazor.GoogleMap.Server/wwwroot/css/bootstrap/bootstrap.min.css.map similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/bootstrap/bootstrap.min.css.map rename to demo/Blazor.GoogleMap.Server/wwwroot/css/bootstrap/bootstrap.min.css.map diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/FONT-LICENSE b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/FONT-LICENSE similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/FONT-LICENSE rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/FONT-LICENSE diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/ICON-LICENSE b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/ICON-LICENSE similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/ICON-LICENSE rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/ICON-LICENSE diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/README.md b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/README.md similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/README.md rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/README.md diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.eot b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.eot rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.otf b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.otf rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.svg b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.svg similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.svg rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.svg diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.woff b/demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff similarity index 100% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/open-iconic/font/fonts/open-iconic.woff rename to demo/Blazor.GoogleMap.Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff diff --git a/demo/Blazor.GoogleMap.Client/wwwroot/css/site.css b/demo/Blazor.GoogleMap.Server/wwwroot/css/site.css similarity index 56% rename from demo/Blazor.GoogleMap.Client/wwwroot/css/site.css rename to demo/Blazor.GoogleMap.Server/wwwroot/css/site.css index fa2c7f1..c127ff7 100644 --- a/demo/Blazor.GoogleMap.Client/wwwroot/css/site.css +++ b/demo/Blazor.GoogleMap.Server/wwwroot/css/site.css @@ -1,9 +1,19 @@ -@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); +@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } +a, .btn-link { + color: #0366d6; +} + +.btn-primary { + color: #fff; + background-color: #1b6ec2; + border-color: #1861ac; +} + app { position: relative; display: flex; @@ -20,61 +30,66 @@ app { flex: 1; } - .main .top-row { - background-color: #e6e6e6; - border-bottom: 1px solid #d6d5d5; - } +.main .top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; +} + +.main .top-row > a { + margin-left: 1.5rem; +} .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); } - .sidebar .top-row { - background-color: rgba(0,0,0,0.4); - } +.sidebar .top-row { + background-color: rgba(0,0,0,0.4); +} - .sidebar .navbar-brand { - font-size: 1.1rem; - } +.sidebar .navbar-brand { + font-size: 1.1rem; +} - .sidebar .oi { - width: 2rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; - } +.sidebar .oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; +} .nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; } - .nav-item:first-of-type { - padding-top: 1rem; - } +.nav-item:first-of-type { + padding-top: 1rem; +} - .nav-item:last-of-type { - padding-bottom: 1rem; - } +.nav-item:last-of-type { + padding-bottom: 1rem; +} - .nav-item a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - } +.nav-item a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; +} - .nav-item a.active { - background-color: rgba(255,255,255,0.25); - color: white; - } +.nav-item a.active { + background-color: rgba(255,255,255,0.25); + color: white; +} - .nav-item a:hover { - background-color: rgba(255,255,255,0.1); - color: white; - } +.nav-item a:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} .content { padding-top: 1.1rem; diff --git a/demo/Blazor.GoogleMap.Server/wwwroot/favicon.ico b/demo/Blazor.GoogleMap.Server/wwwroot/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a3a799985c43bc7309d701b2cad129023377dc71 GIT binary patch literal 32038 zcmeHwX>eTEbtY7aYbrGrkNjgie?1jXjZ#zP%3n{}GObKv$BxI7Sl;Bwl5E+Qtj&t8 z*p|m4DO#HoJC-FyvNnp8NP<{Na0LMnTtO21(rBP}?EAiNjWgeO?z`{3ZoURUQlV2d zY1Pqv{m|X_oO91|?^z!6@@~od!@OH>&BN;>c@O+yUfy5w>LccTKJJ&`-k<%M^Zvi( z<$dKp=jCnNX5Qa+M_%6g|IEv~4R84q9|7E=|Ho(Wz3f-0wPjaRL;W*N^>q%^KGRr7 zxbjSORb_c&eO;oV_DZ7ua!sPH=0c+W;`vzJ#j~-x3uj};50#vqo*0w4!LUqs*UCh9 zvy2S%$#8$K4EOa&e@~aBS65_hc~Mpu=454VT2^KzWqEpBA=ME|O;1cn?8p<+{MKJf zbK#@1wzL44m$k(?85=Obido7=C|xWKe%66$z)NrzRwR>?hK?_bbwT z@Da?lBrBL}Zemo1@!9pYRau&!ld17h{f+UV0sY(R{ET$PBB|-=Nr@l-nY6w8HEAw* zRMIQU`24Jl_IFEPcS=_HdrOP5yf81z_?@M>83Vv65$QFr9nPg(wr`Ke8 zaY4ogdnMA*F7a4Q1_uXadTLUpCk;$ZPRRJ^sMOch;rlbvUGc1R9=u;dr9YANbQ<4Z z#P|Cp9BP$FXNPolgyr1XGt$^lFPF}rmBF5rj1Kh5%dforrP8W}_qJL$2qMBS-#%-|s#BPZBSETsn_EBYcr(W5dq( z@f%}C|iN7)YN`^)h7R?Cg}Do*w-!zwZb9=BMp%Wsh@nb22hA zA{`wa8Q;yz6S)zfo%sl08^GF`9csI9BlGnEy#0^Y3b);M+n<(}6jziM7nhe57a1rj zC@(2ISYBL^UtWChKzVWgf%4LW2Tqg_^7jMw`C$KvU+mcakFjV(BGAW9g%CzSyM;Df z143=mq0oxaK-H;o>F3~zJ<(3-j&?|QBn)WJfP#JR zRuA;`N?L83wQt78QIA$(Z)lGQY9r^SFal;LB^qi`8%8@y+mwcGsf~nv)bBy2S7z~9 z=;X@Gglk)^jpbNz?1;`!J3QUfAOp4U$Uxm5>92iT`mek#$>s`)M>;e4{#%HAAcb^8_Ax%ersk|}# z0bd;ZPu|2}18KtvmIo8`1@H~@2ejwo(5rFS`Z4&O{$$+ch2hC0=06Jh`@p+p8LZzY z&2M~8T6X^*X?yQ$3N5EzRv$(FtSxhW>>ABUyp!{484f8(%C1_y)3D%Qgfl_!sz`LTXOjR&L!zPA0qH_iNS!tY{!^2WfD%uT}P zI<~&?@&))5&hPPHVRl9);TPO>@UI2d!^ksb!$9T96V(F){puTsn(}qt_WXNw4VvHj zf;6A_XCvE`Z@}E-IOaG0rs>K>^=Sr&OgT_p;F@v0VCN0Y$r|Lw1?Wjt`AKK~RT*kJ z2>QPuVgLNcF+XKno;WBv$yj@d_WFJbl*#*V_Cwzo@%3n5%z4g21G*PVZ)wM5$A{klYozmGlB zT@u2+s}=f}25%IA!yNcXUr!!1)z(Nqbhojg0lv@7@0UlvUMT)*r;M$d0-t)Z?B1@qQk()o!4fqvfr_I0r7 zy1(NdkHEj#Yu{K>T#We#b#FD=c1XhS{hdTh9+8gy-vkcdkk*QS@y(xxEMb1w6z<^~ zYcETGfB#ibR#ql0EiD;PR$L&Vrh2uRv5t_$;NxC;>7_S5_OXxsi8udY3BUUdi55Sk zcyKM+PQ9YMA%D1kH1q48OFG(Gbl=FmV;yk8o>k%0$rJ8%-IYsHclnYuTskkaiCGkUlkMY~mx&K}XRlKIW;odWIeuKjtbc^8bBOTqK zjj(ot`_j?A6y_h%vxE9o*ntx#PGrnK7AljD_r58ylE*oy@{IY%+mA^!|2vW_`>`aC{#3`#3;D_$^S^cM zRcF+uTO2sICledvFgNMU@A%M)%8JbSLq{dD|2|2Sg8vvh_uV6*Q?F&rKaV{v_qz&y z`f;stIb?Cb2!Cg7CG91Bhu@D@RaIrq-+o+T2fwFu#|j>lD6ZS9-t^5cx>p|?flqUA z;Cgs#V)O#`Aw4$Kr)L5?|7f4izl!;n0jux}tEW$&&YBXz9o{+~HhoiYDJ`w5BVTl&ARya=M7zdy$FEe}iGBur8XE>rhLj&_yDk5D4n2GJZ07u7%zyAfNtOLn;)M?h*Py-Xtql5aJOtL4U8e|!t? z((sc6&OJXrPdVef^wZV&x=Z&~uA7^ix8rly^rEj?#d&~pQ{HN8Yq|fZ#*bXn-26P^ z5!)xRzYO9{u6vx5@q_{FE4#7BipS#{&J7*>y}lTyV94}dfE%Yk>@@pDe&F7J09(-0|wuI|$of-MRfK51#t@t2+U|*s=W; z!Y&t{dS%!4VEEi$efA!#<<7&04?kB}Soprd8*jYv;-Qj~h~4v>{XX~kjF+@Z7<t?^|i z#>_ag2i-CRAM8Ret^rZt*^K?`G|o>1o(mLkewxyA)38k93`<~4VFI?5VB!kBh%NNU zxb8K(^-MU1ImWQxG~nFB-Un;6n{lQz_FfsW9^H$Xcn{;+W^ZcG$0qLM#eNV=vGE@# z1~k&!h4@T|IiI<47@pS|i?Qcl=XZJL#$JKve;booMqDUYY{(xcdj6STDE=n?;fsS1 ze`h~Q{CT$K{+{t+#*I1=&&-UU8M&}AwAxD-rMa=e!{0gQXP@6azBq9(ji11uJF%@5 zCvV`#*?;ZguQ7o|nH%bm*s&jLej#@B35gy32ZAE0`Pz@#j6R&kN5w{O4~1rhDoU zEBdU)%Nl?8zi|DR((u|gg~r$aLYmGMyK%FO*qLvwxK5+cn*`;O`16c!&&XT{$j~5k zXb^fbh1GT-CI*Nj{-?r7HNg=e3E{6rxuluPXY z5Nm8ktc$o4-^SO0|Es_sp!A$8GVwOX+%)cH<;=u#R#nz;7QsHl;J@a{5NUAmAHq4D zIU5@jT!h?kUp|g~iN*!>jM6K!W5ar0v~fWrSHK@})@6Lh#h)C6F6@)&-+C3(zO! z8+kV|B7LctM3DpI*~EYo>vCj>_?x&H;>y0*vKwE0?vi$CLt zfSJB##P|M2dEUDBPKW=9cY-F;L;h3Fs4E2ERdN#NSL7ctAC z?-}_a{*L@GA7JHJudxtDVA{K5Yh*k(%#x4W7w+^ zcb-+ofbT5ieG+@QG2lx&7!MyE2JWDP@$k`M;0`*d+oQmJ2A^de!3c53HFcfW_Wtv< zKghQ;*FifmI}kE4dc@1y-u;@qs|V75Z^|Q0l0?teobTE8tGl@EB?k#q_wUjypJ*R zyEI=DJ^Z+d*&}B_xoWvs27LtH7972qqMxVFcX9}c&JbeNCXUZM0`nQIkf&C}&skSt z^9fw@b^Hb)!^hE2IJq~~GktG#ZWwWG<`@V&ckVR&r=JAO4YniJewVcG`HF;59}=bf zLyz0uxf6MhuSyH#-^!ZbHxYl^mmBVrx) zyrb8sQ*qBd_WXm9c~Of$&ZP$b^)<~0%nt#7y$1Jg$e}WCK>TeUB{P>|b1FAB?%K7>;XiOfd}JQ`|IP#Vf%kVy zXa4;XFZ+>n;F>uX&3|4zqWK2u3c<>q;tzjsb1;d{u;L$-hq3qe@82(ob<3qom#%`+ z;vzYAs7TIMl_O75BXu|r`Qhc4UT*vN$3Oo0kAC!{f2#HexDy|qUpgTF;k{o6|L>7l z=?`=*LXaow1o;oNNLXsGTrvC)$R&{m=94Tf+2iTT3Y_Or z-!;^0a{kyWtO4vksG_3cyc7HQ0~detf0+2+qxq(e1NS251N}w5iTSrM)`0p8rem!j zZ56hGD=pHI*B+dd)2B`%|9f0goozCSeXPw3 z+58k~sI02Yz#lOneJzYcG)EB0|F+ggC6D|B`6}d0khAK-gz7U3EGT|M_9$ZINqZjwf>P zJCZ=ogSoE`=yV5YXrcTQZx@Un(64*AlLiyxWnCJ9I<5Nc*eK6eV1Mk}ci0*NrJ=t| zCXuJG`#7GBbPceFtFEpl{(lTm`LX=B_!H+& z>$*Hf}}y zkt@nLXFG9%v**s{z&{H4e?aqp%&l#oU8lxUxk2o%K+?aAe6jLojA& z_|J0<-%u^<;NT*%4)n2-OdqfctSl6iCHE?W_Q2zpJken#_xUJlidzs249H=b#g z?}L4-Tnp6)t_5X?_$v)vz`s9@^BME2X@w<>sKZ3=B{%*B$T5Nj%6!-Hr;I!Scj`lH z&2dHFlOISwWJ&S2vf~@I4i~(0*T%OFiuX|eD*nd2utS4$1_JM?zmp>a#CsVy6Er^z zeNNZZDE?R3pM?>~e?H_N`C`hy%m4jb;6L#8=a7l>3eJS2LGgEUxsau-Yh9l~o7=Yh z2mYg3`m5*3Ik|lKQf~euzZlCWzaN&=vHuHtOwK!2@W6)hqq$Zm|7`Nmu%9^F6UH?+ z@2ii+=iJ;ZzhiUKu$QB()nKk3FooI>Jr_IjzY6=qxYy;&mvi7BlQ?t4kRjIhb|2q? zd^K~{-^cxjVSj?!Xs=Da5IHmFzRj!Kzh~b!?`P7c&T9s77VLYB?8_?F zauM^)p;qFG!9PHLfIsnt43UnmV?Wn?Ki7aXSosgq;f?MYUuSIYwOn(5vWhb{f%$pn z4ySN-z}_%7|B);A@PA5k*7kkdr4xZ@s{e9j+9w;*RFm;XPDQwx%~;8iBzSKTIGKO z{53ZZU*OLr@S5=k;?CM^i#zkxs3Sj%z0U`L%q`qM+tP zX$aL;*^g$7UyM2Go+_4A+f)IQcy^G$h2E zb?nT$XlgTEFJI8GN6NQf%-eVn9mPilRqUbT$pN-|;FEjq@Ao&TxpZg=mEgBHB zU@grU;&sfmqlO=6|G3sU;7t8rbK$?X0y_v9$^{X`m4jZ_BR|B|@?ZCLSPPEzz`w1n zP5nA;4(kQFKm%$enjkkBxM%Y}2si&d|62L)U(dCzCGn56HN+i#6|nV-TGIo0;W;`( zW-y=1KF4dp$$mC_|6}pbb>IHoKQeZajXQB>jVR?u`R>%l1o54?6NnS*arpVopdEF; zeC5J3*M0p`*8lif;!irrcjC?(uExejsi~>4wKYwstGY^N@KY}TujLx`S=Cu+T=!dx zKWlPm->I**E{A*q-Z^FFT5$G%7Ij0_*Mo4-y6~RmyTzUB&lfae(WZfO>um}mnsDXPEbau-!13!!xd!qh*{C)6&bz0j1I{>y$D-S)b*)JMCPk!=~KL&6Ngin0p6MCOxF2L_R9t8N!$2Wpced<#`y!F;w zKTi5V_kX&X09wAIJ#anfg9Dhn0s7(C6Nj3S-mVn(i|C6ZAVq0$hE)874co};g z^hR7pe4lU$P;*ggYc4o&UTQC%liCXooIfkI3TNaBV%t~FRr}yHu7kjQ2J*3;e%;iW zvDVCh8=G80KAeyhCuY2LjrC!Od1rvF7h}zszxGV)&!)6ChP5WAjv-zQAMNJIG!JHS zwl?pLxC-V5II#(hQ`l)ZAp&M0xd4%cxmco*MIk?{BD=BK`1vpc}D39|XlV z{c&0oGdDa~TL2FT4lh=~1NL5O-P~0?V2#ie`v^CnANfGUM!b4F=JkCwd7Q`c8Na2q zJGQQk^?6w}Vg9-{|2047((lAV84uN%sK!N2?V(!_1{{v6rdgZl56f0zDMQ+q)jKzzu^ztsVken;=DjAh6G`Cw`Q4G+BjS+n*=KI~^K{W=%t zbD-rN)O4|*Q~@<#@1Vx$E!0W9`B~IZeFn87sHMXD>$M%|Bh93rdGf1lKoX3K651t&nhsl= zXxG|%@8}Bbrlp_u#t*DZX<}_0Yb{A9*1Pd_)LtqNwy6xT4pZrOY{s?N4)pPwT(i#y zT%`lRi8U#Ken4fw>H+N`{f#FF?ZxFlLZg7z7#cr4X>id z{9kUD`d2=w_Zlb{^c`5IOxWCZ1k<0T1D1Z31IU0Q2edsZ1K0xv$pQVYq2KEp&#v#Z z?{m@Lin;*Str(C2sfF^L>{R3cjY`~#)m>Wm$Y|1fzeS0-$(Q^z@} zEO*vlb-^XK9>w&Ef^=Zzo-1AFSP#9zb~X5_+){$(eB4K z8gtW+nl{q+CTh+>v(gWrsP^DB*ge(~Q$AGxJ-eYc1isti%$%nM<_&Ev?%|??PK`$p z{f-PM{Ym8k<$$)(F9)tqzFJ?h&Dk@D?Dt{4CHKJWLs8$zy6+(R)pr@0ur)xY{=uXFFzH_> z-F^tN1y(2hG8V)GpDg%wW0Px_ep~nIjD~*HCSxDi0y`H!`V*~RHs^uQsb1*bK1qGpmd zB1m`Cjw0`nLBF2|umz+a#2X$c?Lj;M?Lj;MUp*d>7j~ayNAyj@SLpeH`)BgRH}byy zyQSat!;U{@O(<<2fp&oQkIy$z`_CQ-)O@RN;QD9T4y|wIJ^%U#(BF%=`i49}j!D-) zkOwPSJaG03SMkE~BzW}b_v>LA&y)EEYO6sbdnTX*$>UF|JhZ&^MSb4}Tgbne_4n+C zwI8U4i~PI>7a3{kVa8|))*%C0|K+bIbmV~a`|G#+`TU#g zXW;bWIcWsQi9c4X*RUDpIfyoPY)2bI-r9)xulm1CJDkQd6u+f)_N=w1ElgEBjprPF z3o?Ly0RVeY_{3~fPVckRMxe2lM8hj!B8F)JO z!`AP6>u>5Y&3o9t0QxBpNE=lJx#NyIbp1gD zzUYBIPYHIv9ngk-Zt~<)62^1Zs1LLYMh@_tP^I7EX-9)Ed0^@y{k65Gp0KRcTmMWw zU|+)qx{#q0SL+4q?Q`i0>COIIF8a0Cf&C`hbMj?LmG9K&iW-?PJt*u)38tTXAP>@R zZL6uH^!RYNq$p>PKz7f-zvg>OKXcZ8h!%Vo@{VUZp|+iUD_xb(N~G|6c#oQK^nHZU zKg#F6<)+`rf~k*Xjjye+syV{bwU2glMMMs-^ss4`bYaVroXzn`YQUd__UlZL_mLs z(vO}k!~(mi|L+(5&;>r<;|OHnbXBE78LruP;{yBxZ6y7K3)nMo-{6PCI7gQi6+rF_ zkPod!Z8n}q46ykrlQS|hVB(}(2Kf7BCZ>Vc;V>ccbk2~NGaf6wGQH@W9&?Zt3v(h*P4xDrN>ex7+jH*+Qg z%^jH$&+*!v{sQ!xkWN4+>|b}qGvEd6ANzgqoVy5Qfws}ef2QqF{iiR5{pT}PS&yjo z>lron#va-p=v;m>WB+XVz|o;UJFdjo5_!RRD|6W{4}A2a#bZv)gS_`b|KsSH)Sd_JIr%<%n06TX&t{&!H#{)?4W9hlJ`R1>FyugOh3=D_{einr zu(Wf`qTkvED+gEULO0I*Hs%f;&=`=X4;N8Ovf28x$A*11`dmfy2=$+PNqX>XcG`h% zJY&A6@&)*WT^rC(Caj}2+|X|6cICm5h0OK0cGB_!wEKFZJU)OQ+TZ1q2bTx9hxnq& z$9ee|f9|0M^)#E&Pr4)f?o&DMM4w>Ksb{hF(0|wh+5_{vPow{V%TFzU2za&gjttNi zIyR9qA56dX52Qbv2aY^g`U7R43-p`#sO1A=KS2aKgfR+Yu^bQ*i-qu z%0mP;Ap)B~zZgO9lG^`325gOf?iUHF{~7jyGC)3L(eL(SQ70VzR~wLN18tnx(Cz2~ zctBl1kI)wAe+cxWHw*NW-d;=pd+>+wd$a@GBju*wFvabSaPtHiT!o#QFC+wBVwYo3s=y;z1jM+M=Fj!FZM>UzpL-eZzOT( zhmZmEfWa=%KE#V3-ZK5#v!Hzd{zc^{ctF~- z>DT-U`}5!fk$aj24`#uGdB7r`>oX5tU|d*b|N3V1lXmv%MGrvE(dXG)^-J*LA>$LE z7kut4`zE)v{@Op|(|@i#c>tM!12FQh?}PfA0`Bp%=%*RiXVzLDXnXtE@4B)5uR}a> zbNU}q+712pIrM`k^odG8dKtG$zwHmQI^c}tfjx5?egx3!e%JRm_64e+>`Ra1IRfLb z1KQ`SxmH{cZfyVS5m(&`{V}Y4j6J{b17`h6KWqZ&hfc(oR zxM%w!$F(mKy05kY&lco3%zvLCxBW+t*rxO+i=qGMvobx0-<7`VUu)ka`){=ew+Ovt zg%52_{&UbkUA8aJPWsk)gYWV4`dnxI%s?7^fGpq{ZQuu=VH{-t7w~K%_E<8`zS;V- zKTho*>;UQQul^1GT^HCt@I-q?)&4!QDgBndn?3sNKYKCQFU4LGKJ$n@Je$&w9@E$X z^p@iJ(v&`1(tq~1zc>0Vow-KR&vm!GUzT?Eqgnc)leZ9p)-Z*C!zqb=-$XG0 z^!8RfuQs5s>Q~qcz92(a_Q+KH?C*vCTr~UdTiR`JGuNH8v(J|FTiSEcPrBpmHRtmd zI2Jng0J=bXK);YY^rM?jzn?~X-Pe`GbAy{D)Y6D&1GY-EBcy%Bq?bKh?A>DD9DD!p z?{q02wno2sraGUkZv5dx+J8)&K$)No43Zr(*S`FEdL!4C)}WE}vJd%{S6-3VUw>Wp z?Aasv`T0^%P$2vE?L+Qhj~qB~K%eW)xH(=b_jU}TLD&BP*Pc9hz@Z=e0nkpLkWl}> z_5J^i(9Z7$(XG9~I3sY)`OGZ#_L06+Dy4E>UstcP-rU@xJ$&rxvo!n1Ao`P~KLU-8 z{zDgN4-&A6N!kPSYbQ&7sLufi`YtE2uN$S?e&5n>Y4(q#|KP!cc1j)T^QrUXMPFaP z_SoYO8S8G}Z$?AL4`;pE?7J5K8yWqy23>cCT2{=-)+A$X^-I9=e!@J@A&-;Ufc)`H}c(VI&;0x zrrGv()5mjP%jXzS{^|29?bLNXS0bC%p!YXI!;O457rjCEEzMkGf~B3$T}dXBO23tP z+Ci>;5UoM?C@bU@f9G1^X3=ly&ZeFH<@|RnOG--A&)fd)AUgjw?%izq{p(KJ`EP0v z2mU)P!+3t@X14DA=E2RR-|p${GZ9ETX=d+kJRZL$nSa0daI@&oUUxnZg0xd_xu>Vz lzF#z5%kSKX?YLH3ll^(hI(_`L*t#Iva2Ede*Z;>H_ - - - netstandard2.0 - 7.3 - - - diff --git a/demo/Blazor.GoogleMap.Shared/WeatherForecast.cs b/demo/Blazor.GoogleMap.Shared/WeatherForecast.cs deleted file mode 100644 index ef56edb..0000000 --- a/demo/Blazor.GoogleMap.Shared/WeatherForecast.cs +++ /dev/null @@ -1,17 +0,0 @@ -using System; -using System.Collections.Generic; -using System.Text; - -namespace Blazor.GoogleMap.Shared -{ - public class WeatherForecast - { - public DateTime Date { get; set; } - - public int TemperatureC { get; set; } - - public string Summary { get; set; } - - public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); - } -} diff --git a/src/Blazor.GoogleMap/Blazor.GoogleMap.csproj b/src/Blazor.GoogleMap/Blazor.GoogleMap.csproj index 519d1a5..6b8f829 100644 --- a/src/Blazor.GoogleMap/Blazor.GoogleMap.csproj +++ b/src/Blazor.GoogleMap/Blazor.GoogleMap.csproj @@ -1,7 +1,7 @@  - netstandard2.0 + netcoreapp3.0 Library true false @@ -34,11 +34,8 @@ - - - - + diff --git a/src/Blazor.GoogleMap/Components/GoogleMap.cs b/src/Blazor.GoogleMap/Components/GoogleMap.cs index 335be75..aff9e0d 100644 --- a/src/Blazor.GoogleMap/Components/GoogleMap.cs +++ b/src/Blazor.GoogleMap/Components/GoogleMap.cs @@ -2,7 +2,9 @@ using Blazor.GoogleMap.Map; using Blazor.GoogleMap.Map.Events; using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Rendering; using Microsoft.AspNetCore.Components.RenderTree; +using System; using System.Threading.Tasks; namespace Blazor.GoogleMap.Components @@ -18,15 +20,15 @@ public class GoogleMap : ComponentBase [Inject] IMouseEventsInovkable MouseEventsInovkable { get; set; } - [Parameter] string Id { get; set; } = "map"; + [Parameter] public string Id { get; set; } = "map"; - [Parameter] string CssClasses { get; set; } = "map"; + [Parameter] public string CssClasses { get; set; } = "map"; - [Parameter] InitialMapOptions InitialMapOptions { get; set; } = new InitialMapOptions(); + [Parameter] public InitialMapOptions InitialMapOptions { get; set; } = new InitialMapOptions(); - [Parameter] EventCallback OnClick { get; set; } + [Parameter] public EventCallback OnClick { get; set; } - [Parameter] EventCallback OnDoubleClick { get; set; } + [Parameter] public EventCallback OnDoubleClick { get; set; } public GoogleMap() { @@ -37,45 +39,48 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) base.BuildRenderTree(builder); var internalBuilder = new BlazorRendererTreeBuilder(builder); + if(string.IsNullOrEmpty(GoogleMapOptions.Width) || string.IsNullOrEmpty(GoogleMapOptions.Height)) + { + throw new ArgumentNullException("Map width and height must have some values."); + } + internalBuilder .OpenElement("div") + .AddAttribute("style", $"width: {GoogleMapOptions.Width}; height: {GoogleMapOptions.Height}") .AddAttribute("id", Id) .AddAttribute("class", CssClasses) .OpenElement("script") .AddAttribute("async", "") .AddAttribute("defer", "") - .AddAttribute("src", GoogleMapOptions.MapJsWasIncluded - ? string.Empty - : $"https://maps.googleapis.com/maps/api/js?key={GoogleMapOptions.ApiKey}&callback=blazorGoogleMap.initMapCallback") + .AddAttribute("src", !string.IsNullOrEmpty(GoogleMapOptions.ApiKey) + ? $"https://maps.googleapis.com/maps/api/js?key={GoogleMapOptions.ApiKey}&callback=blazorGoogleMap.initMapCallback" + : string.Empty + ) .CloseElement() .CloseElement(); } - protected override async Task OnInitAsync() + protected async override Task OnAfterRenderAsync(bool firstRender) { + MouseEventsInovkable - .RegisterCallback(MouseEvent.Click, OnClick) - .RegisterCallback(MouseEvent.DblClick, OnDoubleClick); + .RegisterCallback(MouseEvent.Click, OnClick) + .RegisterCallback(MouseEvent.DblClick, OnDoubleClick); - await GoogleMapInterop.RegisterCallbacks(new Map.InitMapCallback(MapInitialized)); + await GoogleMapInterop.RegisterCallbacks(new InitMapCallback(MapInitialized)); await GoogleMapInterop.InitMap(InitialMapOptions); - } - protected override Task OnAfterRenderAsync() - { - if (GoogleMapOptions.MapJsWasIncluded && !mapWasInitialized) + if (!mapWasInitialized && firstRender) { - return GoogleMapInterop.ExecuteInitMapCallback(); + await GoogleMapInterop.ExecuteInitMapCallback(); + mapWasInitialized = true; } - - return Task.CompletedTask; } private void MapInitialized() { - GoogleMapOptions.MapJsWasIncluded = true; - mapWasInitialized = true; + //TODO: Do some extra operations if needed when map is initialized } } } diff --git a/src/Blazor.GoogleMap/Components/GoogleMapInfoWindow.cs b/src/Blazor.GoogleMap/Components/GoogleMapInfoWindow.cs index 4eccf08..8e247e4 100644 --- a/src/Blazor.GoogleMap/Components/GoogleMapInfoWindow.cs +++ b/src/Blazor.GoogleMap/Components/GoogleMapInfoWindow.cs @@ -1,5 +1,6 @@ using Blazor.GoogleMap.Components.Rendering; using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Rendering; using Microsoft.AspNetCore.Components.RenderTree; using System; @@ -8,9 +9,9 @@ namespace Blazor.GoogleMap.Components [Route("/googlemapinfowindow")] public class GoogleMapInfoWindow : ComponentBase { - [Parameter] RenderFragment ChildContent { get; set; } + [Parameter] public RenderFragment ChildContent { get; set; } - [Parameter] string Id { get; set; } + [Parameter] public string Id { get; set; } protected override void BuildRenderTree(RenderTreeBuilder builder) { diff --git a/src/Blazor.GoogleMap/Components/Rendering/BlazorRendererTreeBuilder.cs b/src/Blazor.GoogleMap/Components/Rendering/BlazorRendererTreeBuilder.cs index 497c0ee..0d4708a 100644 --- a/src/Blazor.GoogleMap/Components/Rendering/BlazorRendererTreeBuilder.cs +++ b/src/Blazor.GoogleMap/Components/Rendering/BlazorRendererTreeBuilder.cs @@ -1,5 +1,5 @@ using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.RenderTree; +using Microsoft.AspNetCore.Components.Rendering; using System; namespace Blazor.GoogleMap.Components.Rendering @@ -42,7 +42,7 @@ public IRendererTreeBuilder AddAttribute(string name, MulticastDelegate value) return this; } - public IRendererTreeBuilder AddAttribute(string name, Action value) + public IRendererTreeBuilder AddAttribute(string name, Action value) { renderTreeBuilder.AddAttribute(++sequence, name, value); diff --git a/src/Blazor.GoogleMap/Components/Rendering/IRendererTreeBuilder.cs b/src/Blazor.GoogleMap/Components/Rendering/IRendererTreeBuilder.cs index 7200fce..09af4c0 100644 --- a/src/Blazor.GoogleMap/Components/Rendering/IRendererTreeBuilder.cs +++ b/src/Blazor.GoogleMap/Components/Rendering/IRendererTreeBuilder.cs @@ -19,7 +19,7 @@ public interface IRendererTreeBuilder IRendererTreeBuilder AddAttribute(string name, Func value); - IRendererTreeBuilder AddAttribute(string name, Action value); + IRendererTreeBuilder AddAttribute(string name, Action value); IRendererTreeBuilder AddContent(string textContent); diff --git a/src/Blazor.GoogleMap/GoogleMapInterop.cs b/src/Blazor.GoogleMap/GoogleMapInterop.cs index 1ef6b3d..92a4680 100644 --- a/src/Blazor.GoogleMap/GoogleMapInterop.cs +++ b/src/Blazor.GoogleMap/GoogleMapInterop.cs @@ -18,27 +18,29 @@ public GoogleMapInterop(IJSRuntime jSRuntime, IMouseEventsInovkable mouseEventsI this.mouseEventsInovkable = mouseEventsInovkable ?? throw new ArgumentNullException(nameof(mouseEventsInovkable)); } - public Task InitMap(InitialMapOptions initialMapOptions) + public async Task InitMap(InitialMapOptions initialMapOptions) { - return jSRuntime.InvokeAsync("blazorGoogleMap.initMap", initialMapOptions); + + await jSRuntime.InvokeVoidAsync("blazorGoogleMap.initMap", initialMapOptions); } - public Task ExecuteInitMapCallback() + public async Task ExecuteInitMapCallback() { - return jSRuntime.InvokeAsync("blazorGoogleMap.initMapCallback"); + await jSRuntime.InvokeAsync("blazorGoogleMap.initMapCallback"); } - public Task RegisterCallbacks(InitMapCallback initMapCallback) + public async Task RegisterCallbacks(InitMapCallback initMapCallback) { - return jSRuntime.InvokeAsync( - "blazorGoogleMap.registerEventInvokers", - new DotNetObjectRef(mouseEventsInovkable), new DotNetObjectRef(initMapCallback)); + var mouseEvents = DotNetObjectReference.Create(mouseEventsInovkable); + var mapCallBack = DotNetObjectReference.Create(initMapCallback); + + await jSRuntime.InvokeAsync("blazorGoogleMap.registerEventInvokers", mouseEvents,mapCallBack ); + } - public Task CreateInfoWindow(string id, LatLng position) + public async Task CreateInfoWindow(string id, LatLng position) { - return jSRuntime.InvokeAsync( - "blazorGoogleMap.createInfoWindow", id, position); + return await jSRuntime.InvokeAsync("blazorGoogleMap.createInfoWindow", id, position); } } } diff --git a/src/Blazor.GoogleMap/GoogleMapOptions.cs b/src/Blazor.GoogleMap/GoogleMapOptions.cs index 881a6fa..3d04508 100644 --- a/src/Blazor.GoogleMap/GoogleMapOptions.cs +++ b/src/Blazor.GoogleMap/GoogleMapOptions.cs @@ -3,6 +3,9 @@ public class GoogleMapOptions { public string ApiKey { get; set; } + public string Width { get; set; } = "600px"; + public string Height { get; set; } = "600px"; + } internal class GoogleMapRestrictedOptions : GoogleMapOptions diff --git a/src/Blazor.GoogleMap/Map/InfoWindows/IInfoWindowHandle.cs b/src/Blazor.GoogleMap/Map/InfoWindows/IInfoWindowHandle.cs index 3a47495..47a93c2 100644 --- a/src/Blazor.GoogleMap/Map/InfoWindows/IInfoWindowHandle.cs +++ b/src/Blazor.GoogleMap/Map/InfoWindows/IInfoWindowHandle.cs @@ -5,8 +5,8 @@ namespace Blazor.GoogleMap.Map.InfoWindows { public interface IInfoWindowHandle { - Task Open(string infoWindowId, ILocationable locationable); + Task Open(string infoWindowId, ILocationable locationable); - Task Open(MarkupString htmlContent, ILocationable locationable); + Task Open(MarkupString htmlContent, ILocationable locationable); } } diff --git a/src/Blazor.GoogleMap/Map/InfoWindows/InfoWindow.cs b/src/Blazor.GoogleMap/Map/InfoWindows/InfoWindow.cs index 86c25b0..6ed0a30 100644 --- a/src/Blazor.GoogleMap/Map/InfoWindows/InfoWindow.cs +++ b/src/Blazor.GoogleMap/Map/InfoWindows/InfoWindow.cs @@ -11,15 +11,15 @@ public InfoWindow(IJSRuntime jSRuntime) { } - public Task Open(string infoWindowId, ILocationable locationable = null) + public async Task Open(string infoWindowId, ILocationable locationable = null) { - return jSRuntime.InvokeAsync( + return await jSRuntime.InvokeAsync( "blazorGoogleMap.openInfoWindow", infoWindowId, locationable); } - public Task Open(MarkupString htmlContent, ILocationable locationable) + public async Task Open(MarkupString htmlContent, ILocationable locationable) { - return jSRuntime.InvokeAsync( + return await jSRuntime.InvokeAsync( "blazorGoogleMap.openInfoWindow", string.Empty, locationable, htmlContent.ToString()); } } diff --git a/src/Blazor.GoogleMap/Map/Markers/Marker.cs b/src/Blazor.GoogleMap/Map/Markers/Marker.cs index c671e15..fd69db6 100644 --- a/src/Blazor.GoogleMap/Map/Markers/Marker.cs +++ b/src/Blazor.GoogleMap/Map/Markers/Marker.cs @@ -83,21 +83,21 @@ await jSRuntime.InvokeAsync( "blazorGoogleMap.markersModule.setAnimation", Id, markerAnimation); } - public Task SetIcon(string iconUrl) + public async Task SetIcon(string iconUrl) { Options.Icon = iconUrl; - return jSRuntime.InvokeAsync( + return await jSRuntime.InvokeAsync( "blazorGoogleMap.markersModule.setIcon", Id, iconUrl); } - public Task SetOpacity(double opacity) + public async Task> SetOpacity(double opacity) { Options.Opacity = opacity; return jSRuntime.InvokeAsync( "blazorGoogleMap.markersModule.setOpacity", Id, opacity); } - public Task SetVisibility(bool visible) + public async Task> SetVisibility(bool visible) { Options.Visible = visible; return jSRuntime.InvokeAsync( diff --git a/src/Blazor.GoogleMap/Map/Markers/MarkerCollection.cs b/src/Blazor.GoogleMap/Map/Markers/MarkerCollection.cs index fb83dfa..79c608f 100644 --- a/src/Blazor.GoogleMap/Map/Markers/MarkerCollection.cs +++ b/src/Blazor.GoogleMap/Map/Markers/MarkerCollection.cs @@ -32,7 +32,7 @@ public async Task Add(MarkerOptions markerOptions) await jSRuntime.InvokeAsync( "blazorGoogleMap.markersModule.addMarker", - new DotNetObjectRef(marker), markerOptions, marker.Id); + DotNetObjectReference.Create(marker), markerOptions, marker.Id); markers.Add(marker.Id, marker); diff --git a/src/Blazor.GoogleMap/ServiceCollectionExtensions.cs b/src/Blazor.GoogleMap/ServiceCollectionExtensions.cs index 259bfcc..908f7d2 100644 --- a/src/Blazor.GoogleMap/ServiceCollectionExtensions.cs +++ b/src/Blazor.GoogleMap/ServiceCollectionExtensions.cs @@ -20,11 +20,11 @@ public static IServiceCollection AddGoogleMaps(this IServiceCollection services, configure.Invoke(googleMapOptions); services.AddSingleton(googleMapOptions); - services.AddSingleton(); - services.AddSingleton(); - services.AddSingleton(); - services.AddSingleton(); - services.AddSingleton(); + services.AddScoped(); + services.AddScoped(); + services.AddScoped(); + services.AddScoped(); + services.AddScoped(); return services; } diff --git a/src/Blazor.GoogleMap/content/GoogleMapInterop.js b/src/Blazor.GoogleMap/content/GoogleMapInterop.js index 7cc73da..de50d2a 100644 --- a/src/Blazor.GoogleMap/content/GoogleMapInterop.js +++ b/src/Blazor.GoogleMap/content/GoogleMapInterop.js @@ -8,7 +8,6 @@ window.blazorGoogleMap = { var currentThis = this === window ? this.blazorGoogleMap : this; - currentThis.map = new google.maps.Map(document.getElementById('map'), currentThis.initialMapOptions); currentThis.infoWindow = new google.maps.InfoWindow(); @@ -33,7 +32,7 @@ window.blazorGoogleMap = { }, initMap: function (initialMapOptions) { - this.blazorGoogleMap.initialMapOptions = initialMapOptions; + blazorGoogleMap.initialMapOptions = initialMapOptions; }, openInfoWindow: function (id, positionableObject, htmlContent) { @@ -41,33 +40,35 @@ window.blazorGoogleMap = { if (htmlContent !== undefined) { content = htmlContent; } else { - var nodeContent = this.blazorGoogleMap.infoWindowContentNodes.find(function (n) { + var nodeContent = blazorGoogleMap.infoWindowContentNodes.find(function (n) { return n.id === id; }); if (nodeContent === undefined) { var node = document.getElementById(id); node.removeAttribute("style"); - this.blazorGoogleMap.infoWindowContentNodes.push({ id: id, node: node }); + blazorGoogleMap.infoWindowContentNodes.push({ id: id, node: node }); content = node; } else { content = nodeContent.node; } } - - this.blazorGoogleMap.infoWindow.setContent(content); - var marker = this.blazorGoogleMap.markersModule.findMarker(positionableObject.id); + blazorGoogleMap.infoWindow.setContent(content); + + var marker = blazorGoogleMap.markersModule.findMarker(positionableObject.id); if (marker !== undefined) { - this.blazorGoogleMap.infoWindow.open(this.blazorGoogleMap.map, marker); + blazorGoogleMap.infoWindow.open(blazorGoogleMap.map, marker); } else { - this.blazorGoogleMap.infoWindow.setPosition(positionableObject.position); - this.blazorGoogleMap.infoWindow.open(this.blazorGoogleMap.map); + blazorGoogleMap.infoWindow.setPosition(positionableObject.position); + blazorGoogleMap.infoWindow.open(blazorGoogleMap.map); } }, - registerEventInvokers: function (eventHandlersInvoker, initDotnetCallback) { - this.blazorGoogleMap.eventHandlersInvoker = eventHandlersInvoker; - this.blazorGoogleMap.initDotnetCallback = initDotnetCallback; + if (blazorGoogleMap) { + + blazorGoogleMap.eventHandlersInvoker = eventHandlersInvoker; + blazorGoogleMap.initDotnetCallback = initDotnetCallback; + } } }; diff --git a/src/Blazor.GoogleMap/content/GoogleMapMarkerInterop.js b/src/Blazor.GoogleMap/content/GoogleMapMarkerInterop.js index df5d9f7..d981793 100644 --- a/src/Blazor.GoogleMap/content/GoogleMapMarkerInterop.js +++ b/src/Blazor.GoogleMap/content/GoogleMapMarkerInterop.js @@ -3,9 +3,9 @@ window.blazorGoogleMap.markersModule = { markers: [], addMarker: function (markerRef, marker, markerId) { - var that = this.blazorGoogleMap.markersModule; + var that = blazorGoogleMap.markersModule; var mapMarker = new google.maps.Marker({ - map: this.blazorGoogleMap.map, + map: blazorGoogleMap.map, position: marker.position, title: marker.title, animation: marker.animation, @@ -46,7 +46,7 @@ window.blazorGoogleMap.markersModule = { }, removeMarker: function (markerId) { - var markerPair = this.blazorGoogleMap.markersModule.markers.find(function (m) { + var markerPair = blazorGoogleMap.markersModule.markers.find(function (m) { return m.mapMarker.id === markerId; }); @@ -55,41 +55,41 @@ window.blazorGoogleMap.markersModule = { } markerPair.mapMarker.setMap(null); - const filteredMarkers = this.blazorGoogleMap.markersModule.markers.filter( + const filteredMarkers = blazorGoogleMap.markersModule.markers.filter( function (marker) { return marker.id !== markerId; } ); - var removeResult = filteredMarkers.length === this.blazorGoogleMap.markersModule.markers.length - 1; - this.blazorGoogleMap.markersModule.markers = filteredMarkers; + var removeResult = filteredMarkers.length === blazorGoogleMap.markersModule.markers.length - 1; + blazorGoogleMap.markersModule.markers = filteredMarkers; return removeResult; }, setAnimation: function (markerId, animation) { - var marker = this.blazorGoogleMap.markersModule.findMarker(markerId); + var marker = blazorGoogleMap.markersModule.findMarker(markerId); if (marker !== undefined) { marker.setAnimation(animation); } }, setIcon: function (markerId, icon) { - var marker = this.blazorGoogleMap.markersModule.findMarker(markerId); + var marker = blazorGoogleMap.markersModule.findMarker(markerId); if (marker !== undefined) { marker.setIcon(icon); } }, setOpacity: function (markerId, opacity) { - var marker = this.blazorGoogleMap.markersModule.findMarker(markerId); + var marker = blazorGoogleMap.markersModule.findMarker(markerId); if (marker !== undefined) { marker.setOpacity(opacity); } }, setVisibility: function (markerId, visible) { - var marker = this.blazorGoogleMap.markersModule.findMarker(markerId); + var marker = blazorGoogleMap.markersModule.findMarker(markerId); if (marker !== undefined) { marker.setVisible(visible); } @@ -97,7 +97,7 @@ window.blazorGoogleMap.markersModule = { findMarker: function (markerId) { var that = this === window - ? this.blazorGoogleMap.markersModule + ? blazorGoogleMap.markersModule : this; var marker = that.markers.find(function (m) {