This package is a wrapper around markerjs to facilitate its use in Blazor applications. (Currently only wraps basic functions)
- Package Manager
- Install-Package Markerjs.Blazor -Version 1.0.0
- .NET CLI
- dotnet add package Markerjs.Blazor --version 1.0.0
Under the linkware license,
All commercial licenses come with email support and major version upgrades subscription. The first year of the subscription is included in the initial purchase. Later on, the subscription renews for approximately half of the initial license price per year (you can see the exact price in the shopping cart). This subscription is optional and you can cancel it at any time. Your license is perpetual and never expires. (Markerjs official website)
- Add the following script reference to the bottom of th body section In index.html (for Blazor WebAssembly) or _Host.cshtml (for Blazor server)
<script src="_content/Markerjs.Blazor/js/markerjs2.js"></script>
<script src="_content/Markerjs.Blazor/js/markerjs-live.js"></script>- Register services to Application
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddMarkerJs(); // Add this line- Add Namespace to _Import.cs (Optional)
@using Markerjs.Blazor.Components@using Markerjs.Blazor.Components
<MarkerArea @ref="_markerArea" Src="_content/Markerjs.Blazor/test.jpg" Class="img-fluid" Style="max-width:50%;" JsonText="@JsonText"/>
@code{
private MarkerArea? _markerArea{ get; set; }
}Methods
| Method | Description |
|---|---|
| ShowMarkerArea | Open the image marker |
| GetConfig | Get config (Json) |
Parameters
| Name | Description |
|---|---|
| Src | Image source url |
| Class | CSS Class |
| Style | CSS Style |
| JsonText | For binding json content |
@using Markerjs.Blazor.Components
<MarkerView @ref="_markerView" Src="_content/Markerjs.Blazor/test.jpg" Class="img-fluid" Style="max-width:50%;" JsonText="@JsonText" />
@code{
private MarkerView? _markerView { get; set; }
}Methods
| Method | Description |
|---|---|
| ToggleMarkers | Toggle markers from json config |
Parameters
| Name | Description |
|---|---|
| Src | Image source url |
| Class | CSS Class |
| Style | CSS Style |
| JsonText | For binding json content |
Special thanks to dindins for supporting this project.
In order to be able to separate this module, our project was delayed for a few days (It was a blazor module required for closed source projects)