/Markerjs.Blaozr

This package is a wrapper around markerjs to facilitate its use in Blazor applications.

Primary LanguageC#

MarkerJS.Blazor

About

This package is a wrapper around markerjs to facilitate its use in Blazor applications. (Currently only wraps basic functions)

Installation

  • Package Manager
    • Install-Package Markerjs.Blazor -Version 1.0.0
  • .NET CLI
    • dotnet add package Markerjs.Blazor --version 1.0.0

Support with commercial licenses

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)


Quick Start guide

  1. 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>
  1. 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
  1. Add Namespace to _Import.cs (Optional)
@using Markerjs.Blazor.Components

MarkerArea Component

@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

MarkerView Component

@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

Project startup sponsor

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)