Polylines in Radzen

[alistair]

I managed to get this going with the following result

A New Zealand Lakes sample is on Github
You need to create a database and run this script which has the sample data in it.
The sample data is from LINZ and i used the following shape file importer Shape2SqlServer

I use a MS SQL geography field to store the data and a View to convert it to a Google Maps Polygon

SQL Table

SQL View

create view [dbo].[vw_Places]
as
SELECT   REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(Geometry.ToString(), 'POLYGON (', ''), '(', '[{lng:'), '))', '}]'), ', ', '},{lng:'), ' ', ' ,lat:') AS Area, PlaceName
FROM         Places

Here are the steps

1. Add an Invoke data source method to the page to get the data from the view

1. Add a map to a page and get it working API Key etc

2. Add an Attribute Name @ref Value map to Google Maps Control

3. Open the project in your Code Editor

4. add the following JavaScript file "maps.js" to wwwroot/js

var map;

var polygons = ;

function initMap(UniqueID) {
if(map==null)
map = Radzen[UniqueID].instance;
}

function drawPolygon( data, UniqueID,content) {
initMap(UniqueID);
var bounds = new google.maps.LatLngBounds();
const obj = eval(data);

const shape = new google.maps.Polygon({
    paths: obj,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,

});

for (i = 0; i < obj.length; i++) {
    bounds.extend(obj[i]);
}


attachPolygonInfoWindow(shape,content);

polygons.push(shape);
shape.setMap(map);

northWest = new google.maps.LatLng(
    bounds.getNorthEast().lat(),
    bounds.getNorthEast().lng()
);

//Can add Marker

// new google.maps.Marker({
// position: northWest,
// map: map,

//});

}

function attachPolygonInfoWindow(polygon, html) {
polygon.infoWindow = new google.maps.InfoWindow({
content: html,
});
google.maps.event.addListener(polygon, 'mouseover', function (e) {
var latLng = e.latLng;
this.setOptions({ fillOpacity: 0.1 });
polygon.infoWindow.setPosition(latLng);
polygon.infoWindow.open(map);
});
google.maps.event.addListener(polygon, 'mouseout', function () {
this.setOptions({ fillOpacity: 0.35 });
polygon.infoWindow.close();
});
}

function clearMap(UniqueID) {
initMap(UniqueID);
if (polygons.length > 0) {
for (var i = 0; i < polygons.length; i++) {
polygons[i].setMap(null);
}
}
}

5. In Radzen go to settings and add ~/js/maps.js to Include custom Javascript files

6. Go to yourpagename.razor.cs and add the following code

public RadzenGoogleMap map { get; set; }

    // Waits for map to render
    protected override void OnAfterRender(bool firstRender)
    {
        if (map != null && firstRender)
        {
            var t = Task.Run(async delegate
            {
                await Task.Delay(1000);
                await DisplayLakesAsync();
            });
        }
    }
    private async Task DisplayLakesAsync()
    {
      
        //Clear the map first if you have realtime data

         //await JSRuntime.InvokeVoidAsync("clearMap", map.UniqueID);

    
        //Loop polygons and draw on map

        foreach (var lake in LakeResult)
        {

            // Popup text
            string content = $"<strong>Lake: </strong>{lake.PlaceName}<p><p><strong>";
            
            //Render polygons on Map using javascript

            await JSRuntime.InvokeVoidAsync("drawPolygon", lake.Area,  map.UniqueID, content);

        }


    }

7. Run it