LoginSignup
9
9

More than 5 years have passed since last update.

Mapbox.js examples の研究

Posted at

https://www.mapbox.com/mapbox.js/example/v1.0.0/ の内容の研究。項目の訳出。

アニメーション

  • 回転し、制御可能なマーカー
  • 移動するマーカー
  • 地図に線を描きアニメーションさせる
  • マーカーを地図中心にする
  • アニメーションする飛行経路
  • 線にそってマーカーをアニメーションさせる

地物

  • 作図したポリゴンの面積を表示する
  • ポリライン
  • ツールチップ付きの読み込みデータ
  • マーカー間の距離
  • GeoJSON への L.mapbox.simplestyle 適用
  • 日付変更線をまたぐ線
  • CoffeeScript で地図を出す

マーカークラスター

  • マーカーデータでマーカークラスターする
  • 個別にスタイルをつけた複数のクラスター
  • クラスターポリゴンのカスタマイズ
  • クラスターアイコンのカスタマイズ
  • Leaflet Markercluster

Turf

  • Concave Hull
  • Convex Hull

ジオコーディング

  • ジオコーダーで地図中心を移動する
  • ジオコーダーの結果をコードで扱う
  • オートコンプリート
  • ジオコーダーの追加
  • ジオコーダーが開いた状態をデフォルトにする

レイヤ

  • ズームレンズ
  • WMSレイヤの表示
  • UTFGrid でポップアップを表示
  • torqueライブラリを使ってCartoDBの時空間データを扱う
  • baselayerの切り替え
  • canvasレイヤの作成
  • layerをスワイプで切り替える
  • シンプル地図
  • (移動可能なマーカーの)経緯度を地図に表示する
  • オーバーズーミング
  • UTFGRid
  • 狭帯域地図
  • 外部データへのリンク
  • Leafletレイヤコントロール
  • レイヤ切り替え
  • ハワイとアラスカの重ね合わせ
  • ジオリファレンスしたスキャン地図のImageOverlay
  • GridLayerとGridControl
  • 他の地図からの地物
  • 外部地図レイヤ
  • world wrappingを停止
  • UTFGridを停止
  • 重ね合わせの循環
  • ツールチップのカスタマイズ
  • レイヤの結合
  • 複数のコロプレス地図

Leaflet

  • 素のLeaflet API

ズーム・パン

  • ダブルクリックでズーム
  • Firebase を使ったライブ編集
  • ズームやパンの停止
  • アニメーションや慣性効果の停止

凡例

  • 凡例の位置のカスタマイズ
  • 凡例
  • 凡例のカスタマイズ

マーカー

  • worldCopyJump オプション
  • ひとつのマーカー
  • ホバーした際にツールチップを表示する
  • テキストラベルとしてのマーカー
  • 回転し制御可能なマーカー
  • 点のポリゴン内外判定
  • Foursquareの場所情報
  • プログラムからポップアップを表示する
  • マーカーカテゴリの切り替え
  • マーカータイプによるフィルタリング
  • マーカーへの複数のフィルタの適用
  • マーカーツールチップにスライドショーを入れる
  • マーカーをリンクとして使う
  • 地図の外にマーカーツールチップを表示する
  • マーカーからの半径検索
  • 読み込み時にマーカーツールチップを表示する
  • マーカーの移動
  • マーカーをリストアップし、クリックした項目に移動する
  • GeoJSON読み込み
  • リアルタイムデータからGeoJSONの読み込み
  • GeoJSONを使わないマーカー
  • Mapillaryからの画像
  • URL指定でGeoJSONを読み込む
  • GithubからGeoJSONマーカーを読み込む(application/vnd.github.v3.raw)
  • 地図をマーカーに合わせる
  • マーカーをフィルタリングする
  • マーカーを検索する(!)
  • 他の地図からの地物
  • マーカーを制御する編集可能なテーブル
  • ドラッグ可能なマーカー
  • HTMLからのマーカー作成
  • マーカー群の循環
  • ポップアップでのクリックイベント
  • クリックでマーカー色を変更する
  • マーカーを中心にする

プラグイン

  • geo-viewportとgeojson-extentを使った静的地図
  • geo-viewportを使った静的地図
  • 作図したポリゴンの面積の表示
  • 徒歩経路
  • 運転経路
  • ズームバー
  • Leaflet OSM
  • Leaflet-MiniMap
  • Leaflet Locate
  • Leaflet Label
  • Leaflet Image
  • マーカーからのヒートマップ
  • Leaflet Heat
  • Leaflet Hash
  • Leaflet Geodesy
  • Leaflet Fullscreen
  • Leaflet Draw
  • 重なったポリゴンの検出
  • Firebase を使ったライブ編集
  • Arc.js

TileMillインタラクティビティ

  • UTFGridからのポップアップ
  • 複数レイヤのUTFGrid
  • Movetip(hoverするツールチップ)
  • 地図の外とのインタラクティビティ
  • GridLayerとGridControl
  • GridLayerへの移動

ツールチップ

  • ホバーからのツールチップ
  • ツールチップ内のスライドショー
  • CSSを用いたツールチップのスタイル
  • ツールチップのカスタマイズ

フォーマットサポート(omnivoreプラグイン)

  • WKT
  • TopoJSON
  • 読み込んだデータへのツールチップ
  • KML
  • GPX
  • カスタムレイヤとOmnivore
  • CSVデータからのスタイル付きマーカー
  • 読み込んだデータのマーカースタイルのカスタマイズ
  • CSVからのマーカーの読み込み
  • マーカー半径検索
  • マーカー検索

ユーザインタフェース

  • ズームレンズ
  • worldCopyJump オプション
  • ツールチップへのビデオ埋め込み
  • UI切り替え
  • baselayer切り替え
  • 対蹠点の地図の同期
  • 地図の同期
  • レイヤ間のスワイプ
  • Soundcloudクリップの埋め込み
  • テキストラベルとしてのマーカー
  • 「読み込み中」スクリーンの表示
  • マーカーと説明文を用いたスクロール駆動ナビゲーション
  • スケールコントロール
  • マーカーリストをドラッグされた項目によって整序する
  • パンとバーティカルズーム
  • 透過度コントロール
  • マーカーカテゴリの切り替え
  • Movetip
  • マウス位置
  • maxBoundsによる地図スクロールの制限
  • マーカーへの複数のフィルタの適用
  • 特定ズームレベルでのマーカー
  • マーカーツールチップでのタブ
  • マーカー半径検索
  • 読み込み時のマーカーツールチップ
  • マーカーメニューからのマーカーナビゲーション
  • 二つのマーカー間の距離
  • 地図内の場所への移動
  • 見えているマーカーのリスト
  • ズームバー
  • レイヤの切り替え
  • 地図の外との相互作用
  • Geolocation
  • ジオコーダーの結果をコードで使う
  • ジオコーダーをオートコンプリート付きで使う
  • ジオコーダーの追加
  • マーカーのフィルタリング
  • マーカーの検索
  • マーカーデータをコントロールする編集可能なテーブル
  • ドラッグ可能なマーカー
  • マーカーツールチップのカスタマイズ
  • マーカーアイコンのカスタマイズ
  • ポップアップでのクリックイベント
  • ズームコントロールの場所を変更する
  • GridLayerへの移動

ベクトル重ね合わせ

  • スケールドマーカーを使ったタイムライン
  • 作図したポリゴンの面積の表示
  • 読み込み中スクリーンの表示
  • スケールしたポイント
  • ポリライン
  • 地物をマスクする
  • マーカー間の線を引く
  • 地図に線を引きアニメーションさせる
  • 日付変更線をまたぐ線
  • マーカーを線で結ぶ
  • コロプレス
  • マーカーを線にそってアニメーションさせる
9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9