1. Home
  2. Forum
  3. Blazor
  4. Map component question

Map component question

For this map component in SyncFusion, is it possible to show the view just for Canada and just for the U.S.? Is it possible to zoom into the U.S. and hover over the state to get more details in hover text, and zoom back out to the U.S. view afterwards? Is it possible to do that for Canadian provinces too? And is it possible to focus on North America (minus Greenland) instead of the whole world?

Thank you.


3 Replies
IR Indumathi Ravi Syncfusion Team February 10, 2022 10:56 AM UTC

Hi Signe, 
To achieve your requirement, add GeoJSON files containing North America, Canada and USA shapes as layers in the Maps component separately. Initially, the North America shape is rendered in the component. When a state is selected on the Maps, the "ShapeSelected" event is triggered. We can change the layer of the Maps to render Canada and USA maps by changing the "BaseLayerIndex" property with the event argument of "ShapeSelected" event. The "MapsLayerTooltipSettings" can be used to display state details such as state name in a tooltip. Please find the code snippet for the same below. 
Code Snippet: 
<SfMaps ID="Maps" @ref="MapsRef" BaseLayerIndex="@LayerIndex"> 
     <MapsEvents ShapeSelected="ShapeSelection" /> 
            <MapsLayers> 
                <MapsLayer ShapeData='new {dataOptions= "north-america.json"}'> 
<MapsLayerTooltipSettings Visible="true" ValuePath="name"></MapsLayerTooltipSettings> 
                </MapsLayer> 
                <MapsLayer ShapeData='new {dataOptions ="usa.json"}' TValue="string"> 
                    <MapsLayerTooltipSettings Visible="true" ValuePath="name" /> 
                </MapsLayer> 
                <MapsLayer ShapeData='new {dataOptions ="canada.json"}' TValue="string"> 
                    <MapsLayerTooltipSettings Visible="true" ValuePath="name" /> 
                </MapsLayer> 
            </MapsLayers> 
        </SfMaps> 
  
@code{ 
private void ShapeSelection(ShapeSelectedEventArgs args) 
    { 
        Dictionary<string, string> DrillData = args.Data; 
        if (MapsRef.BaseLayerIndex == 0) 
        { 
            if (DrillData["name"] == "United States") 
            { 
                LayerIndex = 1; 
                this.StateHasChanged(); 
            } 
            else if (DrillData["name"] == "Canada") 
            { 
                LayerIndex = 2; 
                this.StateHasChanged(); 
            } 
            //.. 
           //.. 
        } 
    } 
} 
We have created a sample and the screen capture video to demonstrate the same and it can be downloaded from the below link. 
Sample Application: 
Screen Capture Video: 
Please let us know if you need any further assistance. 
Regards, 
Indumathi R. 


SB Signe Bergman February 15, 2022 10:52 PM UTC

Hi Indumathi,


Thank you for the reply. It looks like it is possible to hover over U.S. states and Canadian provinces to get more information. Is it possible to display custom information in the tooltip, beyond state details?

Also, is it possible to view the U.S. and Canada, without Greenland?


Thank you,

Signe


IR Indumathi Ravi Syncfusion Team February 16, 2022 12:16 PM UTC

Hi Signe, 

Please find the details for your queries in the below table. 

Queries 
Details 
 Is it possible to display custom information in the tooltip, beyond state details? 
We can achieve your requirement of displaying the custom information in the toolitp using the "TooltipTemplate" property in the "MapsLayerTooltipSettings". The value of the field name from the data source can be displayed in the tooltip. The "shapeDataPath" and "shapePropertyPath" properties are used to connect the data source with the shape data of the Maps. The "shapeDataPath" property takes the field name from the data source as value whereas “shapePropertyPath” property takes the field name from the shape data of the map as value. When the values of both these properties match, the value can be displayed in the tooltip. Please find the code snippet for the same below. 
 
<SfMaps> 
             //.. 
            <MapsLayers> 
                <MapsLayer ShapePropertyPath="@ShapePropertyPath" 
                       ShapeDataPath="Name" DataSource="@MapLayerDataSource" TValue="MapDataSource"> 
                        //.. 
                        //.. 
                        <MapsLayerTooltipSettings> 
                            <TooltipTemplate> 
                             @{ 
                                var Data = context as MapDataSource; 
                                    <div style="background:white;border:2px solid;width:152px"> 
                                        <table style="width:148px"> 
                                            <tr> 
                                                <td style="text-align: center;">Country</td> 
                                                <td style="text-align: center;">@Data.Name</td> 
                                            </tr> 
                                           //.. 
                                          //.. 
                                        </table> 
                                    </div> 
                             } 
                        </TooltipTemplate> 
                        </MapsLayerTooltipSettings> 
                </MapsLayer> 
            </MapsLayers> 
  </SfMaps> 

@code{ 
     public string[] ShapePropertyPath = { "name" }; 
} 

We have created a sample and screen shot to demonstrate the same and it can be downloaded from the below link. 
 
 
Screenshot – 
 
 
 
Please let us know that the above sample meets your requirement. 

Also, is it possible to view the U.S. and Canada, without Greenland? 
We gave the sample with the United States and Canada without Greenland in the prior response. Maps control is intended to display the JSON files with GeoJSON data. We do not handle the creation and updating of the GeoJSON data of the maps. However, we have found a GeoJSON map of U.S. and Canada without Greenland while searching online only.  

NOTE: If you need to modify the GeoJSON map, please check with any online map vendors for the shapes. 
 

Please let us know if you need any further assistance. 

Regards, 
Indumathi R. 


Loader.
Up arrow icon