Darnton Blazor Leaflet nuget

CaritasPWA.csproj

@@ -7,6 +7,7 @@
 
   <ItemGroup>
     <PackageReference Include="BlazorAnimate" Version="3.0.0" />
+    <PackageReference Include="Darnton.Blazor.Leaflet" Version="0.1.3" />
     <PackageReference Include="MatBlazor" Version="2.9.0-develop-042" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />

Pages/CaritasServiceFundVeloKeyDataPage.razor

@@ -1,5 +1,8 @@
 @page "/fundvelo/keydata/{FromRoute}"
 
+@inherits CaritasServiceFundVeloKeyDataPageBase
+
+
 @using CaritasPWA.Shared.Models;
 @using CaritasPWA.Shared.Services;
 @using System.Globalization;
@@ -44,7 +47,10 @@
                             <label for="file">
                                 <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" width="48px" height="48px" viewBox="0 0 24 24" fill="#000000">
                                     <g><rect fill="none" height="24" width="24" /></g>
-                                    <g><g><path d="M13,4H6v16h12V9h-5V4z M16,15h-3v4h-2v-4H8l4.01-4L16,15z" opacity=".3" /><path d="M14,2H6C4.9,2,4.01,2.9,4.01,4L4,20c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20H6V4h7v5h5V20z" /><polygon points="8,15 11,15 11,19 13,19 13,15 16,15 12.01,11" /></g></g>
+                                    <g><g><path d="M13,4H6v16h12V9h-5V4z M16,15h-3v4h-2v-4H8l4.01-4L16,15z" opacity=".3" />
+                                          <path d="M14,2H6C4.9,2,4.01,2.9,4.01,4L4,20c0,1.1,0.89,2,1.99,2H18c1.1,0,2-0.9,2-2V8L14,2z M18,20H6V4h7v5h5V20z" />
+                                          <polygon points="8,15 11,15 11,19 13,19 13,15 16,15 12.01,11" />
+                                    </g></g>
                                 </svg>
                             </label>
                         </MatRipple>
@@ -64,20 +70,22 @@
                     </div>
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
-                    <div>
-                        <MatIconButton Class="mat-icon-large" Icon="location_on" />
-                    </div>
+                    <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default">
+                        <label>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#000000">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path d="M13 3.06V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06c-.46-4.17-3.77-7.48-7.94-7.94zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z" />
+                                <circle cx="12" cy="12" opacity=".3" r="2" />
+                                <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
+                            </svg>                            
+                        </label>
+                    </MatRipple>                    
                 </div>
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
-                    <div>
-                        <MatCard Id="OSM" Class="fv-mat-card">
-                            <MatCardContent>
-                                <MatCardMedia Square="true" Class="" />
-                            </MatCardContent>
-                        </MatCard>
+                    <div class="w-100 fv-osm-tile">
+                        <LeafletMap Map="PositionMap" TileLayer="OpenStreetMapsTileLayer" />
                     </div>
                 </div>
-
                 <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-8-tablet mat-layout-grid-cell-span-4-desktop">
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
@@ -120,16 +128,6 @@
                                     </ItemTemplate>
                                 </MatAutocompleteList>
                             </div>
-                            @*<div style="display: inline-flex; width: 100%">
-                                    <MatStringField Class="w-100 form-check-label" Label="@i18n["Brand"]" Outlined="true" type="text"></MatStringField>
-                                    <MatSelectValue Class="icon-only" Outlined="true" @bind-Value="selectedBrand" Items="@Brands" ValueSelector="@(i=>i)" >
-                                        <ItemTemplate>
-                                            <div>
-                                                <span>@context?.Name</span>
-                                            </div>
-                                        </ItemTemplate>
-                                    </MatSelectValue>
-                                </div>*@
                         </div>
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                             <MatSelectValue FullWidth="true" Outlined="true" Label="@i18n["Type"]" @bind-Value="selectedBcType" Items="@BicycleTypes" ValueSelector="@(i=>i)">
@@ -170,8 +168,9 @@
     private BicycleType selectedBcType;
     private string brandStringValue;
     private Brand selectedBrand;
