Add project files.

BlazorDeviceInterop.Components/BlazorDeviceInterop.Components.csproj

@@ -0,0 +1,19 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>netstandard2.0</TargetFramework>
+    <RazorLangVersion>3.0</RazorLangVersion>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components" Version="3.1.8" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="3.1.8" />
+  </ItemGroup>
+
+
+  <ItemGroup>
+    <None Include="wwwroot\leaflet-map\leaflet-map.js" />
+  </ItemGroup>
+
+</Project>

BlazorDeviceInterop.Components/InteropObject.cs

@@ -0,0 +1,22 @@
+using Microsoft.JSInterop;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components
+{
+    public abstract class InteropObject
+    {
+        protected JsRuntimeObjectRef _jsObjRef;
+
+        [JsonPropertyName("__jsObjRefId")]
+        public int JsObjectRefId { get { return _jsObjRef.JsObjectRefId; } }
+
+        public async Task BindToJsRuntime(IJSRuntime jsRuntime)
+        {
+            _jsObjRef = await CreateJsObjectRef(jsRuntime);
+            _jsObjRef.JSRuntime = jsRuntime;
+        }
+
+        protected abstract Task<JsRuntimeObjectRef> CreateJsObjectRef(IJSRuntime jsRuntime);
+    }
+}

BlazorDeviceInterop.Components/JsRuntimeObjectRef.cs

@@ -0,0 +1,20 @@
+using Microsoft.JSInterop;
+using System;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components
+{
+    public class JsRuntimeObjectRef : IAsyncDisposable
+    {
+        internal IJSRuntime JSRuntime { get; set; }
+
+        [JsonPropertyName("__jsObjRefId")]
+        public int JsObjectRefId { get; set; }
+
+        public async ValueTask DisposeAsync()
+        {
+            await JSRuntime.InvokeVoidAsync("deviceInterop.removeObjectRef", JsObjectRefId);
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/InteractiveLayer.cs

@@ -0,0 +1,6 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public abstract class InteractiveLayer : Layer
+    {
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/LatLng.cs

@@ -0,0 +1,13 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class LatLng
+    {
+        public double Lat { get; set; }
+        public double Lng { get; set; }
+        public LatLng(double lat, double lng)
+        {
+            Lat = lat;
+            Lng = lng;
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/Layer.cs

@@ -0,0 +1,20 @@
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public abstract class Layer : InteropObject
+    {
+        public async Task<Layer> AddTo(Map map)
+        {
+            await _jsObjRef.JSRuntime.InvokeVoidAsync("LeafletMap.Layer.addTo", this, map);
+            return this;
+        }
+
+        public async Task<Layer> Remove()
+        {
+            await _jsObjRef.JSRuntime.InvokeVoidAsync("LeafletMap.Layer.remove", this);
+            return this;
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/LayerOptions.cs

@@ -0,0 +1,7 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class LayerOptions
+    {
+        public string Attribution { get; set; }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/LeafletMap.razor

@@ -0,0 +1,3 @@
+@inherits LeafletMapBase
+
+<div class="leafletMap" id="@Map.ElementId"></div>

BlazorDeviceInterop.Components/LeafletMap/LeafletMap.razor.cs

@@ -0,0 +1,23 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class LeafletMapBase : ComponentBase
+    {
+        [Inject] public IJSRuntime JSRuntime { get; set; }
+        [Parameter] public Map Map { get; set; }
+        [Parameter] public TileLayer TileLayer { get; set; }
+
+        protected async override Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                await Map.BindToJsRuntime(JSRuntime);
+                await TileLayer.BindToJsRuntime(JSRuntime);
+                await TileLayer.AddTo(Map);
+            }
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/Map.cs

@@ -0,0 +1,23 @@
+using Microsoft.JSInterop;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class Map : InteropObject
+    {
+        [JsonIgnore] public string ElementId { get; }
+        [JsonIgnore] public MapOptions Options { get; }
+
+        public Map(string elementId, MapOptions options)
+        {
+            ElementId = elementId;
+            Options = options;
+        }
+
+        protected override async Task<JsRuntimeObjectRef> CreateJsObjectRef(IJSRuntime jsRuntime)
+        {
+            return await jsRuntime.InvokeAsync<JsRuntimeObjectRef>("LeafletMap.map", ElementId, Options);
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/MapOptions.cs

@@ -0,0 +1,8 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class MapOptions
+    {
+        public LatLng Center { get; set; }
+        public int Zoom { get; set; }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/Marker.cs

@@ -0,0 +1,22 @@
+using Microsoft.JSInterop;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class Marker : InteractiveLayer
+    {
+        [JsonIgnore] public LatLng LatLng { get; }
+        [JsonIgnore] public MarkerOptions Options { get; }
+
+        public Marker(LatLng latlng, MarkerOptions options)
+        {
+            LatLng = latlng;
+            Options = options;
+        }
+        protected override async Task<JsRuntimeObjectRef> CreateJsObjectRef(IJSRuntime jsRuntime)
+        {
+            return await jsRuntime.InvokeAsync<JsRuntimeObjectRef>("LeafletMap.marker", LatLng, Options);
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/MarkerOptions.cs

@@ -0,0 +1,6 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class MarkerOptions
+    {
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/Path.cs

@@ -0,0 +1,6 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public abstract class Path : InteractiveLayer
+    {
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/Polyline.cs

@@ -0,0 +1,33 @@
+using Microsoft.JSInterop;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class Polyline : Path
+    {
+        [JsonIgnore] public IEnumerable<LatLng> LatLngs { get; }
+        [JsonIgnore] public PolylineOptions Options { get; }
+
+        public Polyline(IEnumerable<LatLng> latLngs, PolylineOptions options)
+        {
+            LatLngs = latLngs;
+            Options = options;
+        }
+
+        protected override async Task<JsRuntimeObjectRef> CreateJsObjectRef(IJSRuntime jsRuntime)
+        {
+            return await jsRuntime.InvokeAsync<JsRuntimeObjectRef>("LeafletMap.polyline", LatLngs.ToArray(), Options);
+        }
+
+        public async Task<Polyline> AddLatLng(LatLng latLng)
+        {
+            await _jsObjRef.JSRuntime.InvokeVoidAsync("LeafletMap.Polyline.addLatLng", this, latLng);
+            return this;
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/PolylineOptions.cs

@@ -0,0 +1,6 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class PolylineOptions : LayerOptions
+    {
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/TileLayer.cs

@@ -0,0 +1,23 @@
+using Microsoft.JSInterop;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class TileLayer : Layer
+    {
+        [JsonIgnore] public string UrlTemplate { get; }
+        [JsonIgnore] public TileLayerOptions Options { get; }
+
+        public TileLayer(string urlTemplate, TileLayerOptions options)
+        {
+            UrlTemplate = urlTemplate;
+            Options = options;
+        }
+
+        protected override async Task<JsRuntimeObjectRef> CreateJsObjectRef(IJSRuntime jsRuntime)
+        {
+            return await jsRuntime.InvokeAsync<JsRuntimeObjectRef>("LeafletMap.tileLayer", UrlTemplate, Options);
+        }
+    }
+}

BlazorDeviceInterop.Components/LeafletMap/TileLayerOptions.cs

@@ -0,0 +1,6 @@
+namespace BlazorDeviceInterop.Components.LeafletMap
+{
+    public class TileLayerOptions : LayerOptions
+    {
+    }
+}

BlazorDeviceInterop.Components/_Imports.razor

@@ -0,0 +1 @@
+@using Microsoft.AspNetCore.Components.Web

BlazorDeviceInterop.Components/wwwroot/device-interop.js

@@ -0,0 +1,31 @@
+var deviceInterop = deviceInterop || {};
+
+deviceInterop.objRefs = {};
+deviceInterop.objRefId = 0;
+deviceInterop.objRefKey = '__jsObjRefId';
+deviceInterop.storeObjRef = function (obj) {
+    var id = deviceInterop.objRefId++;
+    deviceInterop.objRefs[id] = obj;
+    var objRef = {};
+    objRef[deviceInterop.objRefKey] = id;
+    return objRef;
+}
+deviceInterop.removeObjectRef = function (id) {
+    delete deviceInterop.objRefs[id];
+}
+
+DotNet.attachReviver(function (key, value) {
+    if (value &&
+        typeof value === 'object' &&
+        value.hasOwnProperty(deviceInterop.objRefKey) &&
+        typeof value[deviceInterop.objRefKey] === 'number') {
+        var id = value[deviceInterop.objRefKey];
+        if (!(id in deviceInterop.objRefs)) {
+            throw new Error("The JS object reference doesn't exist: " + id);
+        }
+        const instance = deviceInterop.objRefs[id];
+        return instance;
+    } else {
+        return value;
+    }
+});

BlazorDeviceInterop.Components/wwwroot/leaflet-map/leaflet-map.js

@@ -0,0 +1,39 @@
+window.LeafletMap = {
+
+    map: function (id, options) {
+        return deviceInterop.storeObjRef(L.map(id, options));
+    },
+
+    marker: function (latlng, options) {
+        return deviceInterop.storeObjRef(L.marker(latlng, options));
+    },
+
+    polyline: function (latlngs, options) {
+        return deviceInterop.storeObjRef(L.polyline(latlngs, options));
+    },
+
+    tileLayer: function (urlTemplate, options) {
+        return deviceInterop.storeObjRef(L.tileLayer(urlTemplate, options));
+    },
+
+    Layer: {
+
+        addTo: function (layer, map) {
+            layer.addTo(map);
+        },
+
+        remove: function (layer) {
+            layer.remove();
+        }
+
+    },
+
+    Polyline: {
+
+        addLatLng: function (polyline, latlng, latlngs) {
+            polyline.addLatLng(latlng, latlngs);
+        }
+
+    }
+
+}