Available in the Full Version

Map - Collection Binding

This sample demonstrates how to create maps and visualize a geographic symbol series with binding to a server side collection of geographic locations.

This sample is designed for a larger screen size.

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

This sample demonstrates how to create maps and visualize a geographic symbol series with binding to a server side collection of geographic locations.

Code View

Copy to Clipboard 
@using Infragistics.Web.Mvc;
@model IQueryable<IgniteUI.SamplesBrowser.Controllers.WorldCity>

<!DOCTYPE html>

<html>
<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>
      <style>
        #tooltipTable
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }
        #tooltipTable td, #tooltipTable th
        {
            font-size: 9px;
            border: 1px solid #269bc9;
            padding: 3px 7px 2px 7px;
        }
        #tooltipTable th
        {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #269bc9;
            color: #ffffff;
        }
    </style>
    <script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th class="tooltipHeading" colspan="2">${item.Name}, ${item.Country}</th></tr>
            <tr>
                <td>Latitude:</td>
                <td>${item.Latitude}</td>
            </tr>
            <tr>
                <td>Longitude:</td>
                <td>${item.Longitude}</td>
            </tr>
        </table>
    </script>
   
</head>
<body>

    <div>
        @(Html.Infragistics().Map<IgniteUI.SamplesBrowser.Controllers.WorldCity>(Model)
      
                .ID("map")
                .Width("700px")
                .Height("500px")
                .OverviewPlusDetailPaneVisibility(Visibility.Visible)
                .OverviewPlusDetailPaneBackgroundImageUri(Url.Content("~/images/samples/maps/World.png"))
                .BackgroundContent(bgr => bgr.OpenStreetMaps())
                .PanModifier(ModifierKeys.Control)
                .Series(series => {
                    series.GeographicSymbol("worldCities")
                        .LatitudeMemberPath(item => item.Latitude)
                        .LongitudeMemberPath(item => item.Longitude)
                        .MarkerType(MarkerType.Automatic)
                        .MarkerCollisionAvoidance(CollisionAvoidanceType.Fade)
                        .MarkerBrush("#1B559D")
                        .MarkerOutline("black")
                        .ShowTooltip(true).TooltipTemplate("tooltipTemplate");
                })
                .WindowRect(0.1, 0.1, 0.7, 0.7)
                .DataBind()
                .Render()
        )
    </div>
    <script type="text/javascript">
        $(function () {
            $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='http://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
        });
    </script>
</body>
</html>