mehigh17 / blazorleaflet Goto Github PK

BlazorLeaflet is a Blazor component wrapping Leaflet's APIs, offering a simple and homogeneous implementation of the Leaflet maps.

License: MIT License

HTML 14.51% C# 64.50% CSS 3.08% JavaScript 17.92%

blazor interop leaflet leaflet-maps maps

blazorleaflet's People

Contributors

Stargazers

Watchers

blazorleaflet's Issues

Mapbox Vector Tiles layers

How can I add a Mapbox Vector Tiles layer ??

Thank you...

How to call FitBounds at the Initialization

Hi,

You added the FitBounds to the Map class and it works fine if I need it when I click on a button.
But, how can I call it (and where can I call it) if I need it when the map is displayed.

Actually, the only place which is fine is in the OnAfterRenderAsync of the LeafletMap class but in a normal way, I would not be able to place any code here.

Perhaps there is something that I misunderstood. Can you help me ?

BlazorLeaflet not working in blazor hybrid (Maui-android)

Blazor WASM project doesn't work in "Release" configuration on Android Chrome.

Problem:

Blazor WASM client empty project with BlazorLeaflet added doesn't work when published with "Release" configuration on Android Chrome browser.
It works on Dekstop and mobile Firefox.
In "Debug" configuration it works on all devices, but it weights a lot more MB, so I'd like to fix it and use Release.

How to fix it? Please help.

How to reproduce:
(If you don't want to make a new project download this repo and continue from step number 4.)

Create new Blazor WASM project in Visual Studio Community 2019 v16.8.6, .NET Core 3.1
Add BlazorLeaflet project to solution
Add Project Reference to dependencies in Blazor project.
Publish Blazor Project with command dotnet publish -c Release -o output:

C:\dev\BugReproductionProject\BugReproductionProject>dotnet publish -c Release -o output
Microsoft (R) Build Engine version 16.8.3+39993bd9d for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  All projects are up-to-date for restore.
C:\dev\BugReproductionProject\BlazorLeaflet\Map.cs(154,25): warning CS4014: Because this call is not awaited, execution of the current method continues before the call is completed. Consider applying the 'await' operator to the result of the call. [C:\dev\BugReproductionProject\BlazorLeaflet\BlazorLeaflet.csproj]
C:\dev\BugReproductionProject\BlazorLeaflet\Map.cs(163,25): warning CS4014: Because this call is not awaited, execution of the current method continues before the call is completed. Consider applying the 'await' operator to the result of the call. [C:\dev\BugReproductionProject\BlazorLeaflet\BlazorLeaflet.csproj]
  BlazorLeaflet -> C:\dev\BugReproductionProject\BlazorLeaflet\bin\Release\netstandard2.0\BlazorLeaflet.dll
  Successfully created package 'C:\dev\BugReproductionProject\BlazorLeaflet\bin\Release\BlazorLeaflet.0.4.0-alpha.nupkg'.
  BugReproductionProject -> C:\dev\BugReproductionProject\BugReproductionProject\bin\Release\netstandard2.1\BugReproductionProject.dll
  BugReproductionProject (Blazor output) -> C:\dev\BugReproductionProject\BugReproductionProject\bin\Release\netstandard2.1\wwwroot
  BugReproductionProject -> C:\dev\BugReproductionProject\BugReproductionProject\output\

Put files from wwwroot to htdocs in my Apache server on local machine (xampp)
Open website on Desktop (localhost) - everithing works fine!
Open website on mobile in Firefox Browser - everithing works fine!
Open website on mobile in Chrome Browser - An unhandler error has occured.

Output from console on mobile, gathered using Developer tools in Chrome:

Streaming compilation failed. Falling back to ArrayBuffer instantiation.  TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

dotnet.3.2.0.js:1 
Stacktrace: 

dotnet.3.2.0.js:1 
Error
    at 640908 (/_framework/wasm/dotnet.3.2.0.js:1)
    at _emscripten_asm_const_iii (/_framework/wasm/dotnet.3.2.0.js:1)
    at wasm_logger (<anonymous>:wasm-function[3126]:0x9ab09)
    at eglib_log_adapter (<anonymous>:wasm-function[6030]:0x10e78d)
    at monoeg_g_logstr (<anonymous>:wasm-function[4574]:0xc99e6)
    at monoeg_g_logv_nofree (<anonymous>:wasm-function[2192]:0x60c59)
    at monoeg_assertion_message (<anonymous>:wasm-function[429]:0xd27e)
    at mono_assertion_message_unreachable (<anonymous>:wasm-function[144]:0x32de)
    at interp_exec_method (<anonymous>:wasm-function[1120]:0x250e8)
    at interp_runtime_invoke (<anonymous>:wasm-function[5655]:0xf7391)

blazor.webassembly.js:1 
* Assertion: should not be reached at /mnt/jenkins/workspace/archive-mono/3.2-wasm/wasm/release/mono/mini/interp/interp.c:3455

blazor.webassembly.js:1 
undefined

f.printErr @ blazor.webassembly.js:1
dotnet.3.2.0.js:1 
Uncaught (in promise) RuntimeError: abort(undefined). Build with -s ASSERTIONS=1 for more info.
    at abort (/_framework/wasm/dotnet.3.2.0.js:1)
    at _abort (/_framework/wasm/dotnet.3.2.0.js:1)
    at wasm_logger (<anonymous>:wasm-function[3126]:0x9ab2b)
    at eglib_log_adapter (<anonymous>:wasm-function[6030]:0x10e78d)
    at monoeg_g_logstr (<anonymous>:wasm-function[4574]:0xc99e6)
    at monoeg_g_logv_nofree (<anonymous>:wasm-function[2192]:0x60c59)
    at monoeg_assertion_message (<anonymous>:wasm-function[429]:0xd27e)
    at mono_assertion_message_unreachable (<anonymous>:wasm-function[144]:0x32de)
    at interp_exec_method (<anonymous>:wasm-function[1120]:0x250e8)
    at interp_runtime_invoke (<anonymous>:wasm-function[5655]:0xf7391)

If you do the same, but you build with -c Debug instead of -c Release it works fine on Chrome.

WebAssembly support

Please add one more project, for example BlazorLeaflet.Samples.WebAssembly, which will represent WebAssembly version of the samples.

TileLayer.Subdomains default value not valid

should probably be something like
public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
instead of
public string[] Subdomains { get; set; } = new string[] { "abc" };

Full screen page mode not working

I am trying to create a simple web map using Blazor and OSM. A single page that will have 100% covered with OSM map. When width and height values are fixes to certain values all work well. However, when I try to set width and height attributes to 100% page is completely blank.

MainLayout.razor

@inherits LayoutComponentBase
@Body

Index.razor

@page "/"
@using System.Drawing
@using BlazorLeaflet
@using BlazorLeaflet.Models
@using BlazorWebMap.Data
@inject IJSRuntime jsRuntime

<div id="map">
    <LeafletMap Map="_map" />
</div>

<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }
</style>

@code
{
    private Map _map;

    protected override void OnInitialized()
    {
        _map = new Map(jsRuntime)
        {
            Center = _startAt,
            Zoom = 12.2f
        };

        _map.OnInitialized += () =>
        {
            _map.AddLayer(new TileLayer
            {
                UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                Attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
            });
    };
    }

    private LatLng _startAt = new LatLng(53.13344f, 23.15026f);
}

I know that is possible to do it by using only HTML but I would like to do it in Blazor using your package.

Help with working under 52North in GSoC

Hello Sir,

Sorry for dropping this message, I couldn't find your email. I am working under the mentorship of Sir Benjamin Pross this year for GSoC. We're creating a cross-platform app for enviroCar and I wanted some tips and suggestions for working under Sir Benjamin as you've already done so before. I'll be really grateful if you could help me out.

Thank you

D Ajay Kumar
[email protected]

"An item with the same key has already been added." exception

#35 introduces a dictionary when adding layers. There seem to be edge cases (in particular, I run into this when having a GeoJsonDataLayer with many markers) where this causes an ArgumentException.

It's not clear to me if this suggests an underlying bug that layers are getting added twice, or that the same layer ID is re-used.

Clear() on Map.Layers doesn't remove layers from DOM

Hi,

Because Map.Layers.Clears() raise a Reset event and the OnLayersChanged(object sender, NotifyCollectionChangedEventArgs args) method doesn't process it (it actually can't because items aren't anymore in the collection), the items aren't removed from the DOM.

One solution would be to create a Layers class which redefine the Clear() method like this :

public class Layers : ObservableCollection<Layer>
  {
      public new void Clear()
      {
          for (int i = this.Items.Count - 1; i >= 0; i--)
          {
              this.Remove(this.Items[i]);
          }
      }
  }

Perhaps you will find a better solution.

Load geojson file

Sorry, i'm trying
BlazorLeaflet and I would like to view geojson layers, loading data from a geojson file. Currently all the tests carried out have not had any positive results. can someone give me some examples? Thank you.

Changing ImageLayer opacity

I am trying to change the imageLayer opacity. I can change it by extending your code to pass on a new opacity to the setOpacity(opacity) function and that sets the opacity for the layer but it is not reflected in the view. It would be nice if someone who know more than I (most people here I guess) could try to do that...
in leafletBlazorInterops.js (given a className on the creation of the imageLayer) added this function:

maps = {};
layers = {};

window.leafletBlazor = {
    ...
    setImageOpacity: function (mapId, imageClassName, opacity) {
        var img= layers[mapId].filter((layer) => layer.options.className === imageClassName)[0];
        img.setOpacity(opacity);
    }
};
...

and in LeafletInterops.cs added this method, :

public static ValueTask SetImageOpacity(IJSRuntime jsRuntime, string mapId, string imageClassName, double opacity)
        {
            return jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.setImageOpacity", mapId, imageClassName, opacity);
        }

and in Maps.cs the following method:

   public void SetImageOpacity(string imageClassName, double opacity)
        {
            LeafletInterops.SetImageOpacity(_jsRuntime, Id, imageClassName, opacity);
        }

Is this project dead?

Upgrade to .NET 5

upgrade to .NET 5 would be nice, to follow the general development.

Warning about map, tilelayer component, using blazorleaflet, using C# insted of javascript

It's normal to see the warnings:

-Found markup element with unexpected name 'Map'. If this is intended to be a component, add a @using directive for its namespace.
-Found markup element with unexpected name 'TileLayer'. If this is intended to be a component, add a @using directive for its namespace.

since the code already has the @using directive on .razor file

@page "/"
@using BlazorLeaflet

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div>
    <Map Id="mapId" Center="51.505, -0.09" Zoom="13">
        <TileLayer UrlTemplate="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </Map>
</div>

And even when I rebuilt the project it continues to give the warnings and I've already checked all the packages, the references in the index.html and in the .csproj file.

Memory leak while creating layers

Currently, when the AddLayer method on LeavletInterop.cs is run, it creates a new DotNetObjectReference and passes that to the JavaScript:

public static ValueTask AddLayer(IJSRuntime jsRuntime, string mapId, Layer layer) =>
    layer switch
    {
        TileLayer tileLayer => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addTilelayer", mapId, tileLayer, DotNetObjectReference.Create(tileLayer)),
        MbTilesLayer mbTilesLayer => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addMbTilesLayer", mapId, mbTilesLayer, DotNetObjectReference.Create(mbTilesLayer)),
        ShapefileLayer shapefileLayer => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addShapefileLayer", mapId, shapefileLayer, DotNetObjectReference.Create(shapefileLayer)),
        Marker marker => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addMarker", mapId, marker, DotNetObjectReference.Create(marker)),
        Rectangle rectangle => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addRectangle", mapId, rectangle, DotNetObjectReference.Create(rectangle)),
        Circle circle => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addCircle", mapId, circle, DotNetObjectReference.Create(circle)),
        Polygon polygon => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addPolygon", mapId, polygon, DotNetObjectReference.Create(polygon)),
        Polyline polyline => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addPolyline", mapId, polyline, DotNetObjectReference.Create(polyline)),
        ImageLayer image => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addImageLayer", mapId, image, DotNetObjectReference.Create(image)),
        GeoJsonDataLayer geo => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addGeoJsonLayer", mapId, geo, DotNetObjectReference.Create(geo)),
        _ => throw new NotImplementedException($"The layer {typeof(Layer).Name} has not been implemented."),
    };

