カテゴリー別アーカイブ: コーディング

Angular2でHTTPでサーバーからJSONデータ取得

Angular2のHTTPクライアントを使って、サーバーからGetリクエストでJSONファイルのデータを取得するサンプルを作成しました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
続きを読む →

関連記事の目次

AngularJSを使ってGoogleマップ（５）重複して表示されるマーカーをクラスター化する方法

複数のマーカーが近くにあって重複して表示されるような場合、クラスター化してまとめて表示する事が出来ます。クラスター化したアイコンをクリックするとズームアップしてそれぞれのマーカーを表示させる事が出来ます。
　
デモとコードサンプルはこちら。
　

サンプルコードの説明


　
１）ui-gmap-markersタグにクラスター関連の属性追加（HTML）
　

<ui-gmap-markers models="map.Markers" coords="'self'"
                 doCluster="map.ClusterMarkers"
                 clusterOptions="map.clusterOptions">
</ui-gmap-markers>

・doClusterオプション
クラスター化するかしないかを設定
　
・clusterOptions
どのようにクラスター化するかのオプション設定
　
２）クラスターのオプションを設定（スクリプト）
　

clusterOptions: {
    title: 'Cluster Markers', 
    gridSize: 60, 
    ignoreHidden: true, 
    minimumClusterSize: 2
}

・title
クラスター化したアイコンをマウスオーバーした際に表示される
　
・gridSize
どの範囲内にあるマーカーをクラスター化するかのサイズ
　
・minimumClusterSize
何個のマーカーがgridSize内にあるとクラスター化するか
　

動作確認


　
①初期表示
　
ズームレベル16で東京駅近傍に４つのマーカーを表示されます。この段階ではクラスター化されていません。
　
②一段階ズームアウトして、広い範囲を表示。
　
・３つのマーカーがクラスター化され、青いアイコンで表示されます。
　
・青いアイコン内の数字がクラスター化されたアイコンの数を表します。
　
・青いアイコンをクリックすると拡大表示されて個別のマーカーが確認できるようになります。
　
③さらにもう一段階ズームアウトして、広い範囲表示
　
４つのマーカーがクラスター化されて表示されます。

関連記事の目次

Angular2のカスタムパイプでソート（orderBy）機能のサンプル作成

Angular2では、Date、Decimal、Currency、Json、Sliceといったビルトインパイプが用意されていますが、自分でパイプを定義することもできます。Angular1で提供されていたorderByがAngular2のビルトインパイプには含まれていなかったたため、ソートを行うパイプをサンプルとして作成してみました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
続きを読む →

関連記事の目次

Angular2のビルトインパイプ

Angular1でフィルターと呼ばれていた機能が、Angular2ではパイプという名称で同様な提供されています。その使用方法を確認しました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
続きを読む →

関連記事の目次

Angular2でPromiseを使って非同期にデータを取得

サービスを介してリモートサーバーからデータを取得する場合など、遅延が発生すると同期処理だと処理がブロックされてしまいます。Promiseを使って非同期にデータを取得する方法を確認し、サンプルを作成しました。
※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認）
続きを読む →

関連記事の目次

Proudly powered by WordPress