Configuring Geographic Shapes Series (igMap)

Topic Overview

Purpose

This topic explains how to configure Geographic Shape 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 Shape Series Configuration Summary
• Code Examples Summary
  • Configuring Geographic Shape Series in JavaScript
  • Configuring Geographic Shape Series in ASP.NET MVC
  • Configuring Custom Shape Data Source
• Related Content
  • Topics
  • Samples

Introduction

Geographic shape series summary

The practical application of Geographic Shape Series of the igMap control is to draw shapes (or closed paths) for geographic regions specified by a shape file or a custom shape data source provided by your application. Shape files are always paired with corresponding database DBF files that contain information related to each shape. Custom shape data sources may provide information related to each shape in the form of properties or data objects as part of their internal structure.

The Geographic Shape series is useful for highlighting areas of interest on the world map. This is suitable for depicting political or administrative maps, market regions, or any other geographic region.

You can configure the igMap control to draw markers along with shapes, and you can create your custom markers. Refer to the topic Configuring the Visual Features (igMap) for more information.

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

Note: It is recommended to use smaller shape data sets when targeting mobile devices. Rendering geospatial data requires more computing resources and most mobile devices offer lower performance compared to desktop and laptop computers.

Geographic Shape Series Configuration Summary

Geographic Shape series configuration summary chart

The following table lists the configurable aspects of the igMap control’s geographic shape series.

Code Examples Summary

Code examples summary chart

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

Code Example: Configuring Geographic Shape Series in JavaScript

Description

This code example shows how to configure an igMap control to display the geographic shape series in JavaScript. The example shows how to specify the URLs for shape and database files. Configures the shape’s outline and fill colors area; automatic marker selection; and marker outline and fill colors.

Code

In JavaScript:

Code
$("#map").igMap({
    ...
    series: [{
        type: "geographicShape",
        name: "seriesName",
        markerType: "automatic",
        shapeMemberPath: "points",
        shapeDataSource: '/Data/geoshapes.shp',
        databaseSource: '/Data/geoshapes.dbf',
        brush: "rgba(68,138,223,.6)",
        outline: "blue",
        markerBrush: "rgba(50,100,100,0.7)", 
        markerOutline: "blue"
    }],
    ...
});

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

Description

This code example shows how to configure an igMap control to display the geographic shape series in ASP.NET MVC. The example shows how to specify the URLs for shape and database files. It configures the shape outline; fill colors area; automatic marker selection; and marker outline and fill colors.

Code

In ASPX:

Code
<%= Html.Infragistics().Map()
        ...
        .Series(series => {
            series.GeographicShape("seriesName")
                .ShapeDataSource(Url.Content("~/Data/geoshapes.shp"))
                .DatabaseSource(Url.Content("~/Data/geoshapes.dbf"))
                .ShapeMemberPath("points")
                .MarkerType(MarkerType.Automatic)
                .Brush("rgba(68,138,223,.6)")
                .Outline("blue");
                .MarkerBrush("rgba(50,100,100,0.7)")
                .MarkerOutline("blue");
        })
        ...
        .DataBind()
        .Render()
%>

Code Example: Configuring Custom Shape Data Source

Description

This code example shows how to configure an igMap control to display the geographic shape series with a custom shape data source. The shape source contains geospatial data about the location of individual shapes and its data attributes.

Code

The following code snippet defines a JavaScript array containing information about two shapes. Each shape contains a member called points that stores an array of shapes. Each shape is an array of geographical points. The two objects in the array contain a data member called data, which can hold an arbitrary number of fields with shape related data. These data objects are bound to the corresponding shape by the control and are available in tooltip templates and event handing functions.

In JavaScript:

var data = [
    {
        data: {
            attribute1: "String value 1",
            attribute2: 3.1415,
            attribute3: "12/21/2012"
        },
        points: [
            [
                { x: 0, y: 0 },
                { x: 30, y: 0 },
                { x: 30, y: 30 },
                { x: 0, y: 30 }
            ],
            [
                { x: 5, y: 5 },
                { x: 35, y: 5 },
                { x: 35, y: 35 }
            ]
        ]
    }, 
    {
        data: {
            attribute1: "String value 2",
            attribute2: 2.71828,
            attribute3: "03/14/2001"
        },
        points: [
            [
                { x: 40, y: 0 },
                { x: 70, y: 0 },
                { x: 70, y: 30 },
                { x: 40, y: 30 }
            ]
        ]
    }
];

The following code snippet configures Geographic Shape Series with the custom data source specified above. The code explicitly sets the shapeMemberPath option to the name of the points data member of the shape objects. This way you may store your shape data in an arbitrary object with different member names.

In JavaScript:

$("#map").igMap({
    ...
    series: [{
        type: 'geographicShape',
        name: 'customShapeSource',
        dataSource: data,
        shapeMemberPath: "points",
        outline: "black",
        markerType: 'automatic',
        shapeStyle: {
            fill: "lightblue",
            stroke: "black",
            thickness: 8.0
        }
    }],
    ...
});

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 Shapes Series: This sample demonstrates how to bind shape files and database files to a map control and produce geographic shapes visualization.