Merge pull request #413 from dymaptic/feature/410-wmts-layer

WMTS Layer

Author: TimPurdum

Directory.Build.props

@@ -2,6 +2,6 @@
   <PropertyGroup>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <CoreVersion>4.0.0.3</CoreVersion>
+    <CoreVersion>4.0.0.5</CoreVersion>
   </PropertyGroup>
 </Project>

samples/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/WMTSLayers.razor

@@ -0,0 +1,41 @@
+@page "/wmtslayers"
+
+
+<h3>WMTS Layers</h3>
+
+<div class="links-div">
+    <a class="btn btn-secondary" target="_blank" href="https://developers.arcgis.com/javascript/latest/sample-code/layers-wmts/">ArcGIS API for JavaScript</a>
+    <a class="btn btn-primary" target="_blank" href="https://www.ign.es/web/ign/portal">Instituto Geográfico Nacional</a>
+</div>
+<p class="instructions">
+    This sample shows how to add an instance of WMTSLayer. The WMTSLayer is used to create layers based on OGC Web Map Tile Service (WMTS). Typically, a WMTS service acts as a directory of WMTS layers, you can set a specific layer using the activeLayer property, (or else it will default to the first sublayer). The WMTSLayer initially executes a WMTS GetCapabilities request, which might require CORS or a proxy page.
+</p>
+<p class="instructions">
+    The layers used in this sample are from <a target="_blank" href="https://www.ign.es/">Instituto Geográfico Nacional</a>. Use the Basemap Toggle component to toggle between the layers.
+</p>
+
+<Basemap @ref="_orthoIGNBasemap" 
+         ThumbnailUrl="https://www.ign.es/wmts/mapa-raster?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=MTN&STYLE=default&FORMAT=image%2Fjpeg&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX=6&TILEROW=24&TILECOL=31">
+    <WMTSLayer Url="https://www.ign.es/wmts/mapa-raster"
+               ActiveLayer="@(new WMTSSublayer(wMTSSublayerId: "MTN", tileMatrixSetId: "GoogleMapsCompatible"))"
+               ServiceMode="ServiceMode.KVP"
+               Copyright="@("<a href=\"https://www.ign.es/\" target=\"_blank\">Instituto Geográfico Nacional</a>")"/>
+</Basemap>
+
+<MapView class="map-view" Scale="4622333" Longitude="-3.7038" Latitude="40.4168">
+    <Map>
+        <Basemap @ref="_plainIGNBasemap" 
+                 ThumbnailUrl="https://www.ign.es/wmts/ign-base?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&LAYER=IGNBase-gris&STYLE=default&FORMAT=image%2Fjpeg&TILEMATRIXSET=GoogleMapsCompatible&TILEMATRIX=6&TILEROW=24&TILECOL=31">
+            <WMTSLayer Url="https://www.ign.es/wmts/ign-base"
+                       ActiveLayer="@(new WMTSSublayer(wMTSSublayerId: "IGNBase-gris", tileMatrixSetId: "GoogleMapsCompatible"))"
+                       ServiceMode="ServiceMode.KVP"
+                       Copyright="@("<a href=\"https://www.ign.es/\" target=\"_blank\">Instituto Geográfico Nacional</a>")"/>
+        </Basemap>
+    </Map>
+    <BasemapToggleWidget Position="OverlayPosition.BottomLeft" NextBasemap="_orthoIGNBasemap" />
+</MapView>
+
+@code {
+    private Basemap? _plainIGNBasemap;
+    private Basemap? _orthoIGNBasemap;
+}

samples/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor

@@ -122,6 +122,7 @@
         new("wcslayers", "WCS Layers", "oi-project"),
         new("wfslayers", "WFS Layers", null, "wfs.svg"),
         new("wmslayers", "WMS Layers", null, "wms.svg"),
+        new("wmtslayers", "WMTS Layers", null, "wmts.svg"),
         new("bingmaps-layer", "Bing Maps Layer", null, "bing.png"),
         new("imagerylayer", "Imagery Layers", "oi-image"),
         new("imagery-tile-layer", "Imagery Tile Layers", null, "tile.png"),

samples/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/css/site.css

@@ -1160,6 +1160,10 @@ input[type=radio] {
     padding: 1rem;
 }
 
+.esri-view .esri-view-surface:focus:after {
+    z-index: 0;
+}
+
 @media (max-width: 49.9rem) {
     input[type="text"], input[type="number"] {
         width: 5.5rem;

samples/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/images/wmts.svg

@@ -68,8 +68,12 @@ public override async Task UnregisterChildComponent(MapComponent child)
         switch (child)
         {
             case Layer layer:
-                await View!.RemoveLayer(layer, layer.IsBasemapReferenceLayer != true, 
-                    layer.IsBasemapReferenceLayer == true);
+                // Basemap might be declared outside the view for BasemapToggleWidget
+                if (View is not null)
+                {
+                    await View!.RemoveLayer(layer, layer.IsBasemapReferenceLayer != true, 
+                        layer.IsBasemapReferenceLayer == true);
+                }
 
                 break;
             default:

src/dymaptic.GeoBlazor.Core/Components/Basemap.cs

@@ -488,6 +488,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// </summary>
     public async Task UpdateLayer()
     {
+        if (JsComponentReference is null || CoreJsModule is null || !MapRendered || IsDisposed)
+        {
+            // don't update until the component has been returned from JavaScript
+            return;
+        }
+        
         if (MapRendered && !_delayedUpdate)
         {
             // for components added after the map has rendered, wait one render cycle to get all children before updating
@@ -498,26 +504,6 @@ public async Task UpdateLayer()
         }
 
         _delayedUpdate = false;
-        
-        if (CoreJsModule is null)
-        {
-            return;
-        }
-        
-        try
-        {
-            JsComponentReference ??= await CoreJsModule!.InvokeAsync<IJSObjectReference?>(
-                "getJsComponent", CancellationTokenSource.Token, Id);
-        }
-        catch
-        {
-            // this is expected if the component is not yet built
-        }
-        
-        if (JsComponentReference is null || !MapRendered || IsDisposed)
-        {
-            return;
-        }
 
         // ReSharper disable once RedundantCast
         await JsComponentReference!.InvokeAsync<string?>("updateComponent", CancellationTokenSource.Token, (object)this);

src/dymaptic.GeoBlazor.Core/Components/Layers/Layer.cs

@@ -1,6 +1,5 @@
 namespace dymaptic.GeoBlazor.Core.Components.Layers;
 
-[Experimental("GeoBlazor_Untested", UrlFormat = "https://docs.geoblazor.com/pages/untested.html")]
 public partial class WMTSLayer
 {
    // Add custom code to this file to override generated code

src/dymaptic.GeoBlazor.Core/Components/Layers/WMTSLayer.cs

@@ -1882,8 +1882,15 @@ await CoreJsModule.InvokeVoidAsync("setSpatialReference",
     {
         if (!Widgets.Any(w => w is PopupWidget) && CoreJsModule is not null)
         {
-            var popupWidget = new PopupWidget();
-            AddWidget(popupWidget);
+            // add as custom logic since this is before `MapRendered` and calling `AddWidget` will exit early
+            var popupWidget = new PopupWidget
+            {
+                Parent = this,
+                View = this,
+                CoreJsModule = CoreJsModule
+            };
+            _newWidgets.Add(popupWidget);
+            StateHasChanged();
         }
 
         return Task.FromResult(Widgets.FirstOrDefault(w => w is PopupWidget) as PopupWidget);
@@ -2399,11 +2406,12 @@ await CoreJsModule.InvokeVoidAsync("buildMapView", CancellationTokenSource.Token
                 DotNetComponentReference, Longitude, Latitude, Rotation, Map, Zoom, Scale,
                 mapType, Widgets, Graphics, SpatialReference, Constraints, Extent, BackgroundColor,
                 EventRateLimitInMilliseconds, GetActiveEventHandlers(), IsServer, HighlightOptions, PopupEnabled);
+            
+            // must be after main render, but before the boolean flags are set
+            await GetPopupWidget();
 
             Rendering = false;
             MapRendered = true;
-            // must be after `Rendering = false`
-            await GetPopupWidget();
         });
     }
 #endregion

src/dymaptic.GeoBlazor.Core/Components/Views/MapView.razor.cs

@@ -8,11 +8,30 @@ namespace dymaptic.GeoBlazor.Core.Enums;
 ///     default "RESTful"
 ///     <a target="_blank" href="https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WMTSLayer.html#serviceMode">ArcGIS Maps SDK for JavaScript</a>
 /// </summary>
-[JsonConverter(typeof(EnumToKebabCaseStringConverter<ServiceMode>))]
+[JsonConverter(typeof(ServiceModeConverter))]
 public enum ServiceMode
 {
 #pragma warning disable CS1591
     RESTful,
     KVP
 #pragma warning restore CS1591
 }
+
+// custom converter, this type keeps exact casing from enum
+internal class ServiceModeConverter : JsonConverter<ServiceMode>
+{
+    public override ServiceMode Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+    {
+        return reader.GetString() switch
+        {
+            "RESTful" => ServiceMode.RESTful,
+            "KVP" => ServiceMode.KVP,
+            _ => throw new JsonException($"Unknown service mode: {reader.GetString()}")
+        };
+    }
+
+    public override void Write(Utf8JsonWriter writer, ServiceMode value, JsonSerializerOptions options)
+    {
+        writer.WriteStringValue(value.ToString());
+    }
+}