1. Home
  2. Forum
  3. Blazor
  4. Cannot get ShapeData to display GeoJson

Cannot get ShapeData to display GeoJson

Hi,

I am having difficulty getting the following GeoJson to display in the Maps control - I have tested this GeoJson on https://geojson.io/ and it works fine.  

{
"type": "FeatureCollection",
"features": [{
"type" : "Feature",
"geometry" : {
"type" : "LineString",
"coordinates" : [
[ -1.5105690142, 52.4028794429 ],
[ -1.5106220131, 52.4028784424 ],
[ -1.5198919839, 52.3954229466 ]
]
},
"properties" : {
"Office" : "Test"
}
}
]
}

I am using the following mark-up. The markup successfully display a map in the browser and I can interact with it. I have tested the markup with the africa.json file downloaded from your CDN and that renders a layer which covers Africa.

<SfMaps>    
    <MapsLayers>
        <MapsLayer LayerType="ShapeLayerType.OSM"></MapsLayer>
        <MapsLayer ShapeData='new {dataOptions = "geosimple.json"}' Type="Syncfusion.Blazor.Maps.Type.SubLayer"></MapsLayer>
    </MapsLayers>
    <MapsCenterPosition Latitude="52.4028794429" Longitude="-1.5105690142"></MapsCenterPosition>
    <MapsZoomSettings Enable="true" Toolbars='new string[]{"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset" }' ZoomFactor="16" MaxZoom="19" ZoomOnClick="true">
    </MapsZoomSettings>    
</SfMaps>

Please can you help?

Thanks,

Mike.


11 Replies
SB Swetha Babu Syncfusion Team September 7, 2020 12:53 PM UTC

Hi,

Thank you for contacting Syncfusion support.

We do not have support to render line string geometric type in the Maps component. We have already added this feature to our features request list. Please find the feedback link below for your reference. 
  
  
However we can add the lines to the Maps component using the "MapsNavigationLines" property in "MapsLayer" class in Maps component. We have created a simple Blazor application to demonstrate the same and it can be downloaded from the following link.

https://www.syncfusion.com/downloads/support/forum/157574/ze/Mapswithlines-2019497789

In the above sample, we have rendered the OSM map and drawn the navigation lines between the two markers by using the latitude and longitude values in the maps component. 
  
Query 2: I am using the following mark-up. The markup successfully display a map in the browser and I can interact with it. I have tested the markup with the africa.json file downloaded from your CDN and that renders a layer which covers Africa. 
  
The “africa.json” file contains the shape data of the outline for the Africa continent. So the Africa shape is rendered on your map as sub-layer. 

Please let us know if you need any further assistance.

Regards,
Swetha Babu 


MF Mike Freeman September 7, 2020 02:09 PM UTC

Hi Swetha,

Thanks for the reply although it would have saved me a lot of time if the documentation for the Blazor Map control said that you do not support the LineString type - please can you tell me which types it does and does not support? Also I suggest that the control should throw an error if it is passed an unsupported type rather than silently ignoring it.

The 'MapsNavigationLines' might be a possible solution if you can show me how it is possible to use MapsNavigationLines in a situation where a variable number of lines need to be drawn at runtime, i.e. I am getting the shape data from a database and do not know in advance how many lines there will be in a shape until I need to display it.

Is it possible to supply GeoJson data direct to the Map control instead of having to supply a file reference?

Thanks,

Mike.

SB Swetha Babu Syncfusion Team September 8, 2020 03:48 PM UTC

Hi Mike,

Thank you for your update.

Please find the details for your queries from the below table. 
  
Query 
Details 
Can you tell me which types it does and does not support? 
The Maps component supports the polygon, multi-polygon, and point geometric types in the GeoJSON file for geometric map rendering. 
Also I suggest that the control should throw an error if it is passed an unsupported type rather than silently ignoring it. 
At present, we do not handle any error for the unsupported geometry types. However, we will check consider your suggestion as improvement for the maps component. 
The 'MapsNavigationLines' might be a possible solution if you can show me how it is possible to use MapsNavigationLines in a situation where a variable number of lines need to be drawn at runtime, i.e. I am getting the shape data from a database and do not know in advance how many lines there will be in a shape until I need to display it. 
At present, we need to know the exact number of lines to be drawn as navigation lines in Maps component using MapsNavigationLines class. We have already analyzed to add the navigation lines dynamically. To achieve this, we need to implement declarative syntax for the MapsNavigationLines class. With this feature, we can provide the navigation lines in a @for loop and render the same. We have logged a feature request for the same. We will include this implementation in any of our future releases. 
Please find the below feedback link to keep track of the implementation. 
  
 
Is it possible to supply GeoJson data direct to the Map control instead of having to supply a file reference? 
As we mentioned earlier, we do not support line string geometric type in the Maps component. Line string type is used to render the navigation lines from the GeoJSON file. 
  
Please let us know if you need any further assistance. 
  
Regards, 


MF Mike Freeman September 8, 2020 04:03 PM UTC

Hi,

My last question 'Is it possible to supply GeoJson data direct to the Map control instead of having to supply a file reference? ' was not specific to the unsupported LineString type - it was a more general question for the supported types. The use case for this is: if I have GeoJson data in my database then I don't want to have to persist it to a file system somewhere first in order to display it in the Maps control, so instead is it possible to pass a Json object containing the GeoJson data direct to the Maps control?

Thanks,

Mike.

IR Indumathi Ravi Syncfusion Team September 9, 2020 06:59 PM UTC

Hi Mike, 
  
Sorry for the inconvenience. 
  
We can render the GeoJSON data from the database in the Maps component using ShapeData property in the MapsLayer class. We are currently creating the sample for the same. We will update you with further details on September 11, 2020 
  
Regards, 
Indumathi R 


IR Indumathi Ravi Syncfusion Team September 11, 2020 09:22 PM UTC

Hi Mike, 

 
 
 
Thank you for your patience. 
  
We have created a sample to load the maps GeoJSON data from the database in the Maps component. Please find the sample from the following link. 
  
  
We have to create a service class and access the database connection in following class "DataServiceAccess" class. The code snippet is as follows, 
  
private string connectionString = "Yours DataBase Connection Name"; 
  
        public async Task<string> GetWorldMap() 
        { 
            SqlConnection connection = new SqlConnection(connectionString); 
            var query = "Select Data from [Table] where Id='WorldMap'"; 
            SqlCommand command = new SqlCommand(query); 
            command.Connection = connection; 
            connection.Open(); 
            SqlDataReader read = command.ExecuteReader(); 
            string dataValue = ""; 
            if (read.Read()) 
            { 
                dataValue = dataValue + read[0]; 
            } 
            return await Task.FromResult(JsonConvert.DeserializeObject(dataValue).ToString()); 
        } 
  
Then, we need to register the created service in startup file. 
  
 services.AddSingleton<DataServiceAccess>(); 
  
Now, we can access the GeoJSON data in the razor page and it can be set to the ShapeData property of the Maps component. Please find the code snippet for setting the GeoJSON data in the ShapeData property. 
  
protected override async Task OnInitializedAsync() 
    { 
        WorldMap = await DataService.GetWorldMap(); 
    } 
  
  
In the above sample, we have achieved your scenario using SQL query. We have created a database with the fields “Id” and “Data”. “Id” represents the unique id for the shape file of the maps. “Data” represents the JSON data for the maps. By using the above query we can get the JSON data. Then, you can bind the GeoJSON data to the ShapeData property of the Maps component. 
  
Note: Please add the connection string of your database in the above code. 
  
Please let us know that the above sample meets your requirement. Please let us know if you need any further assistance. 
  
Regards, 
 
 Indumathi R


MK Mairis Kalmikovs October 1, 2021 10:49 AM UTC

Hello!

I have question about the same topic.
I have valid Geojson string.
I want to use it directly on the maps, but i can't get it working.

simple example geojson:

{

  "type": "FeatureCollection",

  "features": [

    {

      "type": "Feature",

      "geometry": {

        "type": "MultiPolygon",

        "coordinates": [

          [

            [

              [ 0.0, 100.0 ],

              [ 100.0, 100.0 ],

              [ 100.0, 0.0 ],

              [ 0.0, 0.0 ],

              [ 0.0, 100.0 ]

            ]

          ]

        ]

      },

      "properties": { "kadno": "88880004444" }

    }

  ]

}


Code i am trying to use GeoJson string property contains previously mentioned geojson:

 <SfMaps> 

    <MapsLayers>

        <MapsLayer ShapeData="@GeoJson" TValue="string"></MapsLayer>

    </MapsLayers>

 </SfMaps>


If i save this file and load it using dataOptions it works, but i want to pass this geojson to component on the fly.

public MapDataSettings MapShapeData = new MapDataSettings

        {

            async = true,

            type = "GET",

           dataOptions = "js/test.json"

        };

And also these ShapeData properties i saw in youtube video, but could'nt find any information about it in api documentation which is frustrating.
https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html



IR Indumathi Ravi Syncfusion Team October 4, 2021 02:14 PM UTC

Hi Mairis, 
  
We do not support setting the “ShapeData” property as string to change it on the fly. However, we can achieve it by creating an object that contains the file name of the GeoJSON data and storing it in a variable. This variable can be changed with another object to change the map in the Maps component. Please find the code snippet below. 
  
Code Snippet: 
<SfMaps> 
    <MapsLayers> 
        @* To load shape data *@ 
        <MapsLayer ShapeData='@data'  TValue="string"> 
        </MapsLayer> 
    </MapsLayers> 
</SfMaps> 
  
<button @onclick="MapChange">Click Me</button> 
  
@code 
{ 
    public object data = new {dataOptions= "africa.json"}; 
    private void MapChange() 
    { 
        data = new {dataOptions= "simplegeo.json"}; 
   } 
} 
  
We have created a sample to demonstrate the same and it can be found from the below link. 
  
In the above sample, we change the shape layer in the map using the provided button. 
  
We use the properties in the shape data to render data labels and tooltip for the layer. Please find the documentation for the data labels and tooltip for more details. 
  
  
We can bind the shape data with the data source using the fields in the properties of the shape data. The field name in the data source must be set in the “ShapeDataPath” property and the field name in the properties of the shape data in the “ShapePropertyPath” property. This will bind the data source and shape data. This step will be used to render the data labels, bubbles and tooltips in the Maps component using the data from data source. 
  
Please let us know that the above solution meets your requirement. If not, please provide us more details about your requirement. It will be helpful for us to analyze further and assist you better. 
  
Regards, 
Indumathi R 


MK Mairis Kalmikovs replied to Indumathi Ravi October 6, 2021 11:52 AM UTC

Thank you for information!

Situation is, i have in database Land Units with Geometry saved using Postgis.

I wanted to show in Land Unit details view how this Land Units geometry looks using SfMaps .

I have this LandUnit class with Polygon property with type MultiPolygon (From NetTopologysuite nuget)

I can convert this Polygon to GeoJson but this would mean i would have to create .json file for each Land units details view.

As i understand SfMaps is more about showing Summaries on maps.

I think for this above mentioned functionality i can use Leafletjs.



SA Sabari Anand Senthamarai Kannan Syncfusion Team October 7, 2021 10:14 PM UTC

Hi Mairis, 

Thank you for the update. 

We are still analyzing to load the map dynamically in the Maps component. We will update you with further details on October 8, 2021. 

Regards, 
Sabari Anand

SA Sabari Anand Senthamarai Kannan Syncfusion Team October 8, 2021 05:10 PM UTC

Hi Mairis, 

Using the "ShapeData" property, we can dynamically load the GeoJSON into the Maps component as an object. 

In this example, we read the data from a JSON file and passed it as an object. However, in your case, you can retrieve the GeoJSON data from the database, convert it to a string, and pass it to the "ShapeData" component in the Maps component. Please see the code snippet below for reference. 

Code snippet: 
@if (MapShapeData != null) 
{ 
    <SfMaps> 
        <MapsLayers> 
            <MapsLayer TValue="string" ShapeData="MapShapeData"></MapsLayer> 
        </MapsLayers> 
    </SfMaps> 
} 

@code { 
    public object MapShapeData { get; set; } 
    protected override async Task OnInitializedAsync() 
    { 
        string fileText = System.IO.File.ReadAllText("wwwroot/world-map.json"); 
        //TODO: In your case, convert the result from Postgris into string and assign it to "MapShapeData". 
        MapShapeData = Newtonsoft.Json.JsonConvert.DeserializeObject(fileText); 
    } 
} 

Please give this solution a try and let us know if it meets your requirements. 

Regards, 
Sabari Anand.

Loader.
Up arrow icon