How to Visualize GeoJSON Data in .NET Map Controls
Tags: webdev, devops, dotnet, tutorial
Published: 2023-06-20 15:34:23

---
canonical_url: https://developer.mescius.com/blogs/how-to-visualize-geojson-data-in-net-map-controls
description: Learn how to visualize GeoJSON data in .NET map controls. See more from ComponentOne today.
---
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](https://files.grapecity.com/gc-website-media/x2nl0vs0/01-mapgeojson.png?width=500&height=293.84531590413945)

## 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](https://developer.mescius.com/componentone/docs/win/online-maps/C1.Win.Map.4.5.2~C1.Win.Map.VectorItem.html) for each [GeoGeometryRecord](https://developer.mescius.com/componentone/docs/win/online-maps/C1.Win.Map.4.5.2~C1.FlexMap.GeoGeometryRecord.html)
3.  Add all items to a [VectorLayer](https://developer.mescius.com/componentone/docs/win/online-maps/C1.Win.Map.4.5.2~C1.Win.Map.VectorLayer.html) 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](https://developer.mescius.com/componentone/docs/win/online-maps/C1.Win.Map.4.5.2~C1.FlexMap.GeoGeometryRecord.html).

```
    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](https://developer.mescius.com/componentone/docs/win/online-maps/C1.Win.Map.4.5.2~C1.Win.Map.VectorItem.html) 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](https://developer.mescius.com/componentone/docs/win/online-maps/C1.Win.Map.4.5.2~C1.Win.Map.VectorLayer.html). 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.

This [sample](/{localLink:umb://media/ee442516bca7472bbc6c80b993d46456} "MapGeoJson_C1_5/16/23") includes the full implementation.