Configuring Geographic Proportional Symbol Series (igMap)

Topic Overview

Purpose

This topic explains how to configure the Geographic Proportional 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
• 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.

The following screenshot is a preview of the geographic symbol series in the igMap control. The RadiusScale of the symbols uses proportional radius scale in order to indicate the significance of data point's value.

Geographic Proportional Symbol Series Configuration Summary

Geographic Proportional Symbol series configuration summary chart

The following table lists the igMap control’s configurable aspects pertaining to the geographic proportional 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: [{
    name: "series1",
    type: "geographicProportionalSymbol", 
    dataSource: data,
    markerType: "circle", 
    markerOutline: "black",
    longitudeMemberPath: "Longitude",
    latitudeMemberPath: "Latitude",
    radiusMemberPath: "Magnitude",
    radiusScale: {
        minimumValue: 10,
        maximumValue: 40, 
    },
    fillMemberPath: "Magnitude",
    fillScale: {
         type: "value",
         brushes: ["red", "yellow"],
         minimumValue: 1,
         maximumValue: 12
     }
    }],
    ...
});

The following screenshot is a result from the code above of the geographic symbol series in the igMap control with a defined radiusScale, markerOutline, and fillScale.

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.