@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    // Load GeoJSON data
    string geoJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json");
    var worldMapData = JsonConvert.DeserializeObject(geoJson);
    
    // Load data source
    string dataJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/population.json");
    var populationData = JsonConvert.DeserializeObject(dataJson);
    
    // Define color mapping
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { From = 0, To = 100000000, Color = "#C6E7F0", Label = "< 100M" },
        new MapsColorMapping { From = 100000000, To = 500000000, Color = "#6AB7D6", Label = "100M - 500M" },
        new MapsColorMapping { From = 500000000, To = 1500000000, Color = "#1A7FA0", Label = "> 500M" }
    };
    
    var propertyPath = new[] { "name" };
}

<ejs-maps id="maps" height="600px">
    <e-maps-titlesettings text="World Population by Country">
        <e-maps-titlesettings-textstyle size="16px" fontWeight="500"></e-maps-titlesettings-textstyle>
    </e-maps-titlesettings>
    
    <e-maps-legendsettings visible="true" position="Bottom"></e-maps-legendsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData" 
                      dataSource="populationData"
                      shapeDataPath="Country" 
                      shapePropertyPath="propertyPath">
            <e-layersettings-shapesettings 
                fill="#E5E5E5" 
                colorValuePath="Population"
                colorMapping="colorMapping">
            </e-layersettings-shapesettings>
            
            <e-layersettings-tooltipsettings visible="true" valuePath="Country">
                <e-tooltipsettings-template>
                    <div style="padding: 8px;">
                        <strong>${Country}</strong><br/>
                        Population: ${Population}
                    </div>
                </e-tooltipsettings-template>
            </e-layersettings-tooltipsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    var worldMapData = JsonConvert.DeserializeObject(System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json"));
    
    var cities = new[]
    {
        new { Name = "New York", Latitude = 40.7128, Longitude = -74.0060, Population = "8.4M" },
        new { Name = "Tokyo", Latitude = 35.6762, Longitude = 139.6503, Population = "13.9M" },
        new { Name = "London", Latitude = 51.5074, Longitude = -0.1278, Population = "9.0M" },
        new { Name = "Sydney", Latitude = -33.8688, Longitude = 151.2093, Population = "5.3M" }
    };
}

<ejs-maps id="maps" height="600px">
    <e-maps-zoomsettings enable="true" zoomFactor="2"></e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData">
            <e-layersettings-shapesettings fill="#C3E6ED"></e-layersettings-shapesettings>
            
            <e-layersettings-markersettings>
                <e-layersettings-markersetting 
                    visible="true" 
                    dataSource="cities"
                    shape="Circle"
                    fill="#FF6347"
                    height="15"
                    width="15">
                    <e-layersettings-markersetting-tooltipsettings 
                        visible="true" 
                        valuePath="Name">
                        <e-markersetting-tooltipsettings-template>
                            <div style="padding: 8px;">
                                <strong>${Name}</strong><br/>
                                Population: ${Population}
                            </div>
                        </e-markersetting-tooltipsettings-template>
                    </e-layersettings-markersetting-tooltipsettings>
                </e-layersettings-markersetting>
            </e-layersettings-markersettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

@{
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { Value = "Low", Color = "#90EE90" },
        new MapsColorMapping { Value = "Medium", Color = "#FFD700" },
        new MapsColorMapping { Value = "High", Color = "#FF6347" }
    };
}

<e-maps-layer shapeData="@geoJsonData" 
              dataSource="@statisticsData"
              shapeDataPath="RegionName" 
              shapePropertyPath="@(new[] { "name" })">
    <e-layersettings-shapesettings 
        colorValuePath="DataLevel"
        colorMapping="colorMapping">
    </e-layersettings-shapesettings>
</e-maps-layer>

<ejs-maps id="maps">
    <e-maps-zoomsettings 
        enable="true" 
        enableSelectionZooming="true"
        toolbars='new string[] {"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset"}'>
    </e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="@mapData">
            <e-layersettings-selectionsettings 
                enable="true" 
                fill="#8B0000"
                opacity="0.5">
            </e-layersettings-selectionsettings>
            
            <e-layersettings-highlightsettings 
                enable="true" 
                fill="#FF6347">
            </e-layersettings-highlightsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

<e-maps-layers>
    <!-- Base layer: Country boundaries -->
    <e-maps-layer shapeData="@countryData" type="Layer">
        <e-layersettings-shapesettings fill="#E5E5E5"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    <!-- Sublayer: State boundaries -->
    <e-maps-layer shapeData="@stateData" type="SubLayer">
        <e-layersettings-shapesettings fill="transparent" border-width="1"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    <!-- Data layer: Markers -->
    <e-maps-layer type="Layer">
        <e-layersettings-markersettings>
            <e-layersettings-markersetting dataSource="@locations" shape="Circle"></e-layersettings-markersetting>
        </e-layersettings-markersettings>
    </e-maps-layer>
</e-maps-layers>

<ejs-maps id="maps">
    <e-maps-layers>
        <!-- Bing Maps base layer -->
        <e-maps-layer layerType="Bing" bingMapType="Aerial" key="YOUR_BING_MAPS_KEY">
        </e-maps-layer>
        
        <!-- Data overlay layer -->
        <e-maps-layer type="SubLayer" shapeData="@customData">
            <e-layersettings-shapesettings fill="#FF6347" opacity="0.5"></e-layersettings-shapesettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>