Available in the Full Version

Map - Proportional Symbol Series

This sample demonstrates how to create maps and visualize locations of the earthquake magnitudes around the world using a geographic proportional symbol series.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This map uses a scatter series with data-driven symbol sizes.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

<script id="geoSymbolTooltip" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th colspan="2">${item.City}, ${item.Country}</th></tr>
            <tr>
                <td>Population:</td>
                <td>${item.Population}</td>
            </tr>
        </table>
    </script>
</head>


<body>
    
    <script type="text/javascript">
$(function () {

		function CreateEarthquakes(count) {
		count = count || 50; 
		var data = [];
			for (i = 0; i < count; i++)
			{
				var x = Math.floor((Math.random() * 360) - 180);
				var y = Math.floor((Math.random() * 180) - 90);
				var m = Math.floor((Math.random() * 10) + 1);
				var point = { "Magnitude": m, "Longitude": x, "Latitude": y };
				data.push(point);
			}
			return data;
        }
        var data = CreateEarthquakes(100);
             
        function createMap() {

            $("#map").igMap({
                width: "700px",
                height: "500px", 
                 
                series: [{
                    name: "series1",
                    type: "geographicProportionalSymbol", 
                    dataSource: data,
                    markerType: "circle", 
                    markerOutline: "black",
                    longitudeMemberPath: "Longitude",
                    latitudeMemberPath: "Latitude",
                    radiusMemberPath: "Magnitude",					
                    radiusScale: {
                        minimumValue: 10,
                        maximumValue: 40, 
                    },
                    fillMemberPath: "Magnitude",
                    fillScale: {
                         type: "value",
                         brushes: ["red", "yellow"],
                         minimumValue: 1,
                         maximumValue: 12,
						 
                     }
                }, 
                ]
            });
        };
		
		createMap();

    });
	
	</script>
	<div>
        <div id="map"></div>
        
    </div>
</body>
</html>