製品版のみの機能
マップ - OpenStreet マップ
このサンプルでは、OpenStreet マップを使用してマップ コントロールで地理シリーズを描画する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、OpenStreet マップを使用してマップ コントロールで地理シリーズを描画する方法を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/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>