However, since DotNetObjectReference must be disposed when no longer needed, this is a memory leak, since LeafletInterop doesn't keep track of these references and dispose them when the layer is removed. I will fix this in my PR.

Not working on Edge

hello. Your code not working on Edge. Maybe is because your use Spread Operator (...) in javascript.

ReferenceError: L is not defined (WASM)

I'm trying to get this to work using WebAssembly, but keep getting "ReferenceError: L is not defined" in the leafletBlazorInterops.js file.

I added the script to the index.html file, and my component looks like this:

@page "/graphs"
@inject IJSRuntime jsRuntime

<div id="mapContainer" style="width: 300px; height: 300px">
    <LeafletMap Map="_map" />
</div>

@code {
    private Map _map;

    protected override void OnInitialized()
    {
        _map = new Map(jsRuntime);
    }
}

What am I doing wrong? The sample project runs fine for me but I can't find any difference except that I am using WebAssembly.

Stop working after "RemoveLayer(Marker)"

Hello and thank you very much for sharing your code with us!

I was working with an "older" version of your code and it was working fine. After I found the possibility to use the map bounds in the current version, I updated the code. After the update the application stops working if I remove a marker from the map (the Blazor app stops, the map is still working).

You can reproduce it with your sample application by trying to draw a shape.

I did a little bit of research and restored the async function from the older version in LeafletInterop.cs which works for me.

//public static void RemoveLayer(IJSRuntime jsRuntime, string mapId, string layerId)
//{
//	jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.removeLayer", mapId, layerId).GetAwaiter().GetResult();
//	DisposeLayerReference(layerId);
//}

public static async ValueTask RemoveLayer(IJSRuntime jsRuntime, string mapId, string layerId)
{
	await jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.removeLayer", mapId, layerId);
	DisposeLayerReference(layerId);
}

I'm using .NET Core 5, Blazor Server Side.

BR Markus

Icons Size and Anchor in webassembly core hosted

Hi, thanks for your Leaflet wrapper !
I'm using it in a webassembly core hosted (.NET Core 3.1), and when I set a size or an Anchor to a marker, there a not added to the map anymore. I never stop to my breakpoint at the begining addMarker function in leafletBlazorInterops.js

I think this is an sort of incompatibility width Size? and Point? types.

I replaced

public Size? Size { get; set; }
public Point? Anchor { get; set; }

public int Width { get; set; }
public int Height { get; set; }
public int AnchorX { get; set; }
public int AnchorY { get; set; }

and

iconSize: icon.size ? L.point(icon.size.value.width, icon.size.value.height) : null,
iconAnchor: icon.anchor ? L.point(icon.anchor.value.x, icon.anchor.value.y) : null,

iconSize: (icon.width != 0 && icon.height != 0) ? L.point(icon.width, icon.height) : null,
iconAnchor: (icon.anchorX != 0 || icon.anchorY != 0) ? L.point(icon.anchorX, icon.anchorY) : null,

to make it works

PopupOpen when start

Hi,

How can I open the pupups automatically when I start the program or click a dedicated button?

thx for help

BlazorLeaflet not working with WebAssembly and .net core 3.1

Hello,

when I download the repository and run the sample, all works fine. However, when I try integrating a map in my own application, I get this error:

Microsoft.JSInterop.JSException: Could not find 'leafletBlazor' in 'window.window'.

I referenced the BlazorLeaflet.dll file I built myself from my project and added a script reference in index.html. Do I have to do anything beyond that to get it to work?

Thanks! Greets, Menno

BlazorLeaflet.Attributes

After cloning and reinstalling all nuget packages, BlazorLeaflet.Attributes is missing. Just commenting out the
using BlazorLeaflet.Attributes;
in Map.cs makes that go away.

nuget BlazorLeaflet 0.4.0-alpha has BlazorLeaflet 0.3.0-alpha dll inside

https://www.nuget.org/packages/BlazorLeaflet/0.4.0-alpha

createIcon value invalid

leafletBlazorInterops.js

line 203: L.point(icon.anchor.x, icon.anchor.y) -> L.point(icon.anchor.value.x, icon.anchor.value.y)

Status of this project; maintainers and future efforts?

BlazorLeaflet is a great project and has saved me a lot of time. @Mehigh17 , I greatly appreciate your efforts. You've created a great library with good documentation. Thank you.

I'm wondering what the future holds for BlazorLeaflet? I see a healthy community behind this project with good outside engagement. However, I see that six pull requests have remained unresolved. I've also noticed the Nuget package and some documentation is out of date. I'm wondering what, if anything, might spark this project back to life? Maybe additional maintainers (@chucker ?).

I'm more than happy to contribute where I can. If possible, I'd like a better sense of a roadmap before I do though.

Collection was modified; enumeration operation may not execute

In some cases (I can't reproduce it with your sample), the OnAfterRenderAsync method throws the following exception "Collection was modified; enumeration operation may not execute".
It seems to be because when the loop is adding the layers to the DOM, some other layers are added to the collection, thing that is not authorized.

This is probably due to the fact that I use OnParametersSet (and not OnInitialized) to add layers (because I need to) and that OnParametersSet is not called only one time.

I can fix this issue adding a ToList() to the loop like this.

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await LeafletInterops.Create(JsRuntime, Map.Id, InitialPosition, InitialZoom);

            Map.Layers.CollectionChanged += OnLayersChanged;
            foreach (var layer in Map.Layers.**ToList**())
            {
                await LeafletInterops.AddLayer(JsRuntime, Map.Id, layer);
            }
        }
    }

Marker disappears after setting icon size or anchor. How to set size or anchor of custom marker icon?

Hi.

I want to set custom marker icon and it works OK:
marker.Icon = new Icon { Url = "/markers/marker_13.png" };

But then I want to set it's size or Anchor and it disappears from map:
marker.Icon = new Icon { Url = "/markers/marker_13.png", Size = new System.Drawing.Size(32, 32) };

How to set size or anchor of custom marker icon?

Full code below:

@page "/map"

@using BlazorLeaflet.Models
@using BlazorLeaflet.Models.Events
@using BlazorLeaflet.Samples.Data
@using BlazorLeaflet
@inject IJSRuntime jsRuntime

<h1>Blazor Leaflet </h1>

<h3>Drag &amp; drop the Marker!</h3>

<div class="form-inline m-2">
    <div class="form-group mb-2">
        <label>Lat </label>
        <input class="form-control ml-2 mr-2" placeholder="city name" @bind="_markerLatLng.Lat" disabled />
    </div>

    <div class="form-group mb-2">
        <label>Lng </label>
        <input class="form-control ml-2 mr-2" placeholder="city name" @bind="_markerLatLng.Lng" disabled />
    </div>
</div>

<div style="height: 500px; width: 500px;">
    <LeafletMap Map="_map" />
</div>

<div class="pt-3">
    <DrawZoneToggleButton ButtonText="Draw Rectangle" DrawHandler="_drawHandler" OnToggleCallback="_drawHandler.OnDrawRectangleToggle" />
    <DrawZoneToggleButton ButtonText="Draw Circle" DrawHandler="_drawHandler" OnToggleCallback="_drawHandler.OnDrawCircleToggle" />
    <DrawZoneToggleButton ButtonText="Draw Polygon" DrawHandler="_drawHandler" OnToggleCallback="_drawHandler.OnDrawPolygonToggle" />
</div>

@code
{
    private Map _map;
    private DrawHandler _drawHandler;
    private LatLng _markerLatLng = new LatLng { Lat = 50.0171428f, Lng = 19.8900518f };

    protected override void OnInitialized()
    {
        var marker = new Marker(_markerLatLng)
        {
            Draggable = true,
            Title = "Marker 1",
            Popup = new Popup { Content = string.Format("I am at {0:0.00}° lat, {1:0.00}° lng", _markerLatLng.Lat, _markerLatLng.Lng) },
            Tooltip = new Tooltip { Content = "Click and drag to move me" }
        };

        marker.Icon = new Icon { Url = "/markers/marker_13.png", Size = new System.Drawing.Size(32, 32) };

        _map = new Map(jsRuntime)
        {
            Center = _markerLatLng,
            Zoom = 4.8f
        };

        _map.OnInitialized += () =>
        {
            _map.AddLayer(new TileLayer
            {
                UrlTemplate = "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
                Attribution = "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
            });

            _map.AddLayer(marker);
        };

        _drawHandler = new DrawHandler(_map, jsRuntime);

        marker.OnMove += OnDrag;
        marker.OnMoveEnd += OnDragEnd;
    }

    private void OnDrag(Marker marker, DragEvent evt)
    {
        _markerLatLng = evt.LatLng;
        StateHasChanged();
    }

    private async void OnDragEnd(Marker marker, Event e)
    {
        marker.Position = _markerLatLng;
        marker.Popup.Content = string.Format("I am now at {0:0.00}° lat, {1:0.00}° lng", _markerLatLng.Lat, _markerLatLng.Lng);
        await LeafletInterops.UpdatePopupContent(jsRuntime, _map.Id, marker);
    }
}

Changing image data using a canvas

I have a function that generates imagedata that I previously have using normal html/js, put on a canvas context (2d) that I give as input to put on an "L.ImageOverlay.Rotated" layer.
It seems that I can do the same using BlazorLeaflet but the image is not updated.
I believe that what I am looking for is howto force an update of layer rendering in the map (only the specific layer)??

initially i execute this function(to initiate the layer and canvas and context):

    initiateMyMapOverlay: function (mapId, url, tl, tr, bl, height, width) {
        var tla = [tl.x, tl.y];
        var tra = [tr.x, tr.y];
        var bla = [bl.x, bl.y];
        myMapOverlay = L.imageOverlay.rotated(url, tla, tra, bla, {
            opacity: 0.4,
            interactive: true,
            attribution: "FORCE støjkort"
        });
        layers[mapId].push(noiseMapOverlay);
        noiseMapOverlay.addTo(maps[mapId]);
        canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext("2d");
    }

myMapOverlay , canvas and ctx are declared at the top as to be "global" variables.
tl tr bl are map corners (top-left, top-right, bottom-left)

then to update I run the following functions (updateMyMapOpverlay is inside window.leafletBlazor and updateMyMap is outside):

    updateMyMapOverlay: function (rawImageData) {
        if (typeof ctx !== 'undefined') {
            drawMapOverlay(rawImageData);
            myMapOverlay.setUrl(canvas.toDataURL());
        }
        else {
            console.error('Canvas context is not set. Make sure to >initiateMyMapOverlay< first.');
        }
    }


function drawMapOverlay(rawImageData) {
    // https://rembound.com/articles/drawing-pixels-with-html5-canvas-and-javascript
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    data = [...rawImageData];
    ctx.putImageData(imageData, 0, 0);
}

edit: this works instead:

function drawMapOverlay(rawImageData) {
    // https://rembound.com/articles/drawing-pixels-with-html5-canvas-and-javascript
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
   //  data = [...rawImageData]; // fails - does not really copy.
    for (var i = 0; i < rawImageData.length; i++) {
        data[i] = rawImageData[i];
    }
    ctx.putImageData(imageData, 0, 0);
}

WmsLayer enhancement

just put some code here
Tested a bit and looks ok, feel free to use in any way you want.

Enable getting and setting Center and Zoom properties after initialization

The current Center and Zoom properties don't have any effect after the control is initialized. I am working on a project where I need this feature, and I was able to change Map to have the Center and Zoom properties stay updated to the status of the map. If this is something you would want merged into this repository, then assign this issue to me and I can put my code into a proper pull request.

Zoom on an area of the map

Hi,

On my map, I have some markers and would like to be able to zoom on these markers.
To do it, I tried to :

retrieve all the markers
find the coordinates of the box around all markers (min x, min y, max x, max y)
call a fitBounds method I created in leafletBlazorInterops.js

    fitBounds: function (mapId, minX, minY, maxX, maxY) {
        var corner1 = new L.LatLng(maxX, minY);
        var corner2 = new L.LatLng(minX, maxY);
        var bounds = new L.LatLngBounds(corner1, corner2);
        maps[mapId].fitBounds(bounds, { padding: [50, 50] });
    }

If I add a button to call this method, all is ok but I I call this method in OnInitialized, nothing is done.

Could you help me on this point ?

List of outstanding features

I couldn't find a list of the outstanding features/API that needs to be worked on to fully wrap leaflet. I'd like to help, but I really don't know where to start. Could you provide an example of what is involved with wrapping one of the APIs? Or are there any good references to use to learn how to wrap js APIs?

Thanks

Core 3.1 Support

Ran across this project and it looked perfect - won't install in Core 3.1 project though, wants to install 3.0 RC.

If not rendered before adding layers it will not accept new layers

There is an issue that if the map is not rendered before adding layers, layers[mapId] is not defined and hence cannot be pushed new layers onto. I assume this is because the create function is called in OnAfterRenderAsync method.

Map has no Layers property

In LeafletMap.razor Map.Layers does not exist. (it seems that it should just be the property encapsulating private ObservableCollection<Layer> _layers in Map.cs.

Add Bounds property to Map

I find myself needing to access the bounds of the map in one of my projects. I have added this feature to Map in my own fork using a property like this:

/// <summary>
/// Map bounds
/// </summary>
public Bounds Bounds { get; private set; }

Assign this issue to me if you want me to make a pull request for this feature.

load MyTiles from wwwroot.

Hi, I'm building a Blazor server app, which uses floor plans I made and convert to OSM format.
I would like to know if it is possible to view the tiles directories wwwroot (Mytiles / {z} / {x} / {y} .png).
If this is possible, someone can give me some examples, currently all my attempts have not been successful. Thanks.

Move options to separate types

The Map class risks gaining a lot of properties, which seems a bit unwieldy to me.

Leaflet itself has an Options type, e.g. map.options.zoomDelta rather than map.zoomDelta directly. Moreover, its documentation categorizes those options: control, interaction, etc.

Maybe we should follow suit and create separate types LeafletControlOptions, LeafletStateOptions, etc.

Then the user could do:

_map.ControlOptions.ZoomControl = true;
_map.StateOptions = new LeafletStateOptions { MinZoom = 5, MaxZoom = 13 };

Nuget Erros

Nuget not compile correctly. the events namespace or the LatLng class is missing. could you publish a new version?

Add Map Scale

Hi, is there any way to add the map scale in map?

plugin Leaflet.draw

Any ideas on how to incorporate the Leaflet.draw plugin or how to make the layers editable

Not working on IE

I am using BlazorLeaflet in my Blazor project. When I run my project in Google Chrome it works fine but on IE map is not showing up. I used blazor.polyfill.js in my project and still it does not work. I used browser dev tools and I see this error. [2020-02-26T15:35:14.547Z] Error: Microsoft.JSInterop.JSException: Could not find 'leafletBlazor' in 'window.window'.
Error: Could not find 'leafletBlazor' in 'window.window'.

mehigh17 / blazorleaflet Goto Github PK

blazorleaflet's People

Contributors

Stargazers

Watchers

Forkers

blazorleaflet's Issues

Recommend Projects

Recommend Topics

Recommend Org