製品版のみの機能

マップ - 概要

igMap は HTML5 jQuery マップコントロールです。多数の地理位置を含むデータセットをマーカー、線、ポリゴン、ビットマップなどの形式で描画できます。

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

また、OpenStreetMap® および Bing® Maps プロバイダーからの画像タイルの上に複数のマップレイヤーをオーバーレイする機能も提供します。たとえば、指定したマップ位置をマークし、カスタムマーカーを使用してマップで情報を表示できます。データパラメーターに基づいて色を設定できます。シェープファイルを使用すると、地理的領域の周りに図形を描画できます。サンプルをすべて表示するには、メニューを参照してください。

igMap は以下の地理マップシリーズを使用してデータを描画できます:

コードビュー

JsFiddle で表示

クリップボードへコピー

                    <!-- 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>緯度:</td>
                <td>${item.Latitude}</td>
            </tr>
            <tr>
                <td>経度:</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: "ワルシャワ", Country: "ポーランド", Latitude: 52.21, Longitude: 21 },
        { Name: "ロンドン", Country: "英国", Latitude: 51.50, Longitude: 0.12 },
        { Name: "ベルリン", Country: "ドイツ", Latitude: 52.50, Longitude: 13.33 },
        { Name: "モスコワ", Country: "ロシア", Latitude: 55.75, Longitude: 37.51 },
        { Name: "シドニー", Country: "オーストラリア", Latitude: -33.83, Longitude: 151.2 },
        { Name: "東京", Country: "日本", Latitude: 35.6895, Longitude: 139.6917 },
        { Name: "ソウル", Country: "韓国", Latitude: 37.5665, Longitude: 126.9780 },
        { Name: "デリー", Country: "インド", Latitude: 28.6353, Longitude: 77.2250 },
        { Name: "ムンバイ", Country: "インド", Latitude: 19.0177, Longitude: 72.8562 },
        { Name: "マニラ", Country: "フィリピン", Latitude: 14.6010, Longitude: 120.9762 },
        { Name: "上海", Country: "中国", Latitude: 31.2244, Longitude: 121.4759 },
        { Name: "メキシコ シティー", Country: "メキシコ", Latitude: 19.4270, Longitude: -99.1276 },
        { Name: "ニュー ヨーク", Country: "合衆国", Latitude: 40.7561, Longitude: -73.9870 },
        { Name: "サンパウロ", Country: "ブラジル", Latitude: -23.5489, Longitude: -46.6388 },
        { Name: "ロサンゼルス", Country: "合衆国", Latitude: 34.0522, Longitude: -118.2434 },
        { Name: "ソフィア", Country: "ブルガリア", 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 | サンプル

検索結果

マップ - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

マップ - 概要

コード ビュー

コードビュー