Let user make polygon on map.

[Daniel Lööw]

Hello i am a collaborator in a project and we are trying Maps package. We are going to implement ability for user to make own polygon on map. They will be stored in a db when finished. They are used for defining different areas.

How could we achieve this?.

User of the app should make points on map with mouse click and from every point it will make a line. When user is finished with all point we will generate a polygon. The only way i can think to achieve this is to first make markers as point then flight line between point for the line and last make a shape.

is you going to implement ability to make polygon and polylines? or do you have any other suggestions?..

I am using Google maps as map provider.

Best regards Daniel.

[Hemanathan Pandian]

Hi Daniel,

Thank you for contacting Syncfusion support.

Please find the details for your query from the below link.

Query: is you going to implement ability to make polygon and polylines?

We do not support rendering polygons using user interaction in the Maps component. However, we have considered this as a feature and added it to our features request list. This feature will be available in any of our upcoming release. Please find the feedback link below to keep track of this feature.

https://www.syncfusion.com/feedback/34494/

We can render polylines using the navigation line feature in the Maps component. Please find the code snippet for rendering the polylines in the Maps component below.

Code Snippet:

<SfMaps>

    <MapsZoomSettings Enable="false" ZoomFactor="3" />

    <MapsCenterPosition Latitude="27.0902" Longitude="-105.7129" />

    <MapsLayers>

        <MapsLayer UrlTemplate=https://a.tile.openstreetmap.org/level/tileX/tileY.png TValue="string">

            <MapsNavigationLines>

                <MapsNavigationLine Visible="true" Width="25" Angle="-0.05" Color="#00ace6"

                                    Latitude="new double[] { 23.6445, 34.0522, 47.751076 }" Longitude="new double[] { -102.832, -118.2437, -120.740135 }">

                    <MapsNavigationLineSelectionSettings Enable="true" Fill="red">

                        <MapsNavigationLineSelectionBorder Color="blue" Width="2"></MapsNavigationLineSelectionBorder>

                    </MapsNavigationLineSelectionSettings>

                </MapsNavigationLine>

            </MapsNavigationLines>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

Please find the screenshot below for your reference.

Please let us know if you need any further assistance.

Regards,

Hemanathan P

[Indumathi Ravi]

Hi Daniel,

In the latest version (v23.1.36), the  Polygon support in Maps ' feature is implemented. We have attached a sample for your reference. Please use the attached sample
and code snippet to check the mentioned feature. 

Code Snippet:

<SfMaps>

    <MapsLayers>

        <MapsLayer TValue="string" ShapeData='new {dataOptions= https://cdn.syncfusion.com/maps/map-data/world-map.json}'>

<MapsPolygons>

                <MapsPolygonHighlightSettings Enable=true Fill="yellow" Opacity="0.4">

                    <MapsPolygonHighlightBorder Color="blue" Opacity="0.6" Width="4"></MapsPolygonHighlightBorder>

                </MapsPolygonHighlightSettings>

                <MapsPolygonSelectionSettings Enable=true EnableMultiSelect=false Fill="violet" Opacity="0.8">

                    <MapsPolygonSelectionBorder Color="cyan" Opacity="1" Width="7"></MapsPolygonSelectionBorder>

                </MapsPolygonSelectionSettings>

                <MapsPolygon Points="@Points" Fill="red" BorderColor="white" BorderWidth="4" BorderOpacity="0.2" Opacity="0.9"></MapsPolygon>

                <MapsPolygon Points="@Brazil" Fill="blue"></MapsPolygon>

            </MapsPolygons>

        </MapsLayer>

    </MapsLayers>

</SfMaps>

@code {

    List<Coordinate> Points = new List<Coordinate>();

    List<Coordinate> Brazil = new List<Coordinate>();

    protected override async Task OnInitializedAsync()

    {

        await base.OnInitializedAsync();

        Points.Add(new Coordinate() { Longitude = 34.88539587371454, Latitude = 28.181421087099537 });

        //..

        //..

 

        Brazil.Add(new Coordinate() { Longitude = -1.8920678947185365, Latitude = 35.06195799239681 });

        //..

    }

 

}

You can find the sample from the below link.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsSample-463311920