DPBlazorMapLibrary 1.2.0

.NET 6.0 This package targets .NET 6.0. The package is compatible with this framework or higher. 
dotnet add package DPBlazorMapLibrary --version 1.2.0                

                    
                

            
NuGet\Install-Package DPBlazorMapLibrary -Version 1.2.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="DPBlazorMapLibrary" Version="1.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add DPBlazorMapLibrary --version 1.2.0                

                    
                

            
#r "nuget: DPBlazorMapLibrary, 1.2.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install DPBlazorMapLibrary as a Cake Addin
#addin nuget:?package=DPBlazorMapLibrary&version=1.2.0

// Install DPBlazorMapLibrary as a Cake Tool
#tool nuget:?package=DPBlazorMapLibrary&version=1.2.0

DPBlazorMap.

DP Blazor Map is a library for Blazor, which is a wrapper on top of the Leaflet js library.

NuGet version (DPBlazorMapLibrary)

The project is being created and developed in order to become the basis for creating a geoportal on Blazer.

Template Example

https://github.com/DP-projects/DPBlazorMapExample

Table of contents

Start

  1. Add NuGet package to your project.
  2. Add latest Leflet required Leaflet download.
	<head>
	  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
		   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
		   crossorigin="" />
	</head>
	<body>
	    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
		    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
		    crossorigin=""></script>
	</body>
  1. Add @using DPBlazorMapLibrary; to your _Import.cshtml file. Or in the places used separately.
  2. Add builder.Services.AddMapService(); in your Program.cs file.

Usage

  1. Add component.
<DPBlazorMapLibrary.Map @ref="_map" MapOptions="@_mapOptions" CssClass="mapClass" AfterRender="@AfterMapRender"></DPBlazorMapLibrary.Map>

<style>
    .mapClass {
        height: 100vh;
        width: 100vw;
    }
</style>

  1. In the code, [Inject] public LayerFactory LayerFactory { get; init; } 2.1. Optional: [Inject] public IIconFactory IconFactory{ get; init; }

  2. Create an instance of the map settings and links to the map component

private MapOptions _mapOptions;

private Map _map;
  1. Create objects, their properties, etc...
    private async Task AfterMapRender()
    {
        //Create Tile Layer
        var tileLayerOptions = new TileLayerOptions()
            {
                Attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
            };

        var mainTileLayer = await LayerFactory.CreateTileLayerAndAddToMap("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", _map, tileLayerOptions);


        //Create marker
        var marker = await LayerFactory.CreateMarkerAndAddToMap(new LatLng(0, 0), _map, null);

        //Create dragable marker

        IconOptions iconOptions = new()
        {
            IconUrl = "http://leafletjs.com/examples/custom-icons/leaf-green.png",
            IconSize = new Point(38, 95),
            IconAnchor = new Point(22, 94),
            ShadowUrl = "http://leafletjs.com/examples/custom-icons/leaf-shadow.png",
            ShadowSize = new Point(50, 64),
            ShadowAnchor = new Point(4, 61),
            PopupAnchor = new Point(-3, -76),
        };

        MarkerOptions markerOptions = new()
        {
            Opacity = 0.5,
            Draggable = true,
            IconRef = await this.IconFactory.Create(iconOptions),
        };

        await this.LayerFactory.CreateMarkerAndAddToMap(new LatLng(0.001, -0.001), _map, markerOptions);


        //Create marker with events
        var coordinate = new LatLng(0, 1);
        var markerWithEvents = await LayerFactory.CreateMarkerAndAddToMap(coordinate, _map, null);
        await markerWithEvents.OnClick(async (MouseEvent mouseEvent) =>
        {

        });

        await markerWithEvents.OnDblClick(async (MouseEvent mouseEvent) =>
        {

        });

        await markerWithEvents.OnContextMenu(async (MouseEvent mouseEvent) =>
        {

        });


        //Create polyline
        var polylineOptions = new PolylineOptions();
        var polyline = await LayerFactory.CreatePolylineAndAddToMap(new List<LatLng>() { new LatLng(0.1, 0.12), new LatLng(0.14, 0.12), new LatLng(0.12, 0.13) }, _map, polylineOptions);

        //Create polygon
        var polygonOptions = new PolygonOptions() { Fill = true, Color = "red" };
        var polygon = await LayerFactory.CreatePolygonAndAddToMap(new List<LatLng>() { new LatLng(1.1, 0.12), new LatLng(1.14, 0.12), new LatLng(1.12, 0.13) }, _map, polygonOptions);

        //Create rectangle
        var rectangleOptions = new RectangleOptions() { Fill = true, Color = "black" };
        var rectangle = await LayerFactory.CreateRectangleAndAddToMap(new LatLngBounds(new LatLng(1.1, 0.62), new LatLng(2.14, 1.62)), _map, rectangleOptions);

        //Create circle
        var circleOptions = new CircleOptions() { Radius = 1000 };
        var circle = await LayerFactory.CreateCircleAndAddToMap(new LatLng(0, 0), _map, circleOptions);

        //Create circle marker
        var circleMarkerOptions = new CircleMarkerOptions() { Radius = 10 };
        var circleMarker = await LayerFactory.CreateCircleMarkerAndAddToMap(new LatLng(0, 1), _map, circleMarkerOptions);

        //Create Video overlay
        var videoOverlayOptions = new VideoOverlayOptions();
        videoOverlayOptions.Muted = true;

        var videoOverlay = await LayerFactory.CreateVideoOverlayAndAddToMap("https://www.mapbox.com/bites/00188/patricia_nasa.webm", _map,
            new LatLngBounds(new LatLng(32, -130), new LatLng(13, -100)), videoOverlayOptions);

        //Create image overlay
        var imageBounds = new LatLngBounds(new LatLng(40.712216, -74.22655), new LatLng(40.773941, -74.12544));
        var imageOverlayOptions = new ImageOverlayOptions();
        var imageOverlay = await LayerFactory.CreateImageOverlayAndAddToMap("http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", _map,
            imageBounds,
            imageOverlayOptions);

        await _map.FlyToBounds(imageBounds);

        //Create geoJSON layer
        var path = System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), "wwwroot", "omsk_vodoem.geojson");
        var json = await File.ReadAllTextAsync(path);
        var geoJsonObject = GeoJSON.DeserealizeFromString(json);
        var geoJSONLayer = await LayerFactory.CreateGeoJSONLayerAndAddToMap(geoJsonObject, _map, null);
    }

TODO

[] Add events to layers

[] Add methods/events to Layer : RemoveFrom, onAdd, onRemove, getEvents, getAttribution, <Popup options> options, <Tooltip options> options, getPopup, getTooltip, [] add methods/events to ImageOverlay : event load, event error, getBounds, getElement, [] add methods/events to VideoOverlay: event load, event error, getElement, [] add methods/events to Polyline: closestLayerPoint, [] add methods/events to MapOptions: doubleClickZoom, CRS, Animation Options, Panning Inertia Options, Keyboard Navigation Options, Mouse wheel options, Touch interaction options

Product 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 was computed.  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 was computed.  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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.2.0 13,428 12/14/2021
1.1.2-alpha 196 12/14/2021
1.1.1-alpha 190 12/14/2021
1.1.0 306 12/10/2021
1.1.0-alpha 186 12/14/2021
1.0.14-alpha 251 12/10/2021
1.0.13-alpha 248 12/10/2021
1.0.12-alpha 254 12/10/2021
1.0.11-alpha 268 12/10/2021
1.0.10-alpha 262 12/10/2021
1.0.9-alpha 258 12/10/2021
1.0.8-alpha 251 12/10/2021
1.0.7-alpha 281 12/9/2021
1.0.6-alpha 284 12/9/2021
1.0.5-alpha 263 12/9/2021
1.0.4-alpha 256 12/9/2021
1.0.3-alpha 296 12/9/2021
1.0.2 415 12/9/2021 1.0.2 is deprecated because it has critical bugs.
1.0.1 392 12/9/2021 1.0.1 is deprecated because it has critical bugs.
1.0.0 436 12/9/2021 1.0.0 is deprecated because it has critical bugs.