Polylines in Radzen

[jordan825]

Hi, I have a quick question I'm hoping someone could ask. Wha is the best way to go about using polylines to make polygons on maps using radzen blazor? I've been trying to figure this out for a couple days now. Any help or advice is appreciated, thanks!

[korchev]

Hi @jordan825,

I am afraid such a feature isn't supported by the Radzen.Blazor components.

[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