Merge branch 'features/geojson-custom-markers' of github.com:chucker/…

…BlazorLeaflet into features/geojson-custom-markers

# Conflicts:
#	BlazorLeaflet/BlazorLeaflet.Samples/Shared/NavMenu.razor

BlazorLeaflet/BlazorLeaflet.Samples/Pages/Wms.razor

@@ -0,0 +1,41 @@
+@page "/wms"
+
+@using BlazorLeaflet.Models
+@using BlazorLeaflet.Models.Events
+@inject IJSRuntime jsRuntime
+
+<h1>WMS TileLayer</h1>
+
+<p>A WMS layer sample (schools in France), courtesy of <a href="https://magosm.magellium.com/index.html">magOSM</a>.</p>
+
+<div style="height: 500px; width: 500px;">
+    <LeafletMap Map="_map" />
+</div>
+
+@code
+{
+    private Map _map;
+    private LatLng _markerLatLng = new LatLng { Lat = 47f, Lng = 2f };
+
+    protected override void OnInitialized()
+    {
+        _map = new Map(jsRuntime)
+        {
+            Center = _markerLatLng,
+            Zoom = 4.8f
+        };
+
+        _map.OnInitialized += () =>
+        {
+            _map.AddLayer(new WmsLayer("https://magosm.magellium.com/geoserver/wms?")
+            {
+                Layers = new[] { "magosm:france_schools_point" },
+                Styles = new string[] { },
+                ImageFormat = "image/png",
+                IsTransparent = true,
+                UseUppercaseParameters = true,
+                WmsVersion = "1.3.0"
+            });
+        };
+    }
+}

BlazorLeaflet/BlazorLeaflet.Samples/Shared/NavMenu.razor

@@ -24,13 +24,14 @@
     </ul>
 </div>
 
-@code {
+@code
+{
     bool collapseNavMenu = true;
 
     string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
 
     void ToggleNavMenu()
     {
         collapseNavMenu = !collapseNavMenu;
-    }
+    } 
 }

BlazorLeaflet/BlazorLeaflet/LeafletInterops.cs

@@ -38,6 +38,7 @@ public static ValueTask AddLayer(IJSRuntime jsRuntime, string mapId, Layer layer
         {
             return layer switch
             {
+                WmsLayer wms => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addWmsLayer", mapId, wms, CreateLayerReference(mapId, wms)),
                 TileLayer tileLayer => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addTilelayer", mapId, tileLayer, CreateLayerReference(mapId, tileLayer)),
                 MbTilesLayer mbTilesLayer => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addMbTilesLayer", mapId, mbTilesLayer, CreateLayerReference(mapId, mbTilesLayer)),
                 ShapefileLayer shapefileLayer => jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.addShapefileLayer", mapId, shapefileLayer, CreateLayerReference(mapId, shapefileLayer)),

BlazorLeaflet/BlazorLeaflet/Models/Crs.cs

@@ -0,0 +1,39 @@
+using System;
+namespace BlazorLeaflet.Models
+{
+    /// <summary>
+    /// The Leaflet-supported _c_oordinate _r_eference _s_ystems.
+    ///
+    /// Used in WMS tile layers.
+    /// </summary>
+    public class Crs
+    {
+        public string Code { get; }
+
+        private Crs(string code) => Code = code;
+
+        /// <summary>
+        /// Rarely used by some commercial tile providers. Uses Elliptical
+        /// Mercator projection.
+        /// </summary>
+        public static Crs Epsg3595 => new Crs("EPSG:3595");
+
+        /// <summary>
+        /// The most common CRS for online maps, used by almost all free and
+        /// commercial tile providers. Uses Spherical Mercator projection. Set
+        /// in by default in Map's crs option.
+        /// </summary>
+        public static Crs Epsg3857 => new Crs("EPSG:3857");
+
+        /// <summary>
+        /// A common CRS among GIS enthusiasts. Uses simple Equirectangular
+        /// projection. Leaflet 1.0.x complies with the TMS coordinate scheme
+        /// for EPSG:4326, which is a breaking change from 0.7.x behaviour. If
+        /// you are using a TileLayer with this CRS, ensure that there are two
+        /// 256x256 pixel tiles covering the whole earth at zoom level zero, and
+        /// that the tile coordinate origin is (-180,+90), or (-180,-90) for
+        /// TileLayers with the tms option set.
+        /// </summary>
+        public static Crs Epsg4326 => new Crs("EPSG:4326");
+    }
+}

BlazorLeaflet/BlazorLeaflet/Models/WmsLayer.cs

@@ -0,0 +1,65 @@
+using System;
+using System.Collections.Generic;
+
+namespace BlazorLeaflet.Models
+{
+    public class WmsLayer : TileLayer
+    {
+        /// <summary>
+        /// The base WMS server URL. Typically ends with a ?.
+        /// </summary>
+        public string BaseUrl { get; }
+
+        /// <summary>
+        /// List of WMS layers to show. Required.
+        /// </summary>
+        public string[] Layers { get; set; }
+
+        /// <summary>
+        /// List of WMS styles to apply. Can be left empty.
+        /// </summary>
+        public string[] Styles { get; set; }
+
+        /// <summary>
+        /// The image format (as a MIME type) to use, such as 'image/png'.
+        /// </summary>
+        public string ImageFormat { get; set; }
+
+        /// <summary>
+        /// Whether the images are transparent. Requires
+        /// <see cref="ImageFormat"/> to be 'image/png'.
+        /// </summary>
+        public bool IsTransparent { get; set; }
+
+        /// <summary>
+        /// The WMS version to use, typically '1.1.1' or '1.3.0'.
+        /// </summary>
+        public string WmsVersion { get; set; }
+
+        /// <summary>
+        /// The _c_oordinate _r_eference _s_ystem to use.
+        /// </summary>
+        public Crs Crs { get; set; }
+
+        /// <summary>
+        /// Whether to pass request query parameter keys in upper case.
+        /// </summary>
+        public bool UseUppercaseParameters { get; set; }
+
+        /// <summary>
+        /// Additional vendor-specific parameters to pass to the WMS server.
+        /// </summary>
+        public Dictionary<string, string> AdditionalWmsParameters { get; set; }
+
+        /// <summary>
+        /// Initializes a WMS tile layer pointing to a certain WMS server.
+        /// </summary>
+        /// <param name="baseUrl">
+        /// The base URL for the WMS server to connect to.
+        /// </param>
+        public WmsLayer(string baseUrl)
+        {
+            BaseUrl = baseUrl;
+        }
+    }
+}

BlazorLeaflet/BlazorLeaflet/wwwroot/leafletBlazorInterops.js

@@ -203,6 +203,25 @@ window.leafletBlazor = {
         const geoJsonLayer = L.geoJson(geoDataObject, options);
         addLayer(mapId, geoJsonLayer, geodata.id);
     },
+    addWmsLayer: function (mapId, wms, objectReference) {
+        var options = {
+            layers: wms.layers.join(','),
+            styles: wms.styles.join(','),
+            crs: createCrs(wms.crs),
+            attribution: wms.attribution,
+            format: wms.imageFormat,
+            transparent: wms.isTransparent,
+            version: wms.wmsVersion,
+            uppercase: wms.useUppercase
+        };
+
+        if (wms.additionalWmsParameters)
+            options = { ...options, ...wms.additionalWmsParameters };
+
+        const layer = L.tileLayer.wms(wms.baseUrl, options);
+
+        addLayer(mapId, layer, wms.id);
+    },
     removeLayer: function (mapId, layerId) {
         const remainingLayers = layers[mapId].filter((layer) => layer.id !== layerId);
         const layersToBeRemoved = layers[mapId].filter((layer) => layer.id === layerId); // should be only one ...
@@ -284,6 +303,22 @@ function createIcon(icon) {
     })
 }
 
+function createCrs(crs) {
+    if (!crs)
+        return L.CRS.EPSG3857;
+
+    switch (crs.code) {
+        case "EPSG:3395":
+            return L.CRS.EPSG3395;
+        case "EPSG:3857":
+            return L.CRS.EPSG3857;
+        case "EPSG:4326":
+            return L.CRS.EPSG4326;
+    }
+
+    return null;
+}
+
 function shapeToLatLngArray(shape) {
     var latlngs = [];
     shape.forEach(pts => {