Configuring Geographic Symbol Series (igMap)

Topic Overview

Purpose

This topic explains how to configure the Geographic Symbol series using the igMap™ control.

Required background

The following topics are prerequisites to understanding this topic:

• igMap Overview: This topic provides conceptual information about the igMap control including its main features, minimum requirements and user interaction capabilities.

• Adding an igMap: This topic is a walkthrough for adding a simple igMap control with basic features to a web page.

In this topic

This topic contains the following sections:

• Introduction
• Geographic Symbol Series Configuration Summary
• Code Examples Summary
  • Configuring Geographic Symbol Series in JavaScript
  • Configuring Geographic Symbol Series in ASP.NET MVC
• Related Content
  • Topics
  • Samples

Introduction

Geographic symbol series summary

The geographic symbol series of the igMap plots the markers for the geographic points specified by the data in your application. This map series can be useful for highlighting points of interest in your particular business case like department stores, warehouses, or offices. Additional uses of this map series may be in a fleet management system or a GPS system for dynamic vehicle tracking.

With the help of the custom marker feature you can draw your own markers to convey information to the user in a different way. Refer to the topic Configuring the Visual Features (igMap) for more information.

You can control the outline and color of the markers using either the CSS styles or options of the series object. Refer to the topic Styling Maps (igMap) for more information.

Geographic Symbol Series Configuration Summary

Geographic Symbol series configuration summary chart

The following table lists the igMap control’s configurable aspects pertaining to the geographic symbol series.

Code Examples Summary

Code examples summary chart

The following table lists the code examples included in this topic.

Code Example: Configuring Geographic Symbol Series in JavaScript

Description

This code example shows how to configure an igMap control to display geographic symbol series in JavaScript. The example shows how to specify the data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too.

Code

In JavaScript:

$("#map").igMap({
    ...
    series: [{
        type: "geographicSymbol",
        name: "seriesName",
        dataSource: data,
        latitudeMemberPath: "Latitude",
        longitudeMemberPath: "Longitude",
        markerType: "automatic",
        markerCollisionAvoidance: "fade", 
        markerBrush: "rgba(50,100,100,0.7)", 
        markerOutline: "black"
    }],
    ...
    }
});

Code Example: Configuring Geographic Symbol Series in ASP.NET MVC

Description

This code example shows how to configure an igMap control to display Geographic Symbol Series in ASP.NET MVC. The example shows how to specify the data model to be used for regular and strongly-typed view. Configure automatic marker selection along with marker collision avoidance logic, and marker outline and fill colors are specified too.

Code

This code snippet configures geographic symbol series for a regular view.

In ASPX:

<%= Html.Infragistics().Map<SampleApp.Models.GeoSymbols>()
        .ID("map")
        ...
        .Series(series => {
            series.GeographicSymbol("seriesName")
                .LatitudeMemberPath(item => item.Latitude)
                .LongitudeMemberPath(item => item.Longitude)
                .MarkerType(MarkerType.Automatic)
                .MarkerCollisionAvoidance(CollisionAvoidanceType.Fade)
                .MarkerBrush("rgba(50,100,100,0.7)")
                .MarkerOutline("black");
        })
        ...
        .DataBind()
        .Render()
%>

This code snippet configures geographic symbol series for a strongly-typed view.

In ASPX:

<%= Html.Infragistics().Map(Model)
        .ID("map")
        ...
        .Series(series => {
            series.GeographicSymbol("seriesName")
                .LatitudeMemberPath(item => item.Latitude)
                .LongitudeMemberPath(item => item.Longitude)
                .MarkerType(MarkerType.Automatic)
                .MarkerCollisionAvoidance(CollisionAvoidanceType.Fade)
                .MarkerBrush("rgba(50,100,100,0.7)")
                .MarkerOutline("black");
        })
        ...
        .DataBind()
        .Render()
%>

Related Content

Topics

The following topics provide additional information related to this topic.

• Configuring the Map Series (igMap): This topic is a landing page linking to the topics explaining how to configure all supported map visualizations by the igMap control and how to use different background content (map providers).

• Configuring Features (igMap): This topic is a landing page linking to the topics explaining how to configure various features of the igMap control.

• Data Binding (igMap): This topic explains how to bind the igMap control to different data sources depending on the map series visualized.

• Styling Maps (igMap):This topic explains how the igMap control can be configured with regard to visual styling.

Samples

The following samples provide additional information related to this topic.

• Geographic Symbol Series: This sample demonstrates how to create maps and visualize geographic symbol series.