-    private Brand SelectedBrand {get { return selectedBrand; }
-        set { selectedBrand = (value != null) ? value: new Brand(-999, brandStringValue); }
+    private Brand SelectedBrand {
+        get { return selectedBrand; }
+        set { selectedBrand = (value != null) ? value : new Brand(-999, brandStringValue); }
     }
     private void setBrandValue(string value) {
         brandStringValue = value;

Pages/CaritasServiceFundVeloKeyDataPage.razor.cs

@@ -0,0 +1,79 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using CaritasPWA.Shared.Models.OSM;
+using Darnton.Blazor.Leaflet.LeafletMap;
+
+namespace CaritasPWA.Pages {
+    public class CaritasServiceFundVeloKeyDataPageBase : ComponentBase, IAsyncDisposable {
+
+        protected Map PositionMap;
+        protected TileLayer OpenStreetMapsTileLayer;
+        protected MapStateViewModel MapStateViewModel;
+        protected MarkerViewModel MarkerViewModel;
+
+
+        public CaritasServiceFundVeloKeyDataPageBase() : base() {
+            var mapCentre = new LatLng(46.80121, 8.22669); // Centered on Swiss
+            MapStateViewModel = new MapStateViewModel {
+                MapCentreLatitude = mapCentre.Lat,
+                MapCentreLongitude = mapCentre.Lng,
+                Zoom = 6
+            };
+
+            PositionMap = new Map("bicycleLocationMap", new MapOptions {
+                Center = mapCentre,
+                Zoom = MapStateViewModel.Zoom
+            });
+
+            OpenStreetMapsTileLayer = new TileLayer(
+                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                new TileLayerOptions {
+                    Attribution = @"Map data &copy; <a href=""https://www.openstreetmap.org/"">OpenStreetMap</a> contributors, " +
+                        @"<a href=""https://creativecommons.org/licenses/by-sa/2.0/"">CC-BY-SA</a>"
+                }
+            );
+
+            MarkerViewModel = new MarkerViewModel();
+
+        }
+
+        protected async void GetMapState() {
+            var mapCentre = await PositionMap.GetCenter();
+            MapStateViewModel.MapCentreLatitude = mapCentre.Lat;
+            MapStateViewModel.MapCentreLongitude = mapCentre.Lng;
+            MapStateViewModel.Zoom = await PositionMap.GetZoom();
+            MapStateViewModel.MapContainerSize = await PositionMap.GetSize();
+            MapStateViewModel.MapViewPixelBounds = await PositionMap.GetPixelBounds();
+            MapStateViewModel.MapLayerPixelOrigin = await PositionMap.GetPixelOrigin();
+            StateHasChanged();
+        }
+
+        protected async void SetMapState() {
+            var mapCentre = new LatLng(MapStateViewModel.MapCentreLatitude, MapStateViewModel.MapCentreLongitude);
+            await PositionMap.SetView(mapCentre, MapStateViewModel.Zoom);
+        }
+
+        protected async void AddMarkerAtMapCenter() {
+            var mapCentre = await PositionMap.GetCenter();
+            var marker = new Marker(mapCentre, new MarkerOptions {
+                Keyboard = MarkerViewModel.Keyboard,
+                Title = MarkerViewModel.Title,
+                Alt = MarkerViewModel.Alt,
+                ZIndexOffset = MarkerViewModel.ZIndexOffset,
+                Opacity = MarkerViewModel.Opacity,
+                RiseOnHover = MarkerViewModel.RiseOnHover,
+                RiseOffset = MarkerViewModel.RiseOffset,
+            });
+
+            await marker.AddTo(PositionMap);
+        }
+
+        public async ValueTask DisposeAsync() {
+            await OpenStreetMapsTileLayer.DisposeAsync();
+            await PositionMap.DisposeAsync();
+        }
+
+
+    }
+}

Shared/Models/OSM/MapStateViewModel.cs

@@ -0,0 +1,12 @@
+using Darnton.Blazor.Leaflet.LeafletMap;
+
+namespace CaritasPWA.Shared.Models.OSM {
+    public class MapStateViewModel {
+        public double MapCentreLatitude { get; set; }
+        public double MapCentreLongitude { get; set; }
+        public int Zoom { get; set; }
+        public Point MapContainerSize { get; set; }
+        public Bounds MapViewPixelBounds { get; set; }
+        public Point MapLayerPixelOrigin { get; set; }
+    }
+}

Shared/Models/OSM/MarkerViewModel.cs

@@ -0,0 +1,11 @@
+namespace CaritasPWA.Shared.Models.OSM {
+    public class MarkerViewModel {
+        public bool Keyboard { get; set; } = true;
+        public string Title { get; set; }
+        public string Alt { get; set; }
+        public int ZIndexOffset { get; set; }
+        public double Opacity { get; set; } = 1.0f;
+        public bool RiseOnHover { get; set; }
+        public int RiseOffset { get; set; } = 250;
+    }
+}

_Imports.razor

@@ -6,8 +6,9 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.Extensions.Localization
 @using Microsoft.JSInterop
+@using MatBlazor
+@using BlazorAnimate
+@using Darnton.Blazor.Leaflet.LeafletMap
 @using CaritasPWA
 @using CaritasPWA.Shared
-@using CaritasPWA.Shared.ResourceFiles
-@using MatBlazor
-@using BlazorAnimate
+@using CaritasPWA.Shared.ResourceFiles

nuget.config

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+    <packageSources>
+        <add key="LocalSharedNugets" value="D:\Work\LeafletBlazor\Darnton.Blazor.Leaflet\bin\Debug" />
+    </packageSources>
+</configuration>

wwwroot/css/app.css

@@ -197,3 +197,16 @@ div.outlined .mdc-text-field.mdc-text-field--fullwidth .mdc-floating-label.mdc-f
     background-color: white;
     z-index: 5;
 }
+
+.fv-osm-tile {
+    border: 1px solid rgb(0 0 0 /.38);
+    height: 100%;
+    border-radius: 20px;
+}
+
+#bicycleLocationMap {
+    z-index: 0;
+    width: 100%;
+    padding-top: 100%;
+    border-radius: 20px;
+}

wwwroot/index.html

@@ -17,7 +17,10 @@
     <link href="css/united/_variables.min.css" rel="stylesheet" />
     <link href="css/app.css" rel="stylesheet" />
     <link href="manifest.json" rel="manifest" />
-    <link rel="apple-touch-icon" href="/icons/icon-60@3x.png" />
+    <link rel="apple-touch-icon" href="icons/icon-60@3x.png" />
+    <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"
+          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+          crossorigin="" />
 </head>
 
 <body>
@@ -52,6 +55,12 @@
             });
         }
     </script>
+
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+            crossorigin="">
+    </script>
+
     <script>
         window.LoadFile = (evt) => {
             var tgt = evt.target || window.event.srcElement,