How to Visualize GeoJSON Data in .NET Map Controls

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.

Ready to Get Started? Download ComponentOne Today!

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);

Then we need to create a VectorItem for each record.

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

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;
}

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;

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

c1Map1.Layers.Add(vl);

It’s that easy to visualize GeoJson data into the C1Map control. You can download the C1Map control as part of the C1.Win.Map (WinForms) or C1.WPF.Map library on nuget.org or download the complete ComponentOne Edition of your choice.

This sample includes the full implementation.

Ready to Get Started? Download ComponentOne Today!