How to Visualize GeoJSON Data in .NET Map Controls

Chelsea Devereaux - Jun 20 '23 - - Dev Community

GeoJSON is an open-source format for encoding geographical features into JSON format. Based on JavaScript Object Notation (JSON), GeoJSON is a format for encoding a variety of geographic data structures. The features include points (addresses and locations), line strings (streets, highways, and boundaries), polygons (countries, provinces, tracts of land), and multi-part collections of these types.

ComponentOne Maps for WinForms, WPF, and ASP.NET MVC has in-built support to visualize GeoJSON format data. In this blog, we will see how to visualize GeoJSON-formatted airport data in a Windows Forms application using C1Map.

.NET Map Control

Visualizing GeoJSON Data with C1Map

C1Map control supports visualizing GeoJSON format data, which can be bound to GeoJSON using layers. The steps to visualize GeoJSON data are as follows:

  1. Load the GeoJSON file containing our data to be visualized
  2. Create a VectorItem for each GeoGeometryRecord
  3. Add all items to a VectorLayer and add it to the C1Map control

First, we need to read the GeoJSON file using GeoJsonReader.Read(stream) method. It returns a list of GeoGeometryRecord.

    var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("MapGeoJson_FW.Resources.airports.geojson");

    //fetch list of GeoGeometryRecord
    var records = C1.FlexMap.GeoJsonReader.Read(stream);
Enter fullscreen mode Exit fullscreen mode

Then we need to create a VectorItem for each record.

    //Create VectorItem for each GeoGeometryRecord
    var items = records.Select(record => CreateVector(record));
Enter fullscreen mode Exit fullscreen mode

For this, we defined a CreateVector method that correlates each GeoGeometryType into a specific C1Map vector item type. This is where you can customize how you want different data to be visualized. For example, we create a Marker for each Point or MultiPoint. The Marker has a shape, size, and label.

    // Create VectorItem
    private static VectorItem CreateVector(C1.FlexMap.GeoGeometryRecord record)
    {
        VectorItem vector = null;

        switch (record.Geometry?.Type)
        {
            case C1.FlexMap.GeoGeometryType.Point:
            case C1.FlexMap.GeoGeometryType.MultiPoint:
                VectorPlacemark p = new VectorPlacemark();
                p.Marker.Shape = C1.FlexMap.MarkerShape.Circle;
                p.Marker.Size = new SizeF(6, 6);
                p.Marker.LabelPosition = C1.FlexMap.LabelPosition.Top;
                p.Tag = p.Marker.Caption = record.Data["name_en"]?.ToString();
                vector = p;
                break;
            case C1.FlexMap.GeoGeometryType.Polygon:
            case C1.FlexMap.GeoGeometryType.MultiPolygon:
                vector = new C1.Win.Map.VectorPolygon();
                break;
            case C1.FlexMap.GeoGeometryType.LineString:
            case C1.FlexMap.GeoGeometryType.MultiLineString:
                vector = new VectorPolyline();
                break;
            default:
                return null;
        }
        vector.Geometry = record.Geometry;
        return vector;
    }
Enter fullscreen mode Exit fullscreen mode

Next, we need to cycle through the items and add each to a VectorLayer. Here we can set some application-wide styling for the items, such as text color and border color.

    //Add all VectorItems in a VectorLayer
    var vl = new VectorLayer();
    foreach (var item in items)
    {
        if (item != null)
        {
            item.Style.BackColor = Color.LightGray;
            item.Style.Stroke.Color = Color.Gray;
            vl.Items.Add(item);
        }
    }
    vl.LabelVisibility = C1.FlexMap.LabelVisibility.AutoHide;
    vl.LabelStyle.ForeColor = Color.Yellow;
Enter fullscreen mode Exit fullscreen mode

Finally, we can add the Vector Layer to the C1Map control.

    c1Map1.Layers.Add(vl);
Enter fullscreen mode Exit fullscreen mode

It’s that easy to visualize GeoJson data into the C1Map control.

This sample includes the full implementation.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .