Multilayer Support

Multilayer support allows users to load multiple shapefiles in a single container, enabling maps to display more detail.

Loading Multiple Shapefiles in a Single Container

This feature enables the map to load multiple types of shapefiles in a single container. Basically, shape files contain point shapes in a single container.

Situations arise in which any combination of available shapefiles needs to be loaded in a single container. In such situations this feature enables the map to load multiple shape layers in a single container.

Adding Multiple Layers in the Map

ShapeFileLayer is the core layer for the map. Multiple layers can be added in the ShapeFileLayer itself. They have to be added in SubShapeFileLayers within the ShapeFileLayer.

SubShapeFileLayers

SubShapeFileLayers is the collection of SubShapeFileLayer. SubShapeFileLayer is also a type of shapefile layer. The following code adds multiple layers in the ShapeFileLayer.

html

<syncfusion:SfMap>

     <syncfusion:SfMap.Layers>

         <syncfusion:ShapeFileLayer ShapeIDPath="NAME"  ShapeIDTableField="Continent"                                                         

                                    EnableSelection="True”                                                                                                                   

                                    Uri=" MapApp.ShapeFiles.continent.shp">

         <syncfusion:ShapeFileLayer.ItemsTemplate>

               <DataTemplate>

                    <Border Visibility="{Binding Data.ItemsVisibility}" Background="Transparent">

                        <StackPanel Orientation="Horizontal">

                             <TextBlock FontFamily="Segoe UI" Foreground="#FF333333" FontSize="12"                                                                                                                                                                                                                                                                                                                                

                                         Text="{Binding Data.Weather}"/>

                             <TextBlock FontFamily="Segoe UI" Foreground="#FF333333" FontSize="12"         

                                        Text="°C"/>

                         </StackPanel>

                    </Border>

               </DataTemplate>

            </syncfusion:ShapeFileLayer.ItemsTemplate>

            <syncfusion:ShapeFileLayer.ShapeSettings>

                <syncfusion:ShapeSetting ShapeStroke="#C1C1C1" ShapeStrokeThickness="0.5" 

                        ShapeValuePath="Weather" ShapeFill="#E5E5E5"/>

                </syncfusion:ShapeFileLayer.ShapeSettings>

            <syncfusion:ShapeFileLayer.SubShapeFileLayers>

               <syncfusion:SubShapeFileLayer ShapeIDPath="NAME" ItemsSource="{Binding AfricaList}" 

                                              ShapeIDTableField="Country"  

                                              Uri=” MapApp.ShapeFiles.Africa.shp">



                    <syncfusion:SubShapeFileLayer.ItemsTemplate>

                        <DataTemplate>

                            <Border  Background="Transparent">

                                <StackPanel Orientation="Horizontal">

                                     <TextBlock FontFamily="Segoe UI" Foreground="#FF333333"   

                                                FontSize="12"  Text="{Binding Data.Weather}"/>

                                     <TextBlock FontFamily="Segoe UI" Foreground="#FF333333" 

                                                FontSize="12"  Text="°C"/>

                                </StackPanel>

                              </Border>

                         </DataTemplate>

                    </syncfusion:SubShapeFileLayer.ItemsTemplate>

                         <syncfusion:SubShapeFileLayer.ShapeSettings>

                             <syncfusion:ShapeSetting ShapeStroke="#2F8CEA"

                                                      ShapeValuePath="Weather" ShapeFill="#8DCEFF">

                             </syncfusion:ShapeSetting>

                         </syncfusion:SubShapeFileLayer.ShapeSettings>

                   </syncfusion:SubShapeFileLayer>



                   <syncfusion:SubShapeFileLayer ShapeIDPath="NAME" ShapeIDTableField="ADMIN_NAME"

                                               ItemsSource="{Binding OceaniaList}" 

                                               Uri=" MapApp.ShapeFiles.australia.shp">

                       <syncfusion:SubShapeFileLayer.ShapeSettings>

                           <syncfusion:ShapeSetting ShapeStroke="#2F8CEA" ShapeValuePath="Weather" 

                                                                             ShapeFill="#8DCEFF"/>

                           </syncfusion:SubShapeFileLayer.ShapeSettings>

                           <syncfusion:SubShapeFileLayer.ItemsTemplate>

                                    <DataTemplate>

                                        <Border Background="Transparent">

                                            <StackPanel Orientation="Horizontal">

                                                <TextBlock FontFamily="Segoe UI"

                                                           Foreground="#FF333333" FontSize="12"  

                                                           Text="{Binding Data.Weather}"/>

                                                <TextBlock FontFamily="Segoe UI" 

                                                            Foreground="#FF333333" FontSize="12"

                                                            Text="°C"/>

                                            </StackPanel>

                                        </Border>

                                    </DataTemplate>

                                </syncfusion:SubShapeFileLayer.ItemsTemplate>

                            </syncfusion:SubShapeFileLayer>

                        </syncfusion:ShapeFileLayer.SubShapeFileLayers>

                    </syncfusion:ShapeFileLayer>



            </syncfusion:SfMap.Layers>

        </syncfusion:SfMap>

Multilayer Map

Map Points

Points are one of the record type in shape file layer. Points are used to specify the specific point in the map. For example used to specify the capital of countries. Points in the shape file given as latitude and longitude coordinates in the shapes file. Those points should be converted as map points.

Customizing the MapPoint

The default appearance of the MapPoint can be customized by using the MapPointTemplate property. The MapPointTemplate property is available in the ShapeFileLayer.

About MapPointTemplate Property

MapPointTemplate is a DataTemplate type, used to customize or override the default template of MapPoints.

Code Sample:

html

<syncfusion:SfMap>

     <syncfusion:SfMap.Layers>

         <syncfusion:ShapeFileLayer ShapeIDPath="NAME"  ShapeIDTableField="Continent"                                                         

                                    EnableSelection="True”                                                                                                                   

                                    Uri=" MapApp.ShapeFiles.continent.shp">

                 <syncfusion:ShapeFileLayer.MapPointTemplate>

                     <DataTemplate>

                            <Ellipse Height="10" Width="10” Stroke="White"      

                                                 Fill="#8AC63C"/>

                      </DataTemplate>

                 </syncfusion:ShapeFileLayer.MapPointTemplate>

         </syncfusion:ShapeFileLayer>



      </syncfusion:SfMap.Layers>

</syncfusion:SfMap>

MapPointPopup

MapPointPopup is a popup, shown when the point is moved on MapPoint. It shows additional information from the object bounded with the MapPoint. The object will be get from dbf file.

MapPointPopupTemplate

MapPointPopupTemplate is a DataTemplate, which is used to expose the template for the MapPoint.

Code sample

html

<syncfusion:SfMap >

     <syncfusion:SfMap.Layers>

         <syncfusion:ShapeFileLayer Background="White" EnableSelection="True" 

                                    Uri="MapApp.ShapeFiles.states.shp">

              <syncfusion:ShapeFileLayer.SubShapeFileLayers>

                 <syncfusion:SubShapeFileLayer   EnableSelection="True" 

                                    Uri="MapApp.ShapeFiles.landslide.shp">

                  <syncfusion:SubShapeFileLayer.MapPointPopupTemplate>

                        <DataTemplate>

                             <Border Background="#FF252525" Opacity="0.9"  Height="110"

                                     BorderThickness="0.5">

                               <StackPanel Margin="10,5,20,0">

                                   <StackPanel>

                                       <TextBlock Text="Landslide Event in USA"  

                                         Margin="10,5,0,0" Foreground="White" 

                                         FontSize="20"  FontFamily="Segoe UI" />

                                    </StackPanel>

                            <Grid Margin="10,5,10,0">

                               <Rectangle Stroke="#FF505050" StrokeDashArray="6 2" 

                                          Height="2"  VerticalAlignment="Center" />

                            </Grid>

                            <Grid Margin="10,5,0,0" >

                               <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="0.41*"/>

                                    <ColumnDefinition Width="0.1*"/>

                                    <ColumnDefinition Width="0.49*"/>

                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>

                                     <RowDefinition/>

                                     <RowDefinition/>

                                </Grid.RowDefinitions>

                             <TextBlock Foreground="#FFACACAC" Grid.Column="0" 

                                         Grid.Row="0" FontFamily="Segoe UI" 

                                         FontWeight="Normal" FontSize="18" 

                                         Text="Location" />

                             <TextBlock Foreground="#FFACACAC" Grid.Column="1" 

                                         Grid.Row="0" FontFamily="Segoe UI" 

                                         FontWeight="Normal" FontSize="18" Text=" : " />

                             <TextBlock Foreground="#FFACACAC" Margin="5,0,0,0" 

                                        Grid.Column="2" Grid.Row="0" FontFamily="Segoe 

                                        UI" FontWeight="Normal" FontSize="18" 

                                        Text="{Binding [LOCALITY]}" />

                             <TextBlock Foreground="#FFACACAC" Grid.Column="0" 

                                        Grid.Row="1" FontFamily="Segoe UI" 

                                        FontWeight="Normal" FontSize="18" Text="Year" />

                             <TextBlock Foreground="#FFACACAC" Grid.Column="1" 

                                        Grid.Row="1" FontFamily="Segoe UI" 

                                        FontWeight="Normal" FontSize="18" Text=" : " />

                             <TextBlock Foreground="#FFACACAC" Margin="5,0,0,0" 

                                        Grid.Column="2" Grid.Row="1" FontFamily="Segoe 

                                        UI" FontWeight="Normal" FontSize="18" 

                                        Text="{Binding [YEAR]}" />

                          </Grid>

                       </StackPanel>

                    </Border>

                  </DataTemplate>

              </syncfusion:SubShapeFileLayer.MapPointPopupTemplate>

              <syncfusion:SubShapeFileLayer.MapPointTemplate>

                 <DataTemplate>

                      <Ellipse Height="10" Width="10" Margin="-10,-10,0,0" Stroke="White" 

                                                                         Fill="#8AC63C"/>

                 </DataTemplate>

              </syncfusion:SubShapeFileLayer.MapPointTemplate>

           </syncfusion:SubShapeFileLayer>

       </syncfusion:ShapeFileLayer.SubShapeFileLayers>

     </syncfusion:ShapeFileLayer>

   </syncfusion:SfMap.Layers>

</syncfusion:SfMap>

Screenshot: