Skip to content

Commit

Permalink
Feature/drawing interaction (#16)
Browse files Browse the repository at this point in the history
* major refactoring, drawing interactions draft
* template shape update on change, buttons
* Check effective template change to call SetDrawingSettings/Fix edit
* drawing update
* fix custom marker image.
* add summaries.

---------
  • Loading branch information
lolochristen authored Oct 9, 2023
1 parent 7b29a7c commit 07d15da
Show file tree
Hide file tree
Showing 78 changed files with 61,007 additions and 579 deletions.
6 changes: 0 additions & 6 deletions OpenLayers.Blazor.sln
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
105 changes: 105 additions & 0 deletions src/OpenLayers.Blazor.Demo/Pages/DrawDemo.razor
Original file line number Diff line number Diff line change
@@ -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();
}
}
2 changes: 1 addition & 1 deletion src/OpenLayers.Blazor.Demo/Pages/LayersDemo.razor
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions src/OpenLayers.Blazor.Demo/Pages/ShapesDemo.razor
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
38 changes: 26 additions & 12 deletions src/OpenLayers.Blazor.Demo/Pages/SwissMapLayersDemo.razor
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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));
}
}
6 changes: 6 additions & 0 deletions src/OpenLayers.Blazor.Demo/Shared/NavMenu.razor
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
1 change: 1 addition & 0 deletions src/OpenLayers.Blazor.Demo/_Imports.razor
Original file line number Diff line number Diff line change
Expand Up @@ -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
63 changes: 51 additions & 12 deletions src/OpenLayers.Blazor.Demo/libman.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
"defaultProvider": "cdnjs",
"libraries": [
{
"provider": "cdnjs",
"library": "[email protected]",
"library": "[email protected]",
"destination": "wwwroot/lib/openlayers/",
"files": [
"dist/ol.js",
Expand All @@ -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": [
Expand All @@ -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"
]
}
]
}
23 changes: 12 additions & 11 deletions src/OpenLayers.Blazor.Demo/wwwroot/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 07d15da

Please sign in to comment.