Available in the Full Version

Map - Overview

The igMap is a HTML5 jQuery map control that can render data sets consisting of large number of geographic locations in shapes of markers, lines, polygons, and even as interactive bitmaps.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Тhis control includes functionality to overlay multiple map layers with geographic data over imagery tiles from OpenStreetMap®, and Bing® Maps Maps providers. For example, you can mark specific map locations and display information on the map using custom markers and color them depending on data parameters. Also, you can use shape files to draw shapes around geographical regions. See the complete list of samples in the menu.

The igMap can render data using following type of geographic map series:

Code View

Show In JsFiddle

Copy to Clipboard

                    <!-- Target element for the map -->
<div id="map"></div>

                    #tooltipTable
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}
#tooltipTable td, #tooltipTable th
{
    font-size: 9px;
    border: 1px solid #b51c1c;
    padding: 3px 7px 2px 7px;
}
#tooltipTable th
{
    font-weight: bold;
    font-size: 11px;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #b51c1c;
    color: #ffffff;
}

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
    <style>
        #tooltipTable
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }
        #tooltipTable td, #tooltipTable th
        {
            font-size: 9px;
            border: 1px solid #b51c1c;
            padding: 3px 7px 2px 7px;
        }
        #tooltipTable th
        {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #b51c1c;
            color: #ffffff;
        }
    </style>
      <script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <table id="tooltipTable" >
            <tr><th class="tooltipHeading" colspan="2">${item.Name}, ${item.Country}</th></tr>
            <tr>
                <td>Latitude:</td>
                <td>${item.Latitude}</td>
            </tr>
            <tr>
                <td>Longitude:</td>
                <td>${item.Longitude}</td>
            </tr>
        </table>
    </script>
</head>
<body>

    <!-- Target element for the map -->
    <div id="map"></div>

    <script src="/data-files/world-cities.js"></script>
  
    <script>
        $(function () {
            $("#map").igMap({
                width: "700px",
                height: "500px",
                windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
                // specifies imagery tiles from OpenStreetMap
                backgroundContent: {
                    type: "openStreet"
                },
                series: [{
                    type: "geographicSymbol",
                    name: "worldCities",
                    dataSource: data,
                    latitudeMemberPath: "Latitude",
                    longitudeMemberPath: "Longitude",
                    markerType: "automatic",
                    markerCollisionAvoidance: "fade",
                    markerOutline: "#b51c1c",
                    markerBrush: "#b51c1c",
                    showTooltip: true,
                    tooltipTemplate: "tooltipTemplate"
                }]
            });
            $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>")
        });

    </script>
   
</body>
</html>

                    var data = [
        { Name: "Warsaw", Country: "Poland", Latitude: 52.21, Longitude: 21 },
        { Name: "London", Country: "England", Latitude: 51.50, Longitude: 0.12 },
        { Name: "Berlin", Country: "Germany", Latitude: 52.50, Longitude: 13.33 },
        { Name: "Moscow", Country: "Russia", Latitude: 55.75, Longitude: 37.51 },
        { Name: "Sydney", Country: "Australia", Latitude: -33.83, Longitude: 151.2 },
        { Name: "Tokyo", Country: "Japan", Latitude: 35.6895, Longitude: 139.6917 },
        { Name: "Seoul", Country: "South Korea", Latitude: 37.5665, Longitude: 126.9780 },
        { Name: "Delhi", Country: "India", Latitude: 28.6353, Longitude: 77.2250 },
        { Name: "Mumbai", Country: "India", Latitude: 19.0177, Longitude: 72.8562 },
        { Name: "Manila", Country: "Philippines", Latitude: 14.6010, Longitude: 120.9762 },
        { Name: "Shanghai", Country: "China", Latitude: 31.2244, Longitude: 121.4759 },
        { Name: "Mexico City", Country: "Mexico", Latitude: 19.4270, Longitude: -99.1276 },
        { Name: "New York", Country: "United States", Latitude: 40.7561, Longitude: -73.9870 },
        { Name: "Sao Paulo", Country: "Brasil", Latitude: -23.5489, Longitude: -46.6388 },
        { Name: "Los Angeles", Country: "United States", Latitude: 34.0522, Longitude: -118.2434 },
        { Name: "Sofia", Country: "Bulgaria", Latitude: 42.697845, Longitude: 23.321925 }
    ];

             <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <style>
        #tooltipTable {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }

        #tooltipTable td, #tooltipTable th {
            font-size: 9px;
            border: 1px solid #b51c1c;
            padding: 3px 7px 2px 7px;
        }

        #tooltipTable th {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #b51c1c;
            color: #ffffff;
        }
    </style>
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.dv.js"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'openstreet-maps.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

             import { Component, NgModule, AfterViewInit } from '@angular/core';
import { IgMapComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

declare var jQuery: any;

@Component({
    selector: 'my-app',
    template: `
        <script id="tooltipTemplate" type="text/x-jquery-tmpl">
            <table>
                <tr>
                    <th class="tooltipHeading" colspan="2">${item.Name}, ${item.Country}</th>
                </tr>
                <tr>
                    <td>$${Latitude}:</td>
                    <td>${item.Latitute}</td>
                </tr>
                <tr>
                    <td>$${Longitude}:</td>
                    <td>${item.Longitude}</td>
                </tr>
            </table>
        </script>
        
        
        <ig-map widgetId="map" [(options)]="mapOptions"></ig-map>
    `
})
export class AppComponent implements AfterViewInit {
    
    public data = [
        { Name: "Warsaw", Country: "Poland", Latitude: 52.21, Longitude: 21 },
        { Name: "London", Country: "England", Latitude: 51.50, Longitude: 0.12 },
        { Name: "Berlin", Country: "Germany", Latitude: 52.50, Longitude: 13.33 },
        { Name: "Moscow", Country: "Russia", Latitude: 55.75, Longitude: 37.51 },
        { Name: "Sydney", Country: "Australia", Latitude: -33.83, Longitude: 151.2 },
        { Name: "Tokyo", Country: "Japan", Latitude: 35.6895, Longitude: 139.6917 },
        { Name: "Seoul", Country: "South Korea", Latitude: 37.5665, Longitude: 126.9780 },
        { Name: "Delhi", Country: "India", Latitude: 28.6353, Longitude: 77.2250 },
        { Name: "Mumbai", Country: "India", Latitude: 19.0177, Longitude: 72.8562 },
        { Name: "Manila", Country: "Philippines", Latitude: 14.6010, Longitude: 120.9762 },
        { Name: "Shanghai", Country: "China", Latitude: 31.2244, Longitude: 121.4759 },
        { Name: "Mexico City", Country: "Mexico", Latitude: 19.4270, Longitude: -99.1276 },
        { Name: "New York", Country: "United States", Latitude: 40.7561, Longitude: -73.9870 },
        { Name: "Sao Paulo", Country: "Brasil", Latitude: -23.5489, Longitude: -46.6388 },
        { Name: "Los Angeles", Country: "United States", Latitude: 34.0522, Longitude: -118.2434 },
        { Name: "Sofia", Country: "Bulgaria", Latitude: 42.697845, Longitude: 23.321925 }
    ];

    public mapOptions: any;

    constructor() {
        this.mapOptions = {
            width: "700px",
            height: "500px",
            windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
            backgroundContent: {
                type: "openStreet"
            },
            series: [{
                type: "geographicSymbol",
                name: "worldCities",
                dataSource: this.data,
                latitudeMemberPath: "Latitude",
                longitudeMemberPath: "Longitude",
                markerType: "automatic",
                markerCollisionAvoidance: "fade",
                markerOutline: "#b51c1c",
                markerBrush: "#b51c1c",
                showTooltip: true,
                tooltipTemplate: "tooltipTemplate"
            }]
        };
    }

    public ngAfterViewInit() {
        jQuery("#map").find(".ui-widget-content")append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>")
    }
}

@NgModule({
    bootstraps: [AppComponent],
    declarations: [AppComponent, IgMapComponent],
    imports: [BrowserModule]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

             <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- ReactJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.dv.js"></script>
    <script src="/js-data/world-cities"></script>
    <!-- Ignite UI for jQuery ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
    <style>
        #tooltipTable {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }

        #tooltipTable td, #tooltipTable th {
            font-size: 9px;
            border: 1px solid #28b51c;
            padding: 3px 7px 2px 7px;
        }

        #tooltipTable th {
            font-weight: bold;
            font-size: 11px;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #28b51c;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <table id="tooltipTable">
            <tr><th class="tooltipHeading" colspan="2">${item.Name}, ${item.Country}</th></tr>
            <tr>
                <td>Latitude:</td>
                <td>${item.Latitude}</td>
            </tr>
            <tr>
                <td>Longitude:</td>
                <td>${item.Longitude}</td>
            </tr>
        </table>
    </script>

    <div id="app">
        <script type="text/babel">
            let App = React.createClass({
                
                getInitialState: function() {
                    return {
                        view: data
                    };
                },

                render: function() {
                    let options = {
                        id: "map1",
                        width: "700px",
                        height: "500px",
                        dataSource: this.state.view,
                        windowRect: { left: 0.225, top: 0.1, height: 0.6, width: 0.6 },
                        series: [
                            {
                                name: 'worldCities',
                                type: 'geographicSymbol',
                                dataSource: this.state.view,
                                latitudeMemberPath: "Latitude",
                                longitudeMemberPath: "Longitude",
                                markerOutline: "#28b51c",
                                markerBrush: "#28b51c",
                                showTooltip: true,
                                tooltipTemplate: "tooltipTemplate"
                            }
                        ]
                    };

                    return (
                        <igMap options={options} />
                    );
                }
            });

            ReactDOM.render(
                <App />,
                document.getElementById('app')
            );
        </script>
    </div>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Map - Overview

Code View