Easily Explore Complex Geographical Structures with Layers and Sublayers in Blazor Maps
Tags: blazor, maps, webdev, productivity
Published: 2023-11-30 02:31:24

---
title: Easily Explore Complex Geographical Structures with Layers and Sublayers in Blazor Maps
published: true
date: 2023-11-29 10:34:21 UTC
tags: blazor, maps, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/layers-sub-layers-blazor-maps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71t3l6stu2yt10af60aj.png
---
## Blazor Maps: An Overview

The Syncfusion [Blazor Maps library](https://www.syncfusion.com/blazor-components/blazor-map "Blazor Maps Component") is a powerful tool that allows developers to create interactive maps easily. It provides rich features, including markers, data labels, tooltips, and more. However, one of its most distinguishing features is its layered structure.

This blog will delve into the concept of layers and sublayers within the Blazor Maps library. We will explore how these layers create complex and interactive maps. We will also discuss how to manipulate them to customize your maps.

## Layers and Sublayers in Blazor Maps

The [Syncfusion Blazor Maps library](https://blazor.syncfusion.com/documentation/maps/getting-started "Getting started with Blazor Maps") is a versatile UI component that can display various maps. It can render:

- Any country, continent, or world map using geometric shapes.
- Custom-designed geometry shapes include building floor plans, land layout designs, and ticket and booking systems.
- Tile images from online maps provide tile services such as [Bing Maps](https://en.wikipedia.org/wiki/Bing_Maps "Bing Maps: Wikipedia page"), [OpenStreetMap](https://en.wikipedia.org/wiki/OpenStreetMap "OpenStreetMap: Wikipedia page"), and [MapBox](https://en.wikipedia.org/wiki/Mapbox "MapBox: Wikipedia page"). 

Our Syncfusion Blazor Maps library accurately places these geometric shapes and tile images in the main layer. You can draw a sublayer on top of the main layer using geometric or polygon shapes with appropriate coordinates and measurements.

Let’s explore how to achieve these with code examples.

### Showing geometric shapes as a sublayer

Let’s define the geometric shapes using a JSON-based open standard format that encodes geographical data structures. This format is commonly used to represent geographical features such as points, lines, and polygons and their associated attributes. We recognize it as the GeoJSON file with the **_\*.json_** extension.

The following is what the format of the GeoJSON would look like.

```csharp
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Germany"
      },
      "geometry": {
        "coordinates": [
          [
            [
              8.64898681640625,
              54.909777539554824
            ],
            [
              8.5638427734375,
              54.90030293114211
            ],
            [
              8.59130859375,
              54.8086000512159
            ]
			//..
                     //..
		      //..
            [
              8.64898681640625,
              54.909777539554824
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}
```

Let’s explore how to overlay the geometric shapes as a sublayer on top of a main layer in Case 1 and how to overlay them as a sublayer on top of tile images obtained from online map providers in Case 2.

#### Case 1

This section will use the USA map as the main layer, rendered using a GeoJSON file (geometric shape). We will then visualize the county map of the state of California, rendered using a separate GeoJSON file (geometric shape), as a sublayer on top of the main layer.

Refer to the following code example.

```xml
<SfMaps Height="700px" Background="transparent">
 <MapsAreaSettings Background="transparent" />
 <MapsCenterPosition Latitude="37.768253245440846" Longitude="-108.65245386980939">
 </MapsCenterPosition>
 <MapsZoomSettings Enable="true" ZoomFactor="2" />
 <MapsLayers>
  <MapsLayer ShapeData='new {dataOptions = "https://cdn.syncfusion.com/maps/map-data/usa.json"}' TValue="string">
   <MapsShapeSettings Fill="#E5E5E5">
    <MapsShapeBorder Color="#000000" Width="0.2" />
   </MapsShapeSettings>
   <MapsDataLabelSettings Visible="true" LabelPath="iso_3166_2" SmartLabelMode="SmartLabelMode.Hide">
    <MapsLayerDataLabelTextStyle FontFamily="Segoe UI" Color="#212529"> </MapsLayerDataLabelTextStyle>
   </MapsDataLabelSettings>
  </MapsLayer>
  <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/california.json"}' Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsShapeSettings Fill="#8ccdff">
    <MapsShapeBorder Color="#1a9cff" Width="0.25" />
   </MapsShapeSettings>
  </MapsLayer>
 </MapsLayers>
</SfMaps>

```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Visualizing-California-counties-on-the-USA-map-by-rendering-geometric-shapes-as-a-sublayer-on-top-of-the-main-layer.png" alt="Visualizing California counties on the USA map by rendering geometric shapes as a sublayer on top of the main layer" style="width:100%">

  <figcaption>Visualizing California counties on the USA map by rendering geometric shapes as a sublayer on top of the main layer</figcaption>

</figure>

#### Case 2

In this section, we will use OpenStreetMap to render the USA map as a tile image. We’ll zoom in by default to see the USA map. Following that, we will visualize the California counties in it, which can be rendered using a separate GeoJSON file (geometry shape) as a sublayer on top of the tile image. Please note that the vice versa is not possible here.

Refer to the following code example.

```xml
<SfMaps Height="750px" Background="transparent">
 <MapsAreaSettings Background="transparent" />
 <MapsCenterPosition Latitude="37.435921257933" Longitude="-110.59530280178286"></MapsCenterPosition>
 <MapsZoomSettings Enable="true" ZoomFactor="6" />
 <MapsLayers>
  <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"></MapsLayer>
  <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/california.json"}' Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsShapeSettings Fill="#8ccdff">
    <MapsShapeBorder Color="#1a9cff" Width="0.25" />
   </MapsShapeSettings>
  </MapsLayer>
 </MapsLayers>
</SfMaps>
```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Visualizing-California-counties-in-the-USA-map-by-rendering-geometric-shapes-as-a-sublayer-on-top-of-the-tile-image.png" alt="Visualizing California counties in the USA map by rendering geometric shapes as a sublayer on top of the tile image" style="width:100%">

  <figcaption>Visualizing California counties in the USA map by rendering geometric shapes as a sublayer on top of the tile image</figcaption>

</figure>

### Showing polygon shapes as sublayer

In geographical data representation, a polygon shape is an area enclosed by a closed path, defined by a set of coordinates, typically expressed in latitudes and longitudes.

The format of a polygon shape is quite straightforward. It is represented as a series of coordinates that define the polygon’s vertices. When you connect these points in the order they appear and link the final point back to the first, it will form a closed polygon shape.

This simple yet powerful representation enables the depiction of complex geographical features, from a city’s boundaries to a lake’s contours. Let’s explore the structure of a polygon shape with a code example.

```csharp
"polygons": [
    {
        "points": [
            { "longitude": 8.64898681640625, "latitude": 54.909777539554824 },
            { "longitude": 8.5638427734375, "latitude": 54.90030293114211 },
            { "longitude": 8.59130859375, "latitude": 54.8086000512159 },
            //...
            //...
            { "longitude": 8.64898681640625, "latitude": 54.909777539554824 }
        ],
        "fill": "#1A7951",
        "opacity": 0.7,
        "borderWidth": 7,
        "borderColor": "#1A7951",
        "borderOpacity": 1
    },
    //..
    //..
]
```

Let’s explore the process of overlaying a polygon shape as a sublayer on different base layers. We will examine two cases: one where we use a geometric shape as the base layer and another where we use tile images from online map providers.

#### Case 1

In this case, we’ll use the Europe map as our primary layer, which we render from a GeoJSON file (geometric shape). We aim to highlight the top three GDP contributors in the European Union: Germany, France, and Italy. We will represent these countries using polygon shapes and overlay them as sublayers on the main map.

Refer to the following code example.

```xml
<SfMaps Height="700px">
 <MapsZoomSettings Enable="true" ZoomFactor="3" />
 <MapsCenterPosition Latitude="47.24515117294152" Longitude="7.371116586176754"></MapsCenterPosition>
 <MapsLayers>
  <MapsLayer ShapeData='new {dataOptions= "Europe.json"}' TValue="string"></MapsLayer>
  <MapsLayer ShapeData='new {dataOptions = "GermanyShape.json"}'
             Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsPolygons>
    <MapsPolygon Points="GermanyPoints" Fill="#D1A121" Opacity="0.7" BorderColor="#D1A121" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
   </MapsPolygons>
   <MapsDataLabelSettings Visible="true" LabelPath="name">
    <MapsLayerDataLabelTextStyle Color="Black" Size="22px" FontStyle="Sans-serif" FontWeight="normal">
    </MapsLayerDataLabelTextStyle>
   </MapsDataLabelSettings>
  </MapsLayer>
  <MapsLayer ShapeData='new {dataOptions = "FranceShape.json"}'
             Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsPolygons>
    <MapsPolygon Points="FrancePoints" Fill="#B11F29" Opacity="0.7" BorderColor="#B11F29" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
   </MapsPolygons>
   <MapsDataLabelSettings Visible="true" LabelPath="name">
    <MapsLayerDataLabelTextStyle Color="Black" Size="22px" FontStyle="Sans-serif" FontWeight="normal">
    </MapsLayerDataLabelTextStyle>
   </MapsDataLabelSettings>
  </MapsLayer>
  <MapsLayer ShapeData='new {dataOptions = "ItalyShape.json"}'
             Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsPolygons>
    <MapsPolygon Points="ItalyPointsOne" Fill="#1A7951" Opacity="0.7" BorderColor="#1A7951" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
    <MapsPolygon Points="ItalyPointsTwo" Fill="#1A7951" Opacity="0.7" BorderColor="#1A7951" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
    <MapsPolygon Points="ItalyPointsThree" Fill="#1A7951" Opacity="0.7" BorderColor="#1A7951" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
   </MapsPolygons>
   <MapsDataLabelSettings Visible="true" LabelPath="name">
    <MapsLayerDataLabelTextStyle Color="Black" Size="22px" FontStyle="Sans-serif" FontWeight="normal">
    </MapsLayerDataLabelTextStyle>
   </MapsDataLabelSettings>
  </MapsLayer>
 </MapsLayers>
</SfMaps>

@code {
    List<Coordinate> GermanyPoints = new List<Coordinate>();
    List<Coordinate> FrancePoints = new List<Coordinate>();
    List<Coordinate> ItalyPointsOne = new List<Coordinate>();
    List<Coordinate> ItalyPointsTwo = new List<Coordinate>();
    List<Coordinate> ItalyPointsThree = new List<Coordinate>();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        ItalyPointsOne.Add(new Coordinate() { Longitude = 12.376485, Latitude = 46.767559 });
        //..
        //..
        ItalyPointsTwo.Add(new Coordinate() { Longitude = 15.520376, Latitude = 38.231155 });
        //..
        //..
        ItalyPointsThree.Add(new Coordinate() { Longitude = 9.210012, Latitude = 41.209991 });
        //..
        //..
        FrancePoints.Add(new Coordinate() { Longitude = 2.5350952148436363, Latitude = 51.10007257240614 });
        //..
        //..
        GermanyPoints.Add(new Coordinate() { Longitude = 8.64898681640625, Latitude = 54.909777539554824 });
        //..
        //..
    }
}
```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Visualizing-top-3-GDP-contributors-in-the-European-Union-by-rendering-polygon-shapes-as-a-sublayer-on-the-main-layer.png" alt="Visualizing top 3 GDP contributors in the European Union by rendering polygon shapes as a sublayer on the main layer" style="width:100%">

  <figcaption>Visualizing top 3 GDP contributors in the European Union by rendering polygon shapes as a sublayer on the main layer</figcaption>

</figure>

#### Case 2

In this section, we will use OpenStreetMap to render the European Union map as the tile image. We’ll zoom in by default to see the Europe map. Following that, we will visualize the top three GDP contributors in the European Union, which will be rendered using the polygon shape definition as a sublayer on top of the tile image. Please note that the vice versa is not possible here.

Refer to the following code example.

```xml
<SfMaps Height="750px">
 <MapsZoomSettings Enable="true" ZoomFactor="5" />
 <MapsCenterPosition Latitude="47.24515117294152" Longitude="7.371116586176754"></MapsCenterPosition>
 <MapsLayers>
  <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string"></MapsLayer>
  <MapsLayer ShapeData='new {dataOptions = "GermanyShape.json"}'
             Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsPolygons>
    <MapsPolygon Points="GermanyPoints" Fill="#D1A121" Opacity="0.7" BorderColor="#D1A121" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
    </MapsPolygons>
     <MapsDataLabelSettings Visible="true" LabelPath="name">
      <MapsLayerDataLabelTextStyle Color="Black" Size="22px" FontStyle="Sans-serif" FontWeight="normal">
      </MapsLayerDataLabelTextStyle>
     </MapsDataLabelSettings>
    </MapsLayer>
    <MapsLayer ShapeData='new {dataOptions = "FranceShape.json"}'
               Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsPolygons>
    <MapsPolygon Points="FrancePoints" Fill="#B11F29" Opacity="0.7" BorderColor="#B11F29" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
   </MapsPolygons>
   <MapsDataLabelSettings Visible="true" LabelPath="name">
    <MapsLayerDataLabelTextStyle Color="Black" Size="22px" FontStyle="Sans-serif" FontWeight="normal">
    </MapsLayerDataLabelTextStyle>
   </MapsDataLabelSettings>
  </MapsLayer>
  <MapsLayer ShapeData='new {dataOptions = "ItalyShape.json"}'
             Type="Syncfusion.Blazor.Maps.Type.SubLayer" TValue="string">
   <MapsPolygons>
    <MapsPolygon Points="ItalyPointsOne" Fill="#1A7951" Opacity="0.7" BorderColor="#1A7951" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
    <MapsPolygon Points="ItalyPointsTwo" Fill="#1A7951" Opacity="0.7" BorderColor="#1A7951" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
    <MapsPolygon Points="ItalyPointsThree" Fill="#1A7951" Opacity="0.7" BorderColor="#1A7951" BorderWidth="7" BorderOpacity="1"></MapsPolygon>
   </MapsPolygons>
   <MapsDataLabelSettings Visible="true" LabelPath="name">
    <MapsLayerDataLabelTextStyle Color="Black" Size="22px" FontStyle="Sans-serif" FontWeight="normal">
    </MapsLayerDataLabelTextStyle>
   </MapsDataLabelSettings>
  </MapsLayer>
 </MapsLayers>
</SfMaps>

@code {
    List<Coordinate> GermanyPoints = new List<Coordinate>();
    List<Coordinate> FrancePoints = new List<Coordinate>();
    List<Coordinate> ItalyPointsOne = new List<Coordinate>();
    List<Coordinate> ItalyPointsTwo = new List<Coordinate>();
    List<Coordinate> ItalyPointsThree = new List<Coordinate>();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        ItalyPointsOne.Add(new Coordinate() { Longitude = 12.376485, Latitude = 46.767559 });
        //..
        //..
        ItalyPointsTwo.Add(new Coordinate() { Longitude = 15.520376, Latitude = 38.231155 });
        //..
        //..
        ItalyPointsThree.Add(new Coordinate() { Longitude = 9.210012, Latitude = 41.209991 });      
        //..
        //..
        FrancePoints.Add(new Coordinate() { Longitude = 2.5350952148436363, Latitude = 51.10007257240614 });
        //..
        //..
        GermanyPoints.Add(new Coordinate() { Longitude = 8.64898681640625, Latitude = 54.909777539554824 });
        //..
        //..
    }
}
```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Visualizing-countries-with-the-top-3-GDPs-in-the-European-Union-by-rendering-polygon-shapes-as-a-sublayer-on-the-tile-image.png" alt="Visualizing countries with the top 3 GDPs in the European Union by rendering polygon shapes as a sublayer on the tile image" style="width:100%">

  <figcaption>Visualizing countries with the top 3 GDPs in the European Union by rendering polygon shapes as a sublayer on the tile image</figcaption>

</figure>

## References

For more information, you can check out the following:

- [Layers in Blazor Maps documentation](https://blazor.syncfusion.com/documentation/maps/layers "Layers in Blazor Maps Component")
- [Multi-layers in Blazor Maps online demo](https://blazor.syncfusion.com/demos/maps/multi-layers "Multi-Layers in Blazor Maps Component web demos")
- [Creating layers and sub-layers in Blazor Maps GitHub demo](https://github.com/SyncfusionExamples/how-to-create-layers-and-sublayers-in-blazor-maps "Create layers and Sub-layers in Blazor Maps GitHub demo")

## Conclusion

Thank you for joining us on this journey! We’ve explored the layer and sublayer features in our Syncfusion [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map "Blazor Maps library") component. We encourage you to experiment with these features and discover the useful visualizations you can create with our Blazor Maps!

For our existing customers, the latest version of our Blazor components is ready for download on the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page. If you’re new to Syncfusion, we offer a 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of Essential Studio products") to explore the range of features available.

If you have questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We’re always happy to help you!

## Related blogs

- [Syncfusion Blazor Components Are Compatible with .NET 8.0](https://www.syncfusion.com/blogs/post/blazor-ui-support-dotnet-8.aspx "Blog: Syncfusion Blazor Components Are Compatible with .NET 8.0")
- [Transforming Blazor Autocomplete: Unleashing Google-Like Search Suggestions](https://www.syncfusion.com/blogs/post/google-like-suggestions-blazor.aspx "Blog: Transforming Blazor Autocomplete: Unleashing Google-Like Search Suggestions")
- [Boost Blazor Dropdown List Performance with Virtualization](https://www.syncfusion.com/blogs/post/virtualization-blazor-dropdown-list.aspx "Blog: Boost Blazor Dropdown List Performance with Virtualization")
- [Unveiling New Date-Only and Time-Only Features in Blazor Pickers](https://www.syncfusion.com/blogs/post/date-time-only-blazor-pickers.aspx "Blog: Unveiling New Date-Only and Time-Only Features in Blazor Pickers")