OpenLayers.Blazor
1.5.10
See the version list below for details.
dotnet add package OpenLayers.Blazor --version 1.5.10
NuGet\Install-Package OpenLayers.Blazor -Version 1.5.10
<PackageReference Include="OpenLayers.Blazor" Version="1.5.10" />
paket add OpenLayers.Blazor --version 1.5.10
#r "nuget: OpenLayers.Blazor, 1.5.10"
// Install OpenLayers.Blazor as a Cake Addin #addin nuget:?package=OpenLayers.Blazor&version=1.5.10 // Install OpenLayers.Blazor as a Cake Tool #tool nuget:?package=OpenLayers.Blazor&version=1.5.10
OpenLayers.Blazor
This is a map component based on OpenLayers to show different types and layers of maps from sources like OpenStreet, Bing, SwissTopo ary WMTS/WMS compatible source with some features like markes or shape drawing. The component has implemented the swiss specific coordination projection (VL03/VL95) and therefore can project map content from swisstopo (https://map.geo.admin.ch/).
Major Changes
Starting fromn version 1.5, the coordinates are represented and defined according to EPSG. This means the input for a Coordinate object will be switched: Coordinate(1197650, 2604200) > Coordinate(2604200, 1197650) or new Coordinate(51, 0) > Coordinate(0, 51)
Demo/Examples
https://openlayers-blazor-demo.laurent-christen.ch/
Usage
Setup
install nuget package
dotnet add package OpenLayers.Blazor
Download the openlayers distribution js/css files https://github.com/openlayers/openlayers or from other sources and include them in the index.html file:
<head> ... <link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/8.1.0/ol.min.css" rel="stylesheet" /> <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/8.1.0/dist/ol.min.js"></script> ... </head>
Examples
<SwissMap Style="height:800px">
<Popup>
<div id="popup" class="ol-box">
@if (context is Marker marker)
{
<h3>@marker.Title</h3>
<p>@marker.Coordinate.X / @marker.Coordinate.Y</p>
}
</div>
</Popup>
<Features>
<Marker Type="MarkerType.MarkerPin" Coordinate="new Coordinate(2604200, 1197650)"></Marker>
<Marker Type="MarkerType.MarkerFlag" Coordinate="new Coordinate(2624200, 1177650)" Title="Hallo" BackgroundColor="#449933" Popup></Marker>
<Line Points="new []{new Coordinate(1197650, 2604200), new Coordinate(2624200, 1177650)}" BorderColor="cyan"></Line>
</Features>
</SwissMap>
<OpenStreetMap Style="height:480px; width:640px" Zoom="5" Center="new Coordinate(0, 51)">
<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"
Opacity=".3"
CrossOrigin="anonymous"></Layer>
</Layers>
</OpenStreetMap>
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Microsoft.AspNetCore.Components (>= 6.0.30)
- Microsoft.AspNetCore.Components.Web (>= 6.0.30)
-
net7.0
- Microsoft.AspNetCore.Components (>= 7.0.19)
- Microsoft.AspNetCore.Components.Web (>= 7.0.19)
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.0)
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on OpenLayers.Blazor:
Package | Downloads |
---|---|
OpenLayers.Blazor.Demo.Components
Package Description |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated | |
---|---|---|---|
2.3.1 | 154 | 11/13/2024 | |
2.3.0 | 224 | 10/28/2024 | |
2.2.3 | 330 | 10/9/2024 | |
2.2.2 | 683 | 8/26/2024 | |
2.2.1 | 111 | 8/26/2024 | |
2.2.0 | 115 | 8/26/2024 | |
2.1.0 | 159 | 8/7/2024 | |
2.0.1 | 207 | 7/13/2024 | |
2.0.0 | 104 | 7/12/2024 | |
1.5.10 | 1,099 | 5/28/2024 | |
1.5.9 | 603 | 3/27/2024 | |
1.5.8 | 114 | 3/27/2024 | |
1.5.7 | 443 | 3/4/2024 | |
1.5.6 | 226 | 2/19/2024 | |
1.5.5 | 324 | 2/16/2024 | |
1.5.4 | 125 | 2/16/2024 | |
1.5.3 | 185 | 2/2/2024 | |
1.5.2 | 149 | 1/15/2024 | |
1.5.1 | 162 | 12/29/2023 | |
1.5.0 | 287 | 12/18/2023 | |
1.4.1 | 407 | 11/10/2023 | |
1.4.0 | 186 | 10/24/2023 | |
1.3.1 | 198 | 10/13/2023 | |
1.3.0 | 121 | 10/9/2023 | |
1.1.0 | 364 | 6/11/2023 | |
1.0.1 | 186 | 4/28/2023 | |
1.0.0 | 753 | 4/14/2023 | |
0.3.0-alpha | 124 | 4/13/2023 | |
0.2.0-alpha | 128 | 4/12/2023 | |
0.1.0-alpha | 145 | 4/12/2023 | |
0.0.0-alpha.0 | 91 | 4/12/2023 |