Available in the Full Version
Map - Marker Template
This sample demonstrates how to create a custom marker template in the igMap control. The marker template is implemented in JavaScript by assigning a function to the corresponding geographic series which is called whenever a marker needs to be rendered on screen. The marker rendering function uses the HTML5 canvas API to draw marker contents. The sample shows all Infragistics offices around the world which are marked by custom marker colored based on type of the office in addition to the name of each office presented next to the marker.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
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 a custom marker template in the igMap control. The marker template is implemented in JavaScript by assigning a function to the corresponding geographic series which is called whenever a marker needs to be rendered on screen. The marker rendering function uses the HTML5 canvas API to draw marker contents. The sample shows all Infragistics offices around the world which are marked by custom marker colored based on type of the office in addition to the name of each office presented next to the marker.
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/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>Office Type:</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 England", "ID": "Marketing", "Type": "Marketing", "Country": "England", "Latitude": 51.53554, "Longitude": -0.45306 },
{ "Name": "Infragistics Japan", "ID": "Marketing", "Type": "Marketing", "Country": "Japan", "Latitude": 35.668554, "Longitude": 139.708678 },
{ "Name": "Infragistics India", "ID": "Support", "Type": "Support", "Country": "India", "Latitude": 12.970058, "Longitude": 77.576206 },
{ "Name": "Infragistics Bulgaria", "ID": "Development Lab", "Type": "Development Lab", "Country": "Bulgaria", "Latitude": 42.641262, "Longitude": 23.334461 },
{ "Name": "Infragistics Uruguay", "ID": "Development Lab", "Type": "Development Lab", "Country": "Uruguay", "Latitude": -34.907525, "Longitude": -56.141253 },
{ "Name": "Infragistics United States", "ID": "Corporate HQ", "Type": "Corporate HQ", "Country": "United States", "Latitude": 40.347615, "Longitude": -74.490327 },
{ "Name": "Infragistics Australia", "ID": "Marketing", "Type": "Marketing", "Country": "Australia", "Latitude": -37.820963, "Longitude": 144.96578 }
];
// DO NOT LOCALIZE "ID" DATA COLUMN