lolochristen · lolochristen · Oct 24, 2023 · Oct 23, 2023 · Oct 23, 2023 · Oct 23, 2023
diff --git a/OpenLayers.Blazor.sln b/OpenLayers.Blazor.sln
@@ -13,7 +13,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "OpenLayers.Blazor.Demo.Maui
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "OpenLayers.Blazor.Tests", "test\OpenLayers.Blazor.Tests\OpenLayers.Blazor.Tests.csproj", "{D235BF12-E194-49CA-AB16-27E23D87B9C5}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "OpenLayers.Blazor.Demo.Components", "src\OpenLayers.Blazor.Demo.Components\OpenLayers.Blazor.Demo.Components.csproj", "{9BEEE062-7A06-4391-9934-B3963D62B50D}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "OpenLayers.Blazor.Demo.Components", "src\OpenLayers.Blazor.Demo.Components\OpenLayers.Blazor.Demo.Components.csproj", "{9BEEE062-7A06-4391-9934-B3963D62B50D}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

diff --git a/src/OpenLayers.Blazor.Demo.Components/OpenLayers.Blazor.Demo.Components.csproj b/src/OpenLayers.Blazor.Demo.Components/OpenLayers.Blazor.Demo.Components.csproj
@@ -20,6 +20,7 @@
 		<EmbeddedResource Include="Pages\ShapesDemo.razor" />
 		<EmbeddedResource Include="Pages\SwissMapLayersDemo.razor" />
 		<EmbeddedResource Include="Pages\DrawDemo.razor" />
+		<EmbeddedResource Include="Pages\GermanGdzDemo.razor" />
 	</ItemGroup>
 
 	<ItemGroup>

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/CustomWMTSMap.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/CustomWMTSMap.razor
@@ -1,7 +1,6 @@
 @page "/customdemo"
 
 <div class="card mt-2 mb-2">
-
     <div class="card-header">
         <h3 class="card-title">Custom WMTS Map</h3>
     </div>

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/DrawDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/DrawDemo.razor
@@ -1,13 +1,10 @@
 @page "/drawdemo"
 
 <div class="card mt-2 mb-2">
-
     <div class="card-header">
         <h3 class="card-title">Drawing Demo</h3>
     </div>
-
     <div class="card-body">
-
         <div class="btn-toolbar" role="toolbar">
             <div class="btn-group" data-toggle="buttons">
                 <input type="checkbox" class="btn-check" id="btndraw" autocomplete="off" @bind="_enabledraw">
@@ -23,18 +20,17 @@
                 <option value="@(ShapeType.Polygon)">Polygon</option>
                 <option value="@(ShapeType.Circle)">Circle</option>
             </select>
-            <input type="color" class="form-control form-control-color" id="bgColorInput" title="Background" @bind="_bgcolor">
-            <input type="color" class="form-control form-control-color" id="borderColorInput" title="Background" @bind="_bordercolor">
-            <input type="range" min="1" max="30" @bind="_borderSize" title="Border Size">
-
+            <input type="color" class="form-control form-control-color" id="bgColorInput" title="Background" @bind="_styleOptions.Fill.Color">
+            <input type="color" class="form-control form-control-color" id="borderColorInput" title="Background" @bind="_styleOptions.Stroke.Color">
+            <input type="range" min="1" max="30" @bind="_styleOptions.Stroke.Width" title="Border Size">
             <input type="button" class="btn btn-primary" value="Undo" @onclick="() => _map.Undo()" />
             <input type="button" class="btn btn-secondary" value="Clear" @onclick="() => _map.ShapesList.Clear()" />
             <input type="range" min="1080000" max="1280000" value="@_y" @onchange="OnYChange"> <code>@_y</code>
         </div>
     </div>
 </div>
 
-<SwissMap @ref="_map" Style="height:800px;" Class="card" OnShapeAdded="StateHasChanged" OnShapeChanged="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" NewShapeTemplate="_shapeTemplate">
+<SwissMap @ref="_map" Style="height:800px;" Class="card" OnShapeAdded="StateHasChanged" OnShapeChanged="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" ShapeStyleCallback="(shape) => _styleOptions" NewShapeType="_shapeType">
     <Popup>
         <div id="popup" class="ol-box">
             @if (@context != null)
@@ -43,17 +39,13 @@
             }
         </div>
     </Popup>
-
     <Features>
         <Line Points="new []{new Coordinate(1197650, 2604200), new Coordinate(1177650, 2624200)}" BorderColor="red" BorderSize="2"></Line>
         <Circle @ref="_circle" Center="_center" Radius="2000" BorderSize="3" BorderColor="blue" BackgroundColor="#55229933"></Circle>
         <Point Coordinate="new Coordinate(1247123.8311215444, 2683276.620804008)" BackgroundColor="green" Radius="20"></Point>
     </Features>
 </SwissMap>
 
-<!-- Template Shape -->
-<Shape @ref="_shapeTemplate" ShapeType="@_shapeType" Color="red" BorderColor="@_bordercolor" BackgroundColor="@_bgcolor" BorderSize="@_borderSize"></Shape>
-
 <CodeView Source="DrawDemo.razor" />
 
 @if (_map != null)
@@ -85,15 +77,24 @@
 
 @code {
     private SwissMap _map = null!;
-    private ShapeType _shapeType;
+    private ShapeType _shapeType = ShapeType.LineString;
     private double _y = 1197650;
     private Circle _circle;
     private Coordinate _center = new Coordinate(1197650, 2604200);
     private bool _enabledraw, _enableedit, _snap = true;
-    private Shape _shapeTemplate;
-    private string _bgcolor = "#563d7c";
-    private string _bordercolor = "#dd1111";
-    private int _borderSize = 2;
+
+    private StyleOptions _styleOptions = new StyleOptions()
+    {
+        Stroke = new StyleOptions.StrokeOptions()
+        {
+            Color = "#dd1111",
+            Width = 2
+        },
+        Fill = new StyleOptions.FillOptions()
+        {
+            Color = "#563d7c"
+        }
+    };
 
     protected override Task OnAfterRenderAsync(bool firstRender)
     {

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/GeoJsonDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/GeoJsonDemo.razor
@@ -1,30 +1,71 @@
 @page "/geojsondemo"
 @using System.Text.Json
+@using Shape = OpenLayers.Blazor.Shape
 
 <div class="card mt-2 mb-2">
-
     <div class="card-header">
         <h3 class="card-title">GeoJson</h3>
     </div>
     <div class="card-body">
-        <button class="btn btn-primary" @onclick="LoadGeoJson">Load geojson</button>
+        @if (_loading)
+        {
+            <div class="spinner-grow" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        }
+        else
+        {
+            <button class="btn btn-primary" @onclick="LoadGeoJson">Load geojson</button>
+            <button class="btn btn-primary" @onclick="Reformat">Reformat</button>
+        }
     </div>
 </div>
 
-<SwissMap @ref="_map" Style="height:800px;" Class="card"></SwissMap>
+<SwissMap @ref="_map" Style="height:800px;" Class="card" ShapeStyleCallback="GetShapeStyle"></SwissMap>
 
 <CodeView Source="GeoJsonDemo.razor"/>
 
 @code {
     private SwissMap _map = null!;
+    private bool _loading;
 
     [Inject]
     private HttpClient HttpClient { get; set; }
 
     private async Task LoadGeoJson(MouseEventArgs obj)
     {
+        _loading = true;
         // e.g. https://labs.karavia.ch/swiss-boundaries-geojson or https://api3.geo.admin.ch/services/sdiservices.html
         var json = await HttpClient.GetFromJsonAsync<JsonElement>("https://labs.karavia.ch/swiss-boundaries-geojson/geojson/2020/swissBOUNDARIES3D_1_3_TLM_LANDESGEBIET.geojson");
         await _map.LoadGeoJson(json);
+        _loading = false;
+    }
+
+    private StyleOptions GetShapeStyle(Shape shape)
+    {
+        return new StyleOptions()
+        {
+            Stroke = new StyleOptions.StrokeOptions()
+            {
+                Color = "red",
+                Width = 3,
+                LineDash = new double[] { 4 }
+            },
+            Fill = new StyleOptions.FillOptions()
+            {
+                Color = shape.Properties["NAME"].ToString() == "Liechtenstein" ? "rgba(0, 255, 50, 0.5)" : "rgba(0, 0, 255, 0.3)"
+            }
+        };
+    }
+
+    private async Task Reformat()
+    {
+        foreach (var shape in _map.ShapesList)
+        {
+            shape.BorderSize = 5;
+            shape.BorderColor = "green";
+            shape.BackgroundColor = "rgba(0, 255, 50, 0.5)";
+            await _map.UpdateShape(shape);
+        }
     }
 }
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/GermanGdzDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/GermanGdzDemo.razor
@@ -0,0 +1,17 @@
+@page "/gdzdemo"
+
+<div class="card mt-2 mb-2">
+    <div class="card-header">
+        <h3 class="card-title">German GDZ Demo</h3>
+    </div>
+    <div class="card-body">
+    </div>
+</div>
+
+<Map Style="height:800px;" Class="card" CoordinatesProjection="EPSG:3857" Zoom="6" Center="new Coordinate(6549858, 1128088)">
+    <Layers>
+        <Layer SourceType="SourceType.TileWMS" Url="https://sgx.geodatenzentrum.de/wms_topplus_open" Format="image/png" Layers="web" Styles="default" ></Layer>
+    </Layers>
+</Map>
+
+<CodeView Source="GermanGdzDemo.razor" />
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor
@@ -22,7 +22,7 @@
             <button class="btn btn-primary" @onclick="AddMarkLocation">Add Mark at current location</button>
             <button class="btn btn-primary" @onclick="SetVisibleExtent">Beautiful</button>
             <div class="input-group">
-                <label for="zoom" class="form-label">Zoom @_zoom</label>
+                <label for="zoom" class="form-label small">Zoom @_zoom</label>
                 <input type="range" class="form-range" id="zoom" min="1" max="15" @bind-value="_zoom">
             </div>
         </div>

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/LayersDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/LayersDemo.razor
@@ -1,19 +1,16 @@
 @page "/layersdemo"
 
 <div class="card mt-2 mb-2">
-
     <div class="card-header">
         <h3 class="card-title">Layers</h3>
     </div>
-
     <div class="card-body">
         <input type="checkbox" @bind="_visibility0" />
         <input type="range" min="0" max="1" step="0.05" @bind="_opacity0" />
         <input type="range" min="0" max="1" step="0.05" @bind="_opacity1" />
         <input type="range" min="0" max="1" step="0.05" @bind="_opacity2" />
         <input type="range" min="0" max="1" step="0.05" @bind="_opacity3" />
     </div>
-
 </div>
 
 <Map @ref="_map" Style="height:800px" CoordinatesProjection="EPSG:2056" class="card">
@@ -35,9 +32,8 @@
     protected override Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
-        {
             StateHasChanged(); // update _map
-        }
+
         return base.OnAfterRenderAsync(firstRender);
     }
 }
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor
@@ -1,19 +1,16 @@
 @page "/markersdemo"
 
 <div class="card mt-2 mb-2">
-
     <div class="card-header">
         <h3 class="card-title">Markers</h3>
     </div>
-
     <div class="card-body">
         <select @bind="_selectedMarkerType">
             <option value="@MarkerType.MarkerPin">Pin</option>
             <option value="@MarkerType.MarkerAwesome">Awesome</option>
             <option value="@MarkerType.MarkerFlag">Flag</option>
             <option value="@MarkerType.MarkerCustomImage">Custom Image</option>
         </select>
-
     </div>
 </div>
 
@@ -32,8 +29,7 @@
         <Marker Type="MarkerType.MarkerFlag" Coordinate="new Coordinate(1177650, 2624200)" Title="Hallo" BackgroundColor="#449933" Popup></Marker>
      </Features>
  </SwissMap>
-
-
+
  <CodeView Source="MarkersDemo.razor" />
 
  @code {

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor
@@ -1,11 +1,9 @@
 @page "/openstreetmapdemo"
 
 <div class="card mt-2 mb-2">
-
     <div class="card-header">
         <h3 class="card-title">OpenStreetMap</h3>
     </div>
-
     <div class="card-body">
     <pre>
 Center: @_center
@@ -17,7 +15,7 @@ Zoom: @_map?.Zoom
 
 <OpenStreetMap @ref="_map" Style="height:480px; width:640px" Class="card mb-2" @bind-Center="_center"></OpenStreetMap>
 
-<OpenStreetMap Style="height:480px; width:640px" Class="card" Zoom="5" @bind-Center="_center" ScaleLineUnit="ScaleLineUnit.US">
+<OpenStreetMap Style="height:800px" Class="card" Zoom="5" @bind-Center="_center" ScaleLineUnit="ScaleLineUnit.US">
     <Layers>
         <Layer SourceType="SourceType.TileWMS"
                Url="https://sedac.ciesin.columbia.edu/geoserver/ows?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=gpw-v3%3Agpw-v3-population-density_2000&LANG=en"

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor
@@ -2,11 +2,9 @@
 @using System.Text.Json
 
 <div class="card mt-2 mb-2">
-
-<div class="card-header">
+    <div class="card-header">
         <h3 class="card-title">ShapesDemo</h3>
-</div>
-
+    </div>
     <div class="card-body">
         <p>
             <code>@_featureInfo</code>

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/SwissMapLayersDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/SwissMapLayersDemo.razor
@@ -3,13 +3,10 @@
 @using System.Threading
 @using System.Text.Json
 
-
 <div class="card mt-2 mb-2">
-
     <div class="card-header">
         <h3 class="card-title">SwissMapLayersDemo</h3>
     </div>
-
     <div class="card-body">
         <select @bind="_selectedLayer">
             @if (_layerList != null)
@@ -101,5 +98,4 @@
     {
         _currentFeature = feature;
     }
-
 }
diff --git a/src/OpenLayers.Blazor.Demo/Shared/NavMenu.razor b/src/OpenLayers.Blazor.Demo/Shared/NavMenu.razor
@@ -63,6 +63,12 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="/gdzdemo">
+                <span class="oi oi-plus" aria-hidden="true"></span> Germany GDZ Demo
+            </NavLink>
+        </div>
+
     </nav>
 </div>
 

diff --git a/src/OpenLayers.Blazor/Circle.cs b/src/OpenLayers.Blazor/Circle.cs
@@ -1,11 +1,10 @@
 using Microsoft.AspNetCore.Components;
-using OpenLayers.Blazor.Internal;
 
 namespace OpenLayers.Blazor;
 
 public class Circle : Shape
 {
-    public Circle() : base (ShapeType.Circle)
+    public Circle() : base(ShapeType.Circle)
     {
     }
 

diff --git a/src/OpenLayers.Blazor/Coordinate.cs b/src/OpenLayers.Blazor/Coordinate.cs
@@ -32,10 +32,10 @@ public Coordinate(Coordinate coordinate)
         X = coordinate.X;
     }
 
-    
+
     public Coordinate(double[] coordinates)
     {
-        if (coordinates.Length < 2) 
+        if (coordinates.Length < 2)
             throw new ArgumentException(nameof(coordinates));
         Value = coordinates;
     }

diff --git a/src/OpenLayers.Blazor/Defaults.cs b/src/OpenLayers.Blazor/Defaults.cs
@@ -18,4 +18,6 @@ public class Defaults
 
     [JsonConverter(typeof(JsonStringEnumConverter))]
     public ScaleLineUnit ScaleLineUnit { get; set; } = ScaleLineUnit.Metric;
+
+    public int SerializationCoordinatesLimit { get; set; } = 255;
 }