製品版のみの機能
マップ - コレクションのバインド
このサンプルでは、マップを作成し、サーバー側の地理位置のコレクションへのバインドを使用して地理記号シリーズを可視化する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、マップを作成し、サーバー側の地理位置のコレクションへのバインドを使用して地理記号シリーズを可視化する方法を紹介します。
コード ビュー
クリップボードへコピー
@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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>緯度:</td>
<td>${item.Latitude}</td>
</tr>
<tr>
<td>経度:</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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class MapController : Controller
{
//
// GET: /FunnelChart/
[ActionName("binding-to-collection")]
public ActionResult BindCollection()
{
// Get the content of the world-cities.js file and extract the array data only
// excluding the opening variable declaration
var jss = new JavaScriptSerializer();
var jsFileName = Server.MapPath("~/data-files/world-cities.js");
var jsFileContent = System.IO.File.ReadAllText(jsFileName);
var openingBracePos = jsFileContent.IndexOf('[');
var closingBracePos = jsFileContent.IndexOf(']');
var jsonContent = jsFileContent.Substring(openingBracePos, closingBracePos - openingBracePos + 1);
// De-serialize WorldCities data from a JavaScript array into List<WorldCity>
var wordlCities = jss.Deserialize<List<WorldCity>>(jsonContent);
return View("binding-to-collection", wordlCities.AsQueryable());
}
}
public class WorldCity
{
public string Name { get; set; }
public string Country { get; set; }
public double Latitude { get; set; }
public double Longitude { get; set; }
}
}