Search results

Layers

The Maps component is maintained through layers, and it can accommodate one or more layers.

Sublayer

Sublayer in the maps component allows to load multiple shape files in a single map view. For example, add a sublayer over a main shape layer to view geographic features such as rivers, valleys, and cities in a map of a country.

In this example, the United States map shape is used as shape data by utilizing the USA.json file, and the texas.json and california.json files are used as sub layers in the United States map.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/usa.json"}'>
            <MapsShapeSettings Fill="#E5E5E5">
                <MapsShapeBorder Color="black" Width="0.1"></MapsShapeBorder>
            </MapsShapeSettings>
        </MapsLayer>
        <MapsLayer ShapeData='new {dataOptions = "https://cdn.syncfusion.com/maps/map-data/texas.json"}' Type="Syncfusion.EJ2.Blazor.Maps.Type.SubLayer">
            <MapsShapeSettings Fill="rgba(141, 206, 255, 0.6)">
                <MapsShapeBorder Color="#1a9cff" Width="0.25"></MapsShapeBorder>
            </MapsShapeSettings>
        </MapsLayer>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/california.json"}' Type="Syncfusion.EJ2.Blazor.Maps.Type.SubLayer">
            <MapsShapeSettings Fill="rgba(141, 206, 255, 0.6)">
                <MapsShapeBorder Color="#1a9cff" Width="0.25"></MapsShapeBorder>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

Maps with sublayer

Sublayer is a type of shape file layer. You can add all the elements such as markers, bubbles, color mapping, and legends to sublayer.

Displaying layer in the view

In Maps, you can load multiple shape files. Using the BaseLayerIndex property, you can select a layer to display on user interface.

In this example, we have loaded two layers with the World map and the United States map shape data and selected a layer using the BaseLayerIndex property to show that layer on the web page.

@using Syncfusion.EJ2.Blazor.Maps

@*  To switch the layer, set `BaseLayerIndex`  *@
<EjsMaps BaseLayerIndex="1">
    <MapsLayers>
        <MapsLayer ShapeData='new { dataOptions = "https://cdn.syncfusion.com/maps/map-data/world-map.json" }'>
        </MapsLayer>
        <MapsLayer ShapeData='new { dataOptions = "https://cdn.syncfusion.com/maps/map-data/usa.json" }'>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

Maps with multiple layer

If you set the BaseLayerIndex value to 0, the world map will be loaded.

This concept is used in the Maps drill-down feature, so the corresponding shape will be loaded when clicking a shape of the maps.

See also