Feature/64 add kmllayer #199

seahro · 2023-07-17T22:26:22Z

Closes #64

Adds KML Layers to the layer types that can be added/used in geoblazor.

sample page could be consolidated in the future with other layer types.

TimPurdum

Nice and clean, great start!

TimPurdum · 2023-07-18T14:55:58Z

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

+
+namespace dymaptic.GeoBlazor.Core.Components.Layers;
+
+public class KMLLayer : Layer


We need XML comments on all public types and properties for the docs site.

comments are now in place after the class was refactored

TimPurdum · 2023-07-18T14:57:38Z

src/dymaptic.GeoBlazor.Core/Scripts/arcGisJsInterop.ts

+                kmlLayer = new KMLLayer({ portalItem: portalItem });
+            }
+            newLayer = kmlLayer;
+            copyValuesIfExists(layerObject, kmlLayer, 'sublayers', 'blendMode', 'maxScale', 'minScale', 'title', 'visible');


copyValuesIfExists is shorthand for everything you have below it, so you can delete lines 2038-2049. The only reason to not use copyValuesIfExists is if you need to transform the value somehow, such as using a buildJS function.

removed and understand, there are no transformations at this time, but enabling editing may require this in the future?

you can evaluate each property individually, if there is something that needs to be spelled out, just leave it out of the copyValues list and implement it fully.

TimPurdum · 2023-07-18T14:59:08Z

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

+
+    [Parameter]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Url { get; set; }


Add the [RequiredProperty] attribute to Url and PortalItem (each one should reference the other one). see FeatureLayer for the example. This should throw an error if a user forgets to set either a Url or a PortalItem with Id.

refactored the constructor, included error and added Required Property to Url.

TimPurdum · 2023-07-18T15:01:13Z

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

+    public async Task AddKMLLayer()
+    {
+        _visible = true;
+        await LoadKMlLayer();


We're defining the KML layer twice, once in markup on line 17, and separately in C# on line 37. So you have added the same layer twice. I know @AndersenBell was suggesting that we try to show off the different ways of adding things, but I think this can be confusing and imply that you have to do both, and it would be more clear if they were separate layers, possibly triggered by separate buttons, like Add Layer in Markup and Add Layer in Code.

TimPurdum

Looking good! Just a bit more to implement.

TimPurdum · 2023-07-19T20:28:19Z

src/dymaptic.GeoBlazor.Core/Scripts/arcGisJsInterop.ts

+                kmlLayer = new KMLLayer({ portalItem: portalItem });
+            }
+            newLayer = kmlLayer;
+            copyValuesIfExists(layerObject, kmlLayer, 'sublayers', 'blendMode', 'maxScale', 'minScale', 'title', 'visible');


you can evaluate each property individually, if there is something that needs to be spelled out, just leave it out of the copyValues list and implement it fully.

TimPurdum · 2023-07-19T20:34:05Z

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

+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    [RequiredProperty(nameof(PortalItem))]
+    public string? Url { get; set; }
+


OK, so your code here and in the TypeScript says you are supporting PortalItem, but you haven't implemented it.

You need

A new public PortalItem? PortalItem { get; set; }. NOT a [Parameter]

Implement protected override async Task RegisterChildComponent(MapComponent child)

Implement protected override async Task UnRegisterChildComponent

Implement internal void ValidateRequiredChildred().

This is how nested markup components get registered to work. You could create a test in Core.Test.Blazor or a separate sample that lays out a KML like this

<KmlLayer> <PortalItem Id="..." /> </KmlLayer>

refactored the main class and adjusted the markup component to use the url parameter. Also created a layer test class for the kml layer and successfully tested. Thanks for the assist @TimPurdum Additional layers can also be added in the future to this test file.

…rExists method

….razor, successful test result

TimPurdum

Hook up the new samples page to the nav menu. Nice work on this!

TimPurdum · 2023-07-21T17:40:58Z

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

@@ -0,0 +1,53 @@
+@page "/kmllayers"


Is this page added to navMenu.razor? I don't see it.

corrected that oversight

TimPurdum · 2023-07-21T17:41:40Z

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

+
+<div class="links-div">
+    <a class="btn btn-secondary" target="_blank" href="https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KMLLayer.html">ArcGIS API for JavaScript</a>
+</div>


Add a second link for the KML Layer source (see other sample pages for example).

source url is now included and reformatted the page to display better.

TimPurdum · 2023-07-21T17:43:06Z

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

+    <Map ArcGISDefaultBasemap="dark-gray-vector">
+        @if (_markup)
+        {
+            <KMLLayer Url="https://earthquake.usgs.gov/fdsnws/event/1/query?format=kml&minmagnitude=5.8" Title="Major EarthQuakes Query Result"></KMLLayer>


You have this url string as a field already, you could just set it here with <KMLLayer Url="@_kmlLayerUrl" Title="Major Earthquakes Query Result" />

TimPurdum · 2023-07-21T17:44:48Z

test/dymaptic.GeoBlazor.Core.Test.Blazor.Shared/Components/LayerTests.razor

+        CreateViewRenderedHandler(async () =>
+    {
+        await AssertJavaScript("assertKmlLayerExists");
+    });


indent formatting is a bit wonky

I think this was a copy paste oversight when bringing this file in after the new test folder was created. good to go

TimPurdum · 2023-07-21T17:45:20Z

test/dymaptic.GeoBlazor.Core.Test.Blazor.Shared/wwwroot/testRunner.js

+    if (layers !== 'kml') {
+        throw new Error(`There are no Layers in this view`);
+    }
+}


This is actually simpler than the code I used to find the widgets, so nice work!

seahro added 6 commits July 14, 2023 16:05

working kml layer razor page

0189d60

razor page almost complete

72f06c4

add class and references, working on jstinterop

7f8e3a0

working on razor display

09a3657

kml layer and popups properly displaying

c69749b

cleaned up code

f188c7c

seahro added enhancement New feature or request geoblazor labels Jul 17, 2023

seahro requested review from TimPurdum and AndersenBell July 17, 2023 22:26

seahro self-assigned this Jul 17, 2023

TimPurdum requested changes Jul 18, 2023

View reviewed changes

seahro added 5 commits July 18, 2023 15:24

refactor two button add kml layer

86ad13f

2nd btn functional working on addremove method

5c521f3

two button set working to show/remove the layer

99246d5

comments added and cleaned up extraneous items from class

94b64ee

refactored required property added error and successful test

4d5f54e

seahro requested a review from TimPurdum July 19, 2023 18:00

spelling error

b3f53a3

TimPurdum requested changes Jul 19, 2023

View reviewed changes

seahro added 8 commits July 19, 2023 15:42

working on refactor the class with registration methods

d418a97

successfully tested

27da60e

working on testrunner.js issue

aa52ef1

testrunner issue solved

d393fa2

successful load with url, unsuccessful test result

d5eb0f4

update with new test folder in develop

304a864

branch integration complete and readded layertest file and assertlaye…

e1a8abf

…rExists method

corrected js test issue and reformat the renderfragment in layertests…

b615c14

….razor, successful test result

seahro requested a review from TimPurdum July 21, 2023 16:39

corrected conditional

b062c51

TimPurdum approved these changes Jul 21, 2023

View reviewed changes

refactor after feedback

e2fcd6f

TimPurdum merged commit 147cada into develop Jul 21, 2023

TimPurdum deleted the feature/64_add_kmllayer branch July 21, 2023 18:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/64 add kmllayer #199

Feature/64 add kmllayer #199

seahro commented Jul 17, 2023

TimPurdum left a comment

TimPurdum Jul 18, 2023

seahro Jul 19, 2023

TimPurdum Jul 18, 2023

seahro Jul 19, 2023

TimPurdum Jul 19, 2023

TimPurdum Jul 18, 2023

seahro Jul 19, 2023

TimPurdum Jul 18, 2023

TimPurdum left a comment

TimPurdum Jul 19, 2023

TimPurdum Jul 19, 2023

seahro Jul 21, 2023

TimPurdum left a comment

TimPurdum Jul 21, 2023

seahro Jul 21, 2023

TimPurdum Jul 21, 2023

seahro Jul 21, 2023

TimPurdum Jul 21, 2023

seahro Jul 21, 2023

TimPurdum Jul 21, 2023

seahro Jul 21, 2023

TimPurdum Jul 21, 2023


		namespace dymaptic.GeoBlazor.Core.Components.Layers;

		public class KMLLayer : Layer

Feature/64 add kmllayer #199

Feature/64 add kmllayer #199

Conversation

seahro commented Jul 17, 2023

TimPurdum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TimPurdum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TimPurdum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment