製品版のみの機能
マップ - マーカー テンプレート
このサンプルでは、マップ コントロールでカスタム マーカー テンプレートを作成する方法を紹介します。マーカー テンプレートは、JavaScript で対応する地理シリーズに関数を割り当てて実装されます。画面でマーカーを描画するときに呼び出されます。マーカーの描画関数は、マーカーのコンテンツを描画するために HTML5 キャンバス API を使用します。Infragistics の海外拠点を表示します。オフィスは、タイプに基づくカスタム マーカーによって色が設定されます。マーカーの隣に名前を表示します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、マップ コントロールでカスタム マーカー テンプレートを作成する方法を紹介します。マーカー テンプレートは、JavaScript で対応する地理シリーズに関数を割り当てて実装されます。画面でマーカーを描画するときに呼び出されます。マーカーの描画関数は、マーカーのコンテンツを描画するために HTML5 キャンバス API を使用します。Infragistics の海外拠点を表示します。オフィスは、タイプに基づくカスタム マーカーによって色が設定されます。マーカーの隣に名前を表示します。
コード ビュー
クリップボードへコピー
<!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/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>
#customTable2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customTable2 td, #customTable2 th
{
font-size: 9px;
border: 1px solid #2d87cb;
padding: 3px 7px 2px 7px;
}
#customTable2 th
{
font-weight: bold;
font-size: 11px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #2d87cb;
color: #ffffff;
}
</style>
<script id="customTooltip" type="text/x-jquery-tmpl">
<table id="customTable2" >
<tr><th colspan="2">${item.Name}</th></tr>
<tr>
<td>オフィス タイプ:</td>
<td>${item.Type}</td>
</tr>
</table>
</script>
</head>
<body>
<script src="/data-files/ig-offices.js"></script>
<script type="text/javascript">
$(function () {
$("#map").igMap({
width: "700px",
height: "500px",
overviewPlusDetailPaneVisibility: "visible",
overviewPlusDetailPaneBackgroundImageUri: "/images/samples/maps/world.png",
windowRect: { left: 0.4, top: 0.2, height: 0.6, width: 0.6 },
backgroundContent: {
type: "openStreet"
},
series: [
{
type: "geographicSymbol",
name: "igOffices",
dataSource: igOffices,
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
showTooltip: true,
tooltipTemplate: "customTooltip",
markerCollisionAvoidance: "fade",
// Defines marker template rendering function
markerTemplate: {
measure: function (measureInfo) {
measureInfo.width = 10;
measureInfo.height = 10;
},
render: function (renderInfo) {
createMarker(renderInfo);
}
}
}
]
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
});
function createMarker(renderInfo) {
var ctx = renderInfo.context;
var x = renderInfo.xPosition;
var y = renderInfo.yPosition;
var size = 10;
var heightHalf = size / 2.0;
var widthHalf = size / 2.0;
if (renderInfo.isHitTestRender) {
// This is called for tooltip hit test only
// Rough marker rectangle size calculation
ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
ctx.fillRect(x - widthHalf, y - heightHalf, size, size);
} else {
var data = renderInfo.data;
var name = data.item()["Name"];
var type = data.item()["ID"];
// Draw text
ctx.textBaseline = "top";
ctx.font = '8pt Verdana';
ctx.fillStyle = "black";
ctx.textBaseline = "middle";
wrapText(ctx, name, x + 3, y + 6, 80, 12);
// Draw marker
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI, false);
if (type == "Marketing")
ctx.fillStyle = "#2372D1";
else if (type == "Support")
ctx.fillStyle = "#4d4949";
else if (type == "Development Lab")
ctx.fillStyle = "#d13521";
else
ctx.fillStyle = "#36a815";
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
}
}
// Plots a rectangle with rounded corners with a semi-transparent frame
function plotTextBackground(context, left, top, width, height) {
var cornerRadius = 3;
context.beginPath();
// Upper side and upper right corner
context.moveTo(left + cornerRadius, top);
context.lineTo(left + width - cornerRadius, top);
context.arcTo(left + width, top, left + width, top + cornerRadius, cornerRadius);
// Right side and lower right corner
context.lineTo(left + width, top + height - cornerRadius);
context.arcTo(left + width, top + height, left + width - cornerRadius, top + height, cornerRadius);
// Lower side and lower left corner
context.lineTo(left + cornerRadius, top + height);
context.arcTo(left, top + height, left, top + height - cornerRadius, cornerRadius);
// Left side and upper left corner
context.lineTo(left, top + cornerRadius);
context.arcTo(left, top, left + cornerRadius, top, cornerRadius);
// Fill white with 75% opacity
context.globalAlpha = 1;
context.fillStyle = "white";
context.fill();
context.globalAlpha = 1;
// Plot grey frame
context.lineWidth = 1;
context.strokeStyle = "grey";
context.stroke();
}
// Outputs text in a word wrapped fashion in a transparent frame
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(" ");
var line = "";
var yCurrent = y;
var lines = [], currentLine = 0;
// Find the longest word in the text and update the max width if the longest word cannot fit
for (var i = 0; n < words.length; i++) {
var testWidth = context.measureText(words[i]);
if (testWidth > maxWidth)
maxWidth = metrics.width;
}
// Arrange all words into lines
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n];
var testWidth = context.measureText(testLine).width;
if (testWidth > maxWidth) {
lines[currentLine] = line;
currentLine++;
line = words[n] + " ";
}
else {
line = testLine + " ";
}
}
lines[currentLine] = line;
// Plot frame and background
if (lines.length > 1) {
// Multiline text
plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, maxWidth + 3, lines.length * lineHeight + 3);
}
else {
// Single line text
var textWidth = context.measureText(lines[0]).width; // Limit frame width to the actual line width
plotTextBackground(context, x - 2, y - lineHeight / 2 - 2, textWidth + 3, lines.length * lineHeight + 3);
}
// Output lines of text
context.fillStyle = "black";
for (var n = 0; n < lines.length; n++) {
context.fillText(" " + lines[n], x, yCurrent);
yCurrent += lineHeight;
}
}
</script>
<div>
<div id="map"></div>
</div>
</body>
</html>
var igOffices = [
{ "Name": "Infragistics ヨーロッパ", "ID": "Marketing", "Type": "マーケティング", "Country": "英国", "Latitude": 51.53554, "Longitude": -0.45306 },
{ "Name": "Infragistics ジャパン", "ID": "Marketing", "Type": "マーケティング", "Country": "日本", "Latitude": 35.668554, "Longitude": 139.708678 },
{ "Name": "Infragistics インド", "ID": "Support", "Type": "サポート", "Country": "インド", "Latitude": 12.970058, "Longitude": 77.576206 },
{ "Name": "Infragistics ブルガリア", "ID": "Development Lab", "Type": "開発ラボ", "Country": "ブルガリア", "Latitude": 42.641262, "Longitude": 23.334461 },
{ "Name": "Infragistics ウルグアイ", "ID": "Development Lab", "Type": "開発ラボ", "Country": "ウルグアイ", "Latitude": -34.907525, "Longitude": -56.141253 },
{ "Name": "Infragistics アメリカ", "ID": "Corporate HQ", "Type": "本社", "Country": "合衆国", "Latitude": 40.347615, "Longitude": -74.490327 },
{ "Name": "Infragistics オーストラリア", "ID": "Marketing", "Type": "マーケティング", "Country": "オーストラリア", "Latitude": -37.820963, "Longitude": 144.96578 }
];
// DO NOT LOCALIZE "ID" DATA COLUMN