Adding CSV Layer

samples/dymaptic.GeoBlazor.Core.Sample.Maui/dymaptic.GeoBlazor.Core.Sample.Maui.csproj

@@ -76,7 +76,7 @@
     </ProjectExtensions>
 
     <Target Name="Copy Source Files" BeforeTargets="DispatchToInnerBuilds">
-        <Message Importance="high" Text="Running NPM Install"/>
+        <Message Importance="high" Text="Copying examples for source display"/>
         <Exec ContinueOnError="true" Command="robocopy ..\dymaptic.GeoBlazor.Core.Sample.Shared\wwwroot\pages\ Resources\Raw\"/>
     </Target>
 

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

@@ -0,0 +1,53 @@
+@page "/csv-layer"
+@using System.Reflection.Metadata
+@using dymaptic.GeoBlazor.Core.Components
+@using dymaptic.GeoBlazor.Core.Components.Geometries
+@using dymaptic.GeoBlazor.Core.Components.Views
+@using Microsoft.AspNetCore.Components
+@using Microsoft.AspNetCore.Components.Forms
+<h3>CSV Layers</h3>
+
+<div class="links-div">
+    <a class="btn btn-secondary" target="_blank" href="https://developers.arcgis.com/javascript/latest/layers-and-data/">ArcGIS API for JavaScript</a>
+</div>
+<Label>Enter CSV Layer URL:</Label>
+<InputText @bind-Value="_csvLayerUrl"></InputText>
+<button disabled="@(!_mapRendered)" @onclick="AddLayer">Add new CSV Layer!</button>
+
+
+<MapView @ref="_view" class="map-view" OnMapRendered="OnMapRendered">
+    <Extent Xmin="-41525513" Ymin="4969181" Xmax="-36687355" Ymax="9024624">
+        <SpatialReference Wkid="102100" />
+    </Extent>
+    <Map ArcGISDefaultBasemap="arcgis-topographic">
+        <CSVLayer Url="https://developers.arcgis.com/javascript/latest//sample-code/layers-csv/live/earthquakes.csv" Title="Earth Quakes" Copyright="Esri"></CSVLayer>
+    </Map>
+</MapView>
+
+@code {
+
+    private void OnMapRendered()
+    {
+        _mapRendered = true;
+    }
+
+    private async Task AddLayer()
+    {
+        if (!string.IsNullOrEmpty(_csvLayerUrl))
+        {
+            //we create a custom CSVLayer from a CSV url
+            var csvLayer = new CSVLayer(_csvLayerUrl);
+
+            if (_mapRendered)
+            {
+                await _view.AddLayer(csvLayer);
+            }
+        }
+    }
+
+    private string? _csvLayerUrl;
+
+    private MapView? _view;
+
+    private bool _mapRendered;
+}

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

@@ -8,6 +8,7 @@
 <button disabled="@(!_mapRendered)" @onclick="() => ToggleLayer(_graphicsLayer)">Graphics Layer</button>
 <button disabled="@(!_mapRendered)" @onclick="() => ToggleLayer(_geoJsonLayer)">GeoJSON Layer</button>
 <button disabled="@(!_mapRendered)" @onclick="() => ToggleLayer(_geoRssLayer)">GeoRSS Layer</button>
+<button disabled="@(!_mapRendered)" @onclick="() => ToggleLayer(_csvLayer)">CSV Layer</button>
 <button disabled="@(!_mapRendered)" @onclick="() => ToggleLayer(_osmLayer)">OpenStreetMaps Layer</button>
 <h2>Markup Layers</h2>
 <button disabled="@(!_mapRendered)" @onclick="() => _showGraphicsMarkupLayer = !_showGraphicsMarkupLayer">Graphics Layer</button>
@@ -170,6 +171,8 @@
         new("https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson");
     private readonly GeoRSSLayer _geoRssLayer =
         new("https://disasterscharter.org/charter-portlets/cpi-mvc/activations/feed/rss/");
+    private readonly CSVLayer _csvLayer =
+        new("https://developers.arcgis.com/javascript/latest//sample-code/layers-csv/live/earthquakes.csv");
     private readonly OpenStreetMapLayer _osmLayer = new();
 
     private bool _mapRendered;

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

@@ -81,6 +81,7 @@
         new("vector-layer", "Vector Layer", "oi-arrow-right"),
         new("layer-lists", "Layer Lists", "oi-list"),
         new("basemap-layer-lists", "Basemap Layer Lists", "oi-spreadsheet"),
+        new("csv-layer", "CSV Layers", "oi-grid-four-up"),
         new("georss-layer", "GeoRSS Layer", "oi-rss"),
         new("osm-layer", "OpenStreetMaps Layer", "oi-envelope-open"),
         new("web-map", "Web Map", "oi-browser"),

samples/dymaptic.GeoBlazor.Core.Sample.Shared/razorCopy.ps1

@@ -1,2 +1,7 @@
-Get-ChildItem -Path .\Pages -Filter "*.razor" -File |
+$path = ".\wwwroot\pages\"
+If(!(test-path -PathType container $path))
+{
+      New-Item -ItemType Directory -Path $path
+}
+Get-ChildItem -Path .\Pages -Filter "*.razor" -File |
         ForEach-Object { Copy-Item -Path $_.FullName -Destination ".\wwwroot\pages\$( $_.BaseName ).html" }

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

@@ -0,0 +1,78 @@
+using Microsoft.AspNetCore.Components;
+using System.Text.Json.Serialization;
+
+
+namespace dymaptic.GeoBlazor.Core.Components.Layers;
+
+/// <summary>
+///     The CSVLayer is a point layer based on a CSV file (.csv, .txt). CSV is a plain-text file format used to
+///     represent tabular data, including geographic point features (latitude, longitude). Typically the latitude
+///     coordinate is the Y value, and the longitude coordinate is the X value. The X, Y coordinates must be stored
+///     in SpatialReference.WGS84 in csv feed.
+///     <a target="_blank" href="https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CSVLayer.html">
+///         ArcGIS
+///         JS API
+///     </a>
+/// </summary>
+public class CSVLayer : Layer
+{
+    /// <summary>
+    ///     Parameterless constructor for use as a razor component
+    /// </summary>
+    public CSVLayer()
+    {
+    }
+
+    /// <summary>
+    ///     Constructor for use in code
+    /// </summary>
+    /// <param name="url">
+    ///     The url for the CSV source data.
+    /// </param>
+    /// <param name="title">
+    ///     The title of the layer used to identify it in places such as the Legend and LayerList widgets.
+    /// </param>
+    /// <param name="copyright">
+    ///     A copyright string to identify ownership of the data.
+    /// </param>
+    /// <param name="opacity">
+    ///     The opacity of the layer.
+    /// </param>
+    /// <param name="visible">
+    ///     Indicates if the layer is visible in the View. When false, the layer may still be added to a Map instance that is
+    ///     referenced in a view, but its features will not be visible in the view.
+    /// </param>
+    /// <param name="listMode">
+    ///     Indicates how the layer should display in the LayerList widget. The possible values are listed below.
+    /// </param>
+    public CSVLayer(string url, string? title = null, string? copyright = null,
+        double? opacity = null, bool? visible = null, ListMode? listMode = null)
+    {
+#pragma warning disable BL0005
+        Url = url;
+        Title = title;
+        Opacity = opacity;
+        Visible = visible;
+        ListMode = listMode;
+        Copyright = copyright;
+#pragma warning restore BL0005
+    }
+
+    /// <inheritdoc />
+    [JsonPropertyName("type")]
+    public override string LayerType => "csv";
+
+    /// <summary>
+    ///     The url for the GeoRSS source data.
+    /// </summary>
+    [Parameter]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Url { get; set; }
+
+    /// <summary>
+    ///     A copyright string to identify ownership of the data.
+    /// </summary>
+    [Parameter]
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? Copyright { get; set; }
+}

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

@@ -57,6 +57,7 @@ public GeoJSONLayer(string? url = null, string? copyright = null, string? title
         Opacity = opacity;
         Visible = visible;
         ListMode = listMode;
+        Copyright = copyright;
     }
 
     /// <inheritdoc />

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

@@ -272,6 +272,8 @@ internal class LayerConverter : JsonConverter<Layer>
                     return JsonSerializer.Deserialize<OpenStreetMapLayer>(ref cloneReader, newOptions);
                 case "elevation":
                     return JsonSerializer.Deserialize<ElevationLayer>(ref cloneReader, newOptions);
+                case "csv":
+                    return JsonSerializer.Deserialize<CSVLayer>(ref cloneReader, newOptions);
             }
         }
 

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

@@ -32,6 +32,7 @@ import Layer from "@arcgis/core/layers/Layer";
 import VectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
 import TileLayer from "@arcgis/core/layers/TileLayer";
 import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+import CSVLayer from "@arcgis/core/layers/CSVLayer";
 import GeoRSSLayer from "@arcgis/core/layers/GeoRSSLayer";
 import PopupTemplate from "@arcgis/core/PopupTemplate";
 import Query from "@arcgis/core/rest/support/Query";
@@ -1966,7 +1967,7 @@ export async function createLayer(layerObject: any, wrap?: boolean | null, viewI
                 });
             } else if (hasValue(layerObject.portalItem)) {
                 let portalItem = buildJsPortalItem(layerObject.portalItem);
-                openStreetMapLayer = new OpenStreetMapLayer({portalItem: portalItem});
+                openStreetMapLayer = new OpenStreetMapLayer({ portalItem: portalItem });
             } else {
                 openStreetMapLayer = new OpenStreetMapLayer();
             }
@@ -1997,6 +1998,22 @@ export async function createLayer(layerObject: any, wrap?: boolean | null, viewI
                 }
             }
 
+            break;
+        case 'csv':
+            newLayer = new CSVLayer({
+                url: layerObject.url,
+                copyright: layerObject.copyright
+            });
+            let csvLayer = newLayer as CSVLayer;
+            if (hasValue(layerObject.renderer)) {
+                csvLayer.renderer = layerObject.renderer;
+            }
+            if (hasValue(layerObject.spatialReference)) {
+                csvLayer.spatialReference = new SpatialReference({
+                    wkid: layerObject.spatialReference.wkid
+                });
+            }
+
             break;
         default:
             return null;