lolochristen · lolochristen · Oct 9, 2023 · Jun 20, 2023 · Jun 20, 2023 · Jun 21, 2023
diff --git a/OpenLayers.Blazor.sln b/OpenLayers.Blazor.sln
@@ -28,15 +28,9 @@ Global
 		{558FC061-5215-43DC-A7C1-CE3DA8D3112A}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{558FC061-5215-43DC-A7C1-CE3DA8D3112A}.Release|Any CPU.Build.0 = Release|Any CPU
 		{56CA5376-8AD9-481C-81B1-D82D0716989A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{56CA5376-8AD9-481C-81B1-D82D0716989A}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{56CA5376-8AD9-481C-81B1-D82D0716989A}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{56CA5376-8AD9-481C-81B1-D82D0716989A}.Release|Any CPU.Build.0 = Release|Any CPU
 		{0FEB3FC9-8E58-4AE7-B09B-7FA248687EC8}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{0FEB3FC9-8E58-4AE7-B09B-7FA248687EC8}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{0FEB3FC9-8E58-4AE7-B09B-7FA248687EC8}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
 		{0FEB3FC9-8E58-4AE7-B09B-7FA248687EC8}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{0FEB3FC9-8E58-4AE7-B09B-7FA248687EC8}.Release|Any CPU.Build.0 = Release|Any CPU
-		{0FEB3FC9-8E58-4AE7-B09B-7FA248687EC8}.Release|Any CPU.Deploy.0 = Release|Any CPU
 		{D235BF12-E194-49CA-AB16-27E23D87B9C5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{D235BF12-E194-49CA-AB16-27E23D87B9C5}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{D235BF12-E194-49CA-AB16-27E23D87B9C5}.Release|Any CPU.ActiveCfg = Release|Any CPU

diff --git a/src/OpenLayers.Blazor.Demo/Pages/DrawDemo.razor b/src/OpenLayers.Blazor.Demo/Pages/DrawDemo.razor
@@ -0,0 +1,105 @@
+@page "/drawdemo"
+@using Marker = OpenLayers.Blazor.Marker
+<h3>DrawDemo</h3>
+
+<div class="m-2 btn-toolbar mb-3" role="toolbar">
+    <div class="btn-group" data-toggle="buttons">
+        <input type="checkbox" class="btn-check" id="btndraw" autocomplete="off" @bind="_enabledraw">
+        <label class="btn btn-outline-primary" for="btndraw">Draw</label>
+        <input type="checkbox" class="btn-check" id="btnedit" autocomplete="off" @bind="_enableedit">
+        <label class="btn btn-outline-primary" for="btnedit">Edit</label>
+        <input type="checkbox" class="btn-check" id="btnsnap" autocomplete="off" @bind="_snap">
+        <label class="btn btn-outline-primary" for="btnsnap">Snap</label>
+    </div>
+    <select id="type" @bind="_shapeType">
+        <option value="@(ShapeType.Point)">Point</option>
+        <option value="@(ShapeType.LineString)">LineString</option>
+        <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="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 class="container">
+    <SwissMap @ref="_map" Style="border:1px solid silver;height:800px;" OnShapeAdded="StateHasChanged" OnShapeChanged="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" NewShapeTemplate="_shapeTemplate">
+        <Popup>
+            <div id="popup" class="ol-box">
+                @if (@context != null)
+                {
+                    <h3>@context.Type</h3>
+                }
+            </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>
+</div>
+
+@if (_map != null)
+{
+    <div>
+        <h5>Shapes</h5>
+        @foreach (var shape in _map.ShapesList)
+        {
+            <p>
+                @shape.Id @shape.Type @shape.GeometryType
+                <ul>
+                    @if (shape.Coordinates != null)
+                    {
+                        @foreach (Coordinate c in shape.Coordinates)
+                        {
+                            <li>@c</li>
+                        }
+                    }
+                </ul>
+            </p>
+        }
+        <h5>Markers</h5>
+        @foreach (var marker in _map.MarkersList)
+        {
+            <p>@marker.Id @marker.Type</p>
+        }
+    </div>
+}
+
+@code {
+    private SwissMap _map = null!;
+    private ShapeType _shapeType;
+    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;
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            StateHasChanged();
+        return base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnYChange(ChangeEventArgs obj)
+    {
+        _y = Double.Parse(obj.Value.ToString());
+        _center.Y = _y;
+        _circle.Center = _center;
+        _ = _circle.UpdateShape();
+    }
+}
diff --git a/src/OpenLayers.Blazor.Demo/Pages/LayersDemo.razor b/src/OpenLayers.Blazor.Demo/Pages/LayersDemo.razor
@@ -14,7 +14,7 @@
         <Layers>
             <Layer SourceType="SourceType.TileWMS" ServerType="mapserver" Url="https://wms.geo.admin.ch/" Layers="ch.swisstopo.pixelkarte-farbe" Format="image/png" Opacity="@_opacity0" Visibility="@_visibility0" CrossOrigin="anonymous" Extent="@(new double[] { 2420000, 1030000, 2900000, 1350000 })"></Layer>
             <Layer SourceType="SourceType.TileWMS" Url="https://wms.geo.admin.ch/" Layers="ch.swisstopo.swissnames3d" Format="image/png" Opacity="@_opacity1"/>
-            <Layer SourceType="SourceType.TileWMS" Url="https://wms.geo.admin.ch/" Layers="ch.swisstopo.swisssurface3d-reliefschattierung_monodirektional" Format="image/png" CrossOrigin="anonymous" Opacity="@_opacity2"/>
+            <Layer SourceType="SourceType.TileWMS" Url="https://wms.geo.admin.ch/" Layers="ch.kantone.cadastralwebmap-farbe" Format="image/png" CrossOrigin="anonymous" Opacity="@_opacity2" />
             <Layer SourceType="SourceType.TileWMS" Url="https://wms.geo.admin.ch/" Layers="ch.swisstopo.swisstlm3d-eisenbahnnetz" Format="image/png" CrossOrigin="anonymous" Opacity="@_opacity3"/>
         </Layers>
     </Map>

diff --git a/src/OpenLayers.Blazor.Demo/Pages/ShapesDemo.razor b/src/OpenLayers.Blazor.Demo/Pages/ShapesDemo.razor
@@ -8,8 +8,9 @@
 
     <SwissMap @ref="_map" OnClick="OnMapClicked" OnFeatureClick="OnFeatureClicked" Style="border:1px solid silver;height:800px;">
         <Features>
-            <Line Points="new[] { new Coordinate(1197650, 2604200), new Coordinate(1177650, 2624200) }" BorderColor="cyan"></Line>
-            <Circle Coordinate="new Coordinate(1197279.0774135895, 2770557.824138796)" Radius="5" BackgroundColor="#2222AA66"></Circle>
+            <Line Points="new []{new Coordinate(1197650, 2604200), new Coordinate(1177650, 2624200)}" BorderColor="cyan" BorderSize="4"></Line>
+            <Circle Center="new Coordinate(1197279.0774135895, 2770557.824138796)" Radius="5000" BackgroundColor="#2222AA66"></Circle>
+            <Point Coordinate="new Coordinate(1197650, 2604200)" BorderSize="4" BorderColor="red" BackgroundColor="cyan" Radius="3"></Point>
         </Features>
     </SwissMap>
     <p>

diff --git a/src/OpenLayers.Blazor.Demo/Pages/SwissMapLayersDemo.razor b/src/OpenLayers.Blazor.Demo/Pages/SwissMapLayersDemo.razor
@@ -1,16 +1,15 @@
 @page "/swissmaplayersdemo"
 @using System.Xml.Linq
-@using System.Collections.Immutable
 
 <h3>SwissMapLayersDemo</h3>
 
 <div class="m-2">
     <select @bind="_selectedLayer">
-        @if (_layerIds != null)
+        @if (_layerList != null)
         {
-            @foreach (var layerId in _layerIds)
+            @foreach (var layer in _layerList)
             {
-                <option value="@layerId.Key">@layerId.Value</option>
+                <option value="@layer.Key">@layer.Title (@layer.Key)</option>
             }
         }
     </select>
@@ -27,30 +26,45 @@
     private SwissMap _map = null!;
     private IDictionary<string, string>? _layerIds;
     private string? _selectedLayer;
+    private List<Layer>? _layerList;
 
     [Inject]
     private HttpClient HttpClient { get; set; }
 
-    protected override Task OnInitializedAsync()
+    protected override async Task OnInitializedAsync()
     {
-        return LoadSwissGeoLayersIds();
+        await LoadSwissGeoLayersIds();
     }
 
     private async Task LoadSwissGeoLayersIds()
     {
         var stream = await HttpClient.GetStreamAsync("https://wms.geo.admin.ch/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities");
         var xdoc = await XDocument.LoadAsync(stream, LoadOptions.None, CancellationToken.None);
         var ns = xdoc.Root.GetDefaultNamespace();
-        var layers = xdoc.Root.Element(ns + "Capability").Elements(ns + "Layer");
-        _layerIds = layers.Elements(ns + "Layer")
-            .ToImmutableSortedDictionary(p => p.Element(ns + "Name").Value, p => p.Element(ns + "Title").Value);
+        var layers = xdoc.Root.Element(ns + "Capability").Elements(ns + "Layer").Elements(ns + "Layer");
+
+
+        _layerList = layers.Select(p =>
+        {
+            var layer = new Layer
+            {
+                SourceType = SourceType.TileWMS,
+                Opacity = .7,
+                Url = $"https://wms.geo.admin.ch/?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS={p.Element(ns + "Name").Value}&LANG=en",
+                Format = "image/png",
+                Key = p.Element(ns + "Name").Value,
+                Title = p.Element(ns + "Title").Value,
+            };
+            layer.SourceParameters["Abstract"] = p.Element(ns + "Abstract").Value;
+            return layer;
+        }).OrderBy(p => p.Title).ToList();
     }
 
-    private Task AddSelectedLayer()
+    private void AddSelectedLayer()
     {
         if (_map.LayersList.Count > 1)
             _map.LayersList.RemoveAt(1);
-        return _map.AddSwissGeoLayer(_selectedLayer, .7);
-    }
 
+        _map.LayersList.Add(_layerList.First(p => p.Key == _selectedLayer));
+    }
 }
diff --git a/src/OpenLayers.Blazor.Demo/Shared/NavMenu.razor b/src/OpenLayers.Blazor.Demo/Shared/NavMenu.razor
@@ -57,6 +57,12 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="/drawdemo">
+                <span class="oi oi-plus" aria-hidden="true"></span> Draw Shapes
+            </NavLink>
+        </div>
+
     </nav>
 </div>
 

diff --git a/src/OpenLayers.Blazor.Demo/_Imports.razor b/src/OpenLayers.Blazor.Demo/_Imports.razor
@@ -5,5 +5,6 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
+@using OpenLayers.Blazor
 @using OpenLayers.Blazor.Demo
 @using OpenLayers.Blazor.Demo.Shared
diff --git a/src/OpenLayers.Blazor.Demo/libman.json b/src/OpenLayers.Blazor.Demo/libman.json
@@ -3,8 +3,7 @@
   "defaultProvider": "cdnjs",
   "libraries": [
     {
-      "provider": "cdnjs",
-      "library": "[email protected]",
+      "library": "[email protected]",
       "destination": "wwwroot/lib/openlayers/",
       "files": [
         "dist/ol.js",
@@ -15,16 +14,6 @@
       ]
     },
     {
-      "provider": "cdnjs",
-      "library": "[email protected]",
-      "destination": "wwwroot/lib/font-awesome/",
-      "files": [
-        "css/all.min.css",
-        "webfonts/fa-solid-900.woff2"
-      ]
-    },
-    {
-      "provider": "cdnjs",
       "library": "[email protected]",
       "destination": "wwwroot/lib/font-awesome/",
       "files": [
@@ -35,6 +24,56 @@
         "webfonts/fa-v4compatibility.woff2",
         "css/fontawesome.min.css"
       ]
+    },
+    {
+      "library": "[email protected]",
+      "destination": "wwwroot/lib/bootstrap/",
+      "files": [
+        "js/bootstrap.bundle.js",
+        "css/bootstrap-grid.css",
+        "css/bootstrap-grid.css.map",
+        "css/bootstrap-grid.min.css",
+        "css/bootstrap-grid.min.css.map",
+        "css/bootstrap-grid.rtl.css",
+        "css/bootstrap-grid.rtl.css.map",
+        "css/bootstrap-grid.rtl.min.css",
+        "css/bootstrap-grid.rtl.min.css.map",
+        "css/bootstrap-reboot.css",
+        "css/bootstrap-reboot.css.map",
+        "css/bootstrap-reboot.min.css",
+        "css/bootstrap-reboot.min.css.map",
+        "css/bootstrap-reboot.rtl.css",
+        "css/bootstrap-reboot.rtl.css.map",
+        "css/bootstrap-reboot.rtl.min.css",
+        "css/bootstrap-reboot.rtl.min.css.map",
+        "css/bootstrap-utilities.css",
+        "css/bootstrap-utilities.css.map",
+        "css/bootstrap-utilities.min.css",
+        "css/bootstrap-utilities.min.css.map",
+        "css/bootstrap-utilities.rtl.css",
+        "css/bootstrap-utilities.rtl.css.map",
+        "css/bootstrap-utilities.rtl.min.css",
+        "css/bootstrap-utilities.rtl.min.css.map",
+        "css/bootstrap.css",
+        "css/bootstrap.css.map",
+        "css/bootstrap.min.css",
+        "css/bootstrap.min.css.map",
+        "css/bootstrap.rtl.css",
+        "css/bootstrap.rtl.css.map",
+        "css/bootstrap.rtl.min.css",
+        "css/bootstrap.rtl.min.css.map",
+        "js/bootstrap.bundle.js.map",
+        "js/bootstrap.bundle.min.js",
+        "js/bootstrap.bundle.min.js.map",
+        "js/bootstrap.esm.js",
+        "js/bootstrap.esm.js.map",
+        "js/bootstrap.esm.min.js",
+        "js/bootstrap.esm.min.js.map",
+        "js/bootstrap.js",
+        "js/bootstrap.js.map",
+        "js/bootstrap.min.js",
+        "js/bootstrap.min.js.map"
+      ]
     }
   ]
 }
diff --git a/src/OpenLayers.Blazor.Demo/wwwroot/index.html b/src/OpenLayers.Blazor.Demo/wwwroot/index.html
@@ -2,19 +2,20 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>OpenLayers.Blazor.Demo</title>
-    <base href="/"/>
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
-    <link href="css/app.css" rel="stylesheet"/>
-    <link href="OpenLayers.Blazor.Demo.styles.css" rel="stylesheet"/>
-    <link href="lib/openlayers/ol.css" rel="stylesheet"/>
-    <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet"/>
+    <base href="/" />
+    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" />
+    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
+    <link href="css/app.css" rel="stylesheet" />
+    <link href="OpenLayers.Blazor.Demo.styles.css" rel="stylesheet" />
+    <link href="lib/openlayers/ol.css" rel="stylesheet" />
+    <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
     <script src="lib/openlayers/dist/ol.min.js"></script>
-    <link rel="icon" type="image/png" href="favicon.png"/>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/dark.min.css" rel="stylesheet"/>
-    <link rel="stylesheet" href="lib/font-awesome/css/all.min.css"/>
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/dark.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="lib/font-awesome/css/all.min.css" />
 </head>
 
 <body>