もっと

LeafletとgeoJSONで[イベント]をクリックします

LeafletとgeoJSONで[イベント]をクリックします


クリックイベントをgeoJSONにアタッチして、クリックするとAjax関数を実行するにはどうすればよいですか。調べたonEachFeatureしかし、それはgeoJSONがロードされたときに実行され、クリックされたときではなく、大量のajax呼び出しを実行します!


あなたは正しい道を進んでいましたonEachFeature.

各要素のイベントクリックをバインドする必要があるだけです。

以下を参照(テスト済み)

function whenClicked(e){// e =イベントconsole.log(e); //ここでajax呼び出し宣言を行うことができます//$.ajax(…}functiononEachFeature(feature、layer){// bind click layer.on({click:whenClicked});} geojson = L.geoJson(your_data、 {スタイル:スタイル、onEachFeature:onEachFeature})。addTo(map);

ThomasG77のバージョンよりわずかに少ないコードでそれを行うことができます:

function onEachFeature(feature、layer){//バインドクリックlayer.on( 'click'、function(e){// e = event console.log(e); //ここでajax呼び出し宣言を行うことができます// $ .ajax(…});} geojson = L.geoJson(your_data、{style:style、onEachFeature:onEachFeature})。addTo(map);

インライン関数とは別の方法

geojson = L.geoJson(your_data、{style:style、onEachFeature:function onEachFeature(feature、layer){layer.on( 'mouseover'、function(e){// e = event console.log(e); //ここでajax呼び出し宣言を行うことができます//$.ajax(…});})。addTo(map);

サイドプロジェクト–インスブルックのインタラクティブな駐車マップ

最近インスブルックに引っ越したとき、利用可能な駐車システムのインタラクティブマップがないことに気づきました。車を駐車できる時間は、車が置かれているゾーンによって異なります。駐車ゾーンは20あり、市内の隣接する通りによって定義されます。インスブルックは非常に密集しており、駐車場は常にホットな話題です。ですから、インタラクティブマップがあると、通りの名前にあまり詳しくない場合でも、車を長く離れることができるゾーンを簡単に見つけることができると思いました。インスブルック市は、オーストリアのオープンデータポータルでGISデータを提供しているため、このようなマップの実装は非常に簡単です。このマップを作成するために、次のテクノロジーを使用しました。

    コメントセクションの単一ページレイアウトのデータのインタラクティブ要素のオープンストリートマップデータをレンダリングするため

ソースコードは私のGithubアカウントで入手できます。実装はこことオーストリアのオープンデータポータルでも利用できます。


リーフレットでのベクターレイヤーのシンボル化

ブラウザで描画するベクトルデータセットを取り込む場合、フィーチャを描画するシンボルを定義するためにいくつかの作業を行う必要がある場合があります。スタイリング情報を含まないGeoJSONのようなデータ形式では、サーバーに画像をリクエストした場合のように、既成のスタイリングを取得することはできません。グラフィックのシンボルを定義しない場合は、APIのデフォルトのシンボルが表示される可能性があります。

リーフレットでは、関数内でスタイルを定義するのが一般的です。これにより、再利用が容易になります。これは、スタイルを設定してGeoJSONレイヤーに適用する方法の例です。この例は、都市庭園をポリゴンとして示しています。

プロパティには、塗りの色、塗りの不透明度(透明度を制御する)、線の色、線の太さが含まれていることに注意してください。色は16進表記を使用して定義されます。この場合、シンボルは紫色の輪郭が付いたマゼンタの塗りつぶしです(申し訳ありませんが、目立たせたいと思いました)。独自のコードを作成する場合は、オンラインカラーピッカーを使用して、必要な色の16進値を取得します。

パスオプションのドキュメントを読むと、リーフレットのベクトルスタイリングプロパティのリストを確認できます。実用的な例と少しの実験を使用して、やりたいことのほとんどを達成できるはずです。

ブラウザでベクターレイヤーを描画する利点は、特定のイベントに応じてスタイルをすばやく変更できることです。たとえば、ユーザーが1つのシンボルをクリックしたときに、そのシンボルの色を変更できます。 Leafletを使用すると、さまざまなスタイルを定義し、それらをマップイベントに接続できます。

以下のコードは、スタイルマップを使用して、庭のフィーチャがクリックされたときにそれを「強調表示」する方法を示しています。選択した庭が青い塗りつぶしに変わります。

実例のレッスンウォークスルーではほぼ同じコードを使用するため、今すぐこのコードを実行することについて心配する必要はありません。コードパターンと各行で何が起こっているかに注意してください。

まず、選択されていないスタイルと選択されているスタイルを定義する関数を作成します。

次に、GeoJSONレイヤーを作成し、GeoJSON機能とマップ自体のクリックイベントをリッスンする関数を追加します。以下のコードには、現在選択されている機能を保持するselectionという名前の変数が含まれています。式if(selection)は、選択された機能があるかどうかを確認します。 e.targetという表現は、「クリックされたばかりの機能」を意味します。 resetStyleメソッドがレイヤーのスタイルを元の形式に戻す方法と、setStyleメソッドが機能のスタイルを新しいものに変更する方法に注目してください。

これで、マップユーザーは任意の庭をクリックして、青で強調表示されるのを見ることができるはずです。ユーザーが庭をクリックすると、元のマゼンタのシンボルに戻ります。

レッスンのこの部分を要約すると、開発者はシンボルを定義する必要があるため、ブラウザーによって描画されるベクターレイヤーは、開発者側でもう少し作業が必要です。ただし、その作業には、サーバーによって描画されたラスタライズされた画像タイルまたはレイヤーでは不可能な、対話性のためのさまざまなオプションがあります。クリック時に再シンボル化する機能は初歩的なように見えますが、WMSまたはラスタライズされたタイルレイヤーでこのタイプの効果を得るのが難しいことを考えてください(完全に無益ではないにしても)。

レッスンのこのセクションでは、レイヤー内の各フィーチャの均一なシンボルについて説明しました(ただし、時々選択されるフィーチャを除く)。ただし、リーフレットでは、属性値に基づいてスタイル分類を定義することでさらに先に進むことができます。これにより、コロプレスマップや比例記号などの扉が開かれます。これらのテクニックのいくつかはレッスン8でカバーされます。

地図作成の原則に精通していない開発者が地図記号を選択できるようにすることは、それ自体がいくつかの課題を提示する可能性があります。ベクトルシンボルに最適な幅、色、塗りつぶしを決定するために、開発者にカートグラファーに相談してもらうことをお勧めします。


地理的

この章では、地理情報をレンダリングするためのD3のアプローチについて説明します。

例として、以下の地球儀はD3を使用して描かれています。 GeoJSONファイルがロードされ、D3を使用して地理データを投影し、Canvas要素に描画します。

D3のアプローチは、LeafletやGoogleMapsなどのいわゆるラスターメソッドとは異なります。これらは 画像タイルとしての事前レンダリングマップ機能 これらはWebサーバーから読み込まれ、ブラウザーでつなぎ合わされてマップを形成します。

通常、D3リクエスト ベクトル地理情報 GeoJSONと これをSVGまたはCanvasにレンダリングします ブラウザで。

ラスターマップは、多くの場合、パフォーマンスに影響を与えることなく多くの詳細(地名、道路、川など)を表示できる従来の印刷マップのように見えます。ただし、アニメーションやインタラクションなどの動的コンテンツは、ベクトルアプローチを使用してより簡単に実装できます。 (2つのアプローチを組み合わせるのも非常に一般的です。)

D3マッピングの概念

D3を使用したマップ作成を理解するための鍵となる3つの概念は次のとおりです。

  • GeoJSON (地理データを指定するためのJSONベースの形式)
  • 予測 (緯度/経度座標からx&amp y座標に変換する関数)
  • 地理的パスジェネレータ (GeoJSONシェイプをSVGまたはCanvasパスに変換する関数)

GeoJSON

GeoJSONは、JSON形式を使用して地理データを表すための標準であり、完全な仕様はgeojson.orgにあります。

典型的なGeoJSONオブジェクトは次のとおりです。

上記のオブジェクトには、3つの機能の配列を含むFeatureCollectionがあります。

各機能はで構成されています ジオメトリ (国の場合は単純な多角形、Timbuktuの場合はポイント)および プロパティ.

プロパティには、名前、ID、人口、GDPなどの他のデータなどの機能に関する情報を含めることができます。

D3は、GeoJSONをレンダリングするときにほとんどの詳細を処理するため、D3マッピングを開始するには、GeoJSONの基本的な理解のみが必要です。

投影

射影関数は、経度と緯度の座標(配列[lon、lat]の形式)を取り、それをx座標とy座標に変換します。

射影数学は非常に複雑になる可能性がありますが、幸いなことにD3は多数の射影関数を提供します。

たとえば、次を使用して正距円筒図法関数を作成できます。

予測については後で詳しく説明します。

地理的パスジェネレータ

地理パスジェネレーターは、GeoJSONオブジェクトを取得し、それをSVGパス文字列に変換する関数です。 (実際、これは単なる別のタイプのシェイプジェネレータです。)

メソッド.geoPathを使用してジェネレーターを作成し、射影関数を使用して構成できます。

シェイプジェネレータでは通常どおり、生成されたパス文字列を使用して、SVGパス要素にd属性を設定します。

すべてを一緒に入れて

いくつか与えられた GeoJSON、 NS 投影機能地理的パスジェネレータ 基本的なマップを作成できます。

geoJson.featuresは機能の配列です。この配列はパス要素に結合されます。 d属性は、関数geoGeneratorを使用して設定されます。これは、最初のパラメータとして機能を受け取り、パス文字列を出力します。

最後の行は魔法のように見えるかもしれませんが、次と同等です。

この場合、パラメータdはGeoJSON機能です。

物事を単純にするために、上記の例のGeoJSONは、いくつかの座標を使用して国の境界を定義しています。

上記の例は、D3を使用してマップを作成することの本質を示しています。時間をかけて、各概念(GeoJSON、プロジェクション、ジオジェネレーター)とそれらがどのように組み合わされるかを理解することをお勧めします。

基本について説明したので、各概念について詳しく見ていきます。

GeoJSON

GeoJSONは、地理データを指定するためのJSONベースの構造です。多くの場合、mapshaper、ogr2ogr、shp2json、QGISなどのツールを使用して、シェープファイルデータ(GIS分野で広く使用されている地理空間ベクトルデータ形式)から変換されます。

世界地図のシェープファイルの人気のあるソースはNaturalEarthです。最初は、シェープファイルをインポートしてGeoJSONとしてエクスポートするためにmapshaperを試すことをお勧めします。プロパティでフィルタリングすることもできます(たとえば、大陸で国をフィルタリングする場合)。変換の詳細については、MikeBostockのLet’s Make aMapチュートリアルをご覧ください。

mapshaperやD3などのツールは詳細を抽象化するのに非常に優れているため、GeoJSON仕様を詳細に理解していなくてもマップを作成できます。ただし、GeoJSONをより深く理解したい場合は、公式仕様を確認することをお勧めします。

これまで、サンプルファイルにGeoJSONオブジェクトを埋め込みました。実際には、GeoJSONは別のファイルにあり、ajaxリクエストを使用してロードされます。リクエストについてはリクエストの章で詳しく説明しますが、この章の残りの部分では、以下を使用してGeoJSONファイルをロードします。

地理データを記述するためのもう1つのJSONベースの標準であり、ファイルサイズが大幅に小さくなる傾向があるTopoJSONについて言及する価値があります。使用するにはもう少し作業が必要です。この章では説明しません。ただし、詳細については、ドキュメントを確認してください。

投影

球(地球など)上の点を平面(画面など)上の点に変換(または「投影」)する方法は多数(無限ではないにしても)あり、人々は無数の記事(このような記事など)を書いています。 )さまざまな予測の長所と短所について。

要するに、すべての投影が形状、面積、距離、および/または方向を歪めるため、完全な投影はありません。投影を選択することは、歪ませたくないプロパティを選択し、他のプロパティに歪みがあることを受け入れる場合です(またはバランスの取れたアプローチを目指す投影を選択します)。たとえば、国のサイズを正確に表すことが重要な場合は、面積を維持するように努める投影法を選択します(おそらく、形状、距離、方向のコストがかかります)。

D3には、ほとんどのユースケースをカバーする必要のあるコアプロジェクションがいくつかあります。

  • geoAzimuthalEqualArea
  • geoAzimuthalEquidistant
  • geoGnomonic
  • geoOrthographic
  • geoStereographic
  • geoAlbers
  • geoConicConformal
  • geoConicEqualArea
  • geoConicEquidistant
  • geoEquirectangular
  • geoMercator
  • geoTransverseMercator

一部の投影法は面積(例:geoAzimuthalEqualArea&amp geoConicEqualArea)、その他の投影法(例:geoAzimuthalEquidistant&amp geoConicEquidistant)、その他の相対角度(例:geoEquirectangular&amp geoMercator)を保持します。各投影法の長所と短所の詳細については、Carlos A.Furutiの地図投影法ページなどのリソースを試してください。

以下のグリッドは、経度/緯度グリッドおよび等半径の円とともに、世界地図上の各コア投影を示しています。

射影機能

射影関数は、入力[経度、緯度]を受け取り、ピクセル座標[x、y]を出力します。

上記の配列の経度と緯度の順序に注意してください!

独自の射影関数を自由に作成できますが、D3に作成を依頼する方がはるかに簡単です。これを行うには、射影メソッド(d3.geoAzimuthalEqualAreaなど)を選択して呼び出すと、射影関数が返されます。

コアプロジェクションには、次のパラメータを設定するための構成関数があります。

規模投影のスケールファクター
中心投影中心[経度、緯度]
翻訳投影中心のピクセル[x、y]位置
回転する投影の回転[ラムダ、ファイ、ガンマ](または[ヨー、ピッチ、ロール])

各パラメータの正確な意味は、各射影の背後にある数学に依存しますが、大まかに言えば:

  • スケールは スケールファクター 投影の。数値が大きいほど、マップは大きくなります。
  • センターはを指定します 投影の中心 ([lon、lat]配列を使用)
  • translateは、 投影の中心は画面上にあります ([x、y]配列を使用)
  • 回転は、 投影の回転 ([λ、φ、γ]配列を使用)ここで、パラメーターはそれぞれヨー、ピッチ、ロールに対応します。

たとえば、次を使用して、Timbuktuが960x500マップの中央に配置されるように投影関数を作成および構成できます。

各パラメーターがどのように動作するかを理解するには、以下のプロジェクションエクスプローラーを使用してください。 (等しい半径の)円とグリッドを使用すると、投影の面積と角度の歪みを評価できます。

。反転()

投影の.invert()メソッドを使用して、ピクセル座標[x、y]を経度/緯度配列に変換できます。

フィッティング

GeoJSONオブジェクトを指定すると、プロジェクションの.fitExtent()メソッドがプロジェクションの 規模翻訳 ジオメトリが特定のバウンディングボックス内に収まるように:

.fitExtentの最初の引数は、バウンディングボックスの左上の点([x、y])とバウンディングボックスのサイズ([width、height])の2つの座標を含む配列です。 2番目の引数はGeoJSONオブジェクトです。

以下の例では、canvas要素の背景が薄い灰色で、geoJSONをはめ込む境界ボックスが点線の輪郭で示されています。次のコードは、バウンディングボックス内にジオメトリを合わせるために使用されます。

バウンディングボックスの左上隅が[0、0]にある場合は、左上の座標を省略して、幅と高さを指定するだけです。

地理的パスジェネレータ

地理的パスジェネレータは、変換する関数です GeoJSONをSVGパス文字列に (またはcanvas要素の呼び出しに):

d3.geoPath()を使用してジェネレーターを作成し、そのプロジェクションタイプを構成する必要があります。

これで、ジェネレーターを使用して、SVGまたはキャンバスマップの作成に役立てることができます。 SVGオプションは、特にユーザーの操作に関しては、実装が少し簡単です(イベントハンドラーとホバー状態を追加できるため)。

キャンバスアプローチはもう少し作業が必要ですが、通常はレンダリングが高速です(そしてメモリ効率が高くなります)。

SVGのレンダリング

    GeoJSONは、SVGパス要素への配列を特徴としています
  • 地理パスジェネレータを使用して、各パス要素のd属性を更新します

geoJson.featuresは機能の配列です。この配列はパス要素に結合されます。 d属性は、関数geoGeneratorを使用して設定されます。これは、最初のパラメータとして機能を受け取り、パス文字列を出力します。

キャンバスへのレンダリング

キャンバス要素にレンダリングするには、キャンバスDOM要素をジェネレータのコンテキストメソッドに渡します。

.nodeメソッドは、選択範囲の最初のDOM要素を返します。

次に、(context.beginPath()を使用して)キャンバスパスを開始し、geoGeneratorを呼び出します。これにより、必要なキャンバス呼び出しが生成されます。

線と円弧

地理パスジェネレータは、ポリゴン(通常は地理的領域)とポイント(通常はlon / latロケーション)のフィーチャを区別するのに十分賢いです。上記の例に見られるように、ポリゴンを線分としてレンダリングし、ポイントを円弧としてレンダリングします。

.pointRadius()を使用して円の半径を設定できます。

パスジオメトリ

地理的パスジェネレータを使用して、 範囲 (ピクセル単位)、 図心, バウンディングボックスパスの長さ 投影されたGeoJSON機能の(ピクセル単位):

この例は、ホバーされたパスの面積と長さを示しています。また、パスの図心とバウンディングボックスも描画します。

マップに線や円を追加する必要がある場合は、GeoJSONに機能を追加できます。

線はLineStringフィーチャとして追加でき、大きな弧(つまり、地球の表面を横切る最短距離)に投影されます。

ロンドンとニューヨークの間に線が追加された例を次に示します。

円の特徴は、d3.geoCircle()を使用して生成できます。これにより、円を表すGeoJSONオブジェクトを返す円ジェネレータが作成されます。

通常、中心([lon、lat])と半径(度単位)は次のように設定されます。

経度と緯度の線のGeoJSONグリッド(経緯線と呼ばれる)は、d3.graticule()を使用して生成できます。これにより、経緯線を表すGeoJSONオブジェクトを返す経緯線ジェネレータが作成されます。

(経緯線の構成の詳細については、公式ドキュメントを参照してください。)

線、円、経緯線が地図に追加された例を次に示します。

球面幾何学

時々役立つD3メソッドがいくつかあります。これらの最初の.geoArea()、. geoBounds()、. geoCentroid()、. geoDistance()、geoLength()は、上記のパスジオメトリメソッドに似ていますが、球形空間で動作します。

補間

d3.geoInterpolate()メソッドは、0と1の間の入力を受け入れ、2つの[lon、lat]位置の間を補間する関数を作成します。

GeoContains

キャンバス要素を使用してジオメトリをレンダリングしている場合、SVGパス要素にイベントハンドラーを追加できるという贅沢はありません。代わりに、マウスまたはタッチイベントがフィーチャの境界内で発生するかどうかを確認できます。これは、GeoJSON機能と[lon、lat]配列を受け入れ、ブール値を返すd3.geoContainsを使用して行うことができます。


コメント

こんにちは、私はフォローしました

こんにちは、上記の手順に従いましたが、地図を表示することができます。
パネルページに空白が表示されます。マップはレンダリングされません。ベースレイヤーすらありません。何が問題なのでしょうか?
要件モジュールの最新バージョンがあります


ウォークスルー:LeafletコントロールとBootstrapフレームワークを備えた主題図

このウォークスルーでは、このレッスンで学んだことのいくつかをまとめて、テーマ別のスタイル設定とリーフレットコントロールを含む包括的な情報マップを作成します。マップはBootstrapWebプレゼンテーションフレームワークを使用するため、見た目に美しい方法で補足コンテンツを拡張できます。選択したマップフィーチャの属性を読み取ることにより、このコンテンツの一部をその場で作成します。

この演習では、南アメリカのメトロデータを使用します。最終的なアプリケーションでは、ユーザーは任意のメトロをクリックして、Flickrからの情報テキストと画像を表示できます。静的な凡例画像もレイアウトに組み込まれます。

このレッスンは「マップ上のドットを超えて」と呼ばれますが、特に他のフレームワークと組み合わせた場合に、リーフレットを通じて提供される可能性を理解できるように、このウォークスルーのポイントデータを慎重に選択しました。この時点ではJavaScriptの第一人者のようには感じないかもしれませんが、少なくとも、インターネット全体で見られる「赤いティアドロップとポップアップ」のマッシュアップに甘んじる必要はないことを知っておく必要があります。

データをダウンロードしてレイアウトを調べる

    どこでも解凍します。必要に応じて、ファイルをJettyホームフォルダーに配置できますが、ウォークスルーではGeoServerを使用しないため、これは必須ではありません。ファイルには、凡例画像、メトロSVG画像、およびメトロの場所と属性のGeoJSONファイルが含まれます。また、以前のウォークスルーとは異なり、基本的なレイアウトマークアップを含むHTMLファイルをすでに提供していることにも注意してください。以下の手順で、マークアップの重要な部分のいくつかを調べます。また、JavaScriptを追加して、このアプリに活気を与えます。また、ファイルには前のレッスンで使用したようなstyle.cssファイルが含まれていますが、重要な変更点が1つあります。 マップの属性が固定の絶対ピクセル数から相対値(90%)に変更され、マップのdivセクションがこのウォークスルーで使用するBootstrapレイアウトテンプレートと連携するようになりました。
  1. Webブラウザでlesson8_walkthrough.htmlを開き、確認してください。まだマップがないアプリの空のシェルが表示されます。

JavaScriptを追加する前に、レイアウトで重要ないくつかのことを指摘しておきます。まず、以下の太線のJavaScriptファイル(.js)とCSSファイル(.css)への参照を通じてBootstrapがアプリケーションにどのように組み込まれるかに注目してください。 CDNからファイルを参照していますが、代わりに自分でファイルをダウンロードしてホスト(および微調整)することもできます。

&ltstyle&gtタグのスタイルシートオーバーライドにも注意してください。これにより、ページコンテンツがトップバナーにクラッシュするのを防ぐことができます。

Bootstrap(またはLeaflet)のデフォルトのスタイルが気に入らない場合は、スタイルシートのオーバーライドで変更を適用できます。

ページ本体で、クラスを使用してページをナビゲーションバー(navbar- *)、コンテナー(container-fluid)、およびスパンに編成する方法を確認します。 span5クラスとspan7クラスは、ページ領域の一貫した比率がマップ(左側)と補足資料(右側)に割り当てられるように、ページを垂直方向に分割します。この時点で、これらすべてのクラスを理解することについて心配する必要はありません。 BootstrapやDojoなどのWeb開発フレームワークでは、ブラウザ間で一貫して動作するようにページ要素を整理するためのCSSクラスが提供される場合があることに注意してください。

最後に、凡例の画像と「メトロをクリックしてください」というテキストがHTMLテーブルに整理されていることに注意してください。テーブルの境界線は、設計上非表示になっています。

divはFlickr画像を待っていますが、誰かが地図上のメトロシンボルをクリックするまで、これは表示されません。

それでは、JavaScriptコードを追加して、このアプリに息を吹き込みましょう。

JavaScriptロジックの追加

このアプリケーションでは、JavaScriptを使用して、マップの追加、シンボルの定義、クリックイベントの処理という3つの主要な処理を実行します。これらに順番に対処しましょう。

lesson8_walkthrough.htmlで、スクリプトタグを見つけます。すべてのコードは、&ltscript type = "text / javascript"&gtの直後に配置します。

次のコード行を追加して、マップと初期化関数を作成します。この関数には、レッスン7で見たものと同様に、選択を処理するために使用するいくつかの変数が含まれています。

を置き換えます。 。 。上記のコードでは、次のようになります。たくさんありますが、レッスンの前半でコードスニペットに注意を払えば、これらすべてはかなりなじみのあるものに見えるはずです。

あなたはmetroLayerがiconByPassdayとmetrosOnEachFeatureの2つの関数に依存していることに気づいたかもしれません。数分でそれらに取り組みます。しかし、最初に、レイヤースイッチャー。

を置き換えます。 。 。上記のコードで、レイヤースイッチャーコントロールをマップに追加するには:

さて、私が言及したそれらの機能について。最初のiconByPassdayは、各メトロシステムを通過する1日あたりの乗客数を調べ、使用するアイコンを決定します。これは、レイヤーを分類し、さまざまな色でシンボル化するための鍵です。を置き換えます。 。 。上記のコードでは、次のようになります。

次に、そのmetrosOnEachFeature関数について説明します。これはもう少し長いです。クリックイベントリスナーをメトロレイヤーに追加し、そのイベントを処理する関数を定義します。を置き換えます。 。 。上記のコードでは、次のようになります。

上記のコードコメントを調べて、各セクションの機能を理解してください。多くのコードがありますが、そのほとんどはメトロシステムを説明する情報HTMLを構築しています。属性テーブルは次のようになっていることを思い出してください。

上記のコードで参照されているこれらの属性フィールド名の多くに注意してください。フィールド値は、いくつかの特別な構文を使用して取得されます|| (JavaScriptでTRUEの最初のオペランドを返す論理OR演算子)属性が返されない場合にフォールバック値を設定します。関数の残りの部分は、必要に応じて属性を挿入して、いくつかのHTML文字列を作成します。 HTML文字列が作成された後、要素「summaryLabel」と「metroImage」のinnerHTMLが更新されます。これにより、新しいテキストと写真がページの右側に表示されます。

PHOTOフィールドは、ここでさらに説明する価値があります。このフィールドがアプリに写真を埋め込むために使用されることを想定して、iframeHTMLコード全体が長い文字列としてこのフィールドに配置されます。このようなデータセットを作成したい場合、このコードはどこで入手できますか? Flickrの埋め込み機能から直接:

最後に、選択をリセットするクリックイベントハンドラーをマップに追加します。これは、誰かが地図をクリックした場合に必要ですが、メトロアイコンはクリックしません。を置き換えます。 。 。上記のコードでは、次のようになります。

情報HTMLと写真もクリアするために、ここにいくつかのコードが追加されていることに注意してください。

Webブラウザでlesson8_walkthrough.htmlを開いて、アプリケーションをテストします。 (ファイルシステムから直接HTMLファイルを開く場合は、Firefoxを使用してテストすることをお勧めします。これは、ChromeとInternet Explorerのクロスオリジンリクエストセキュリティ実装では、両方をホストしている場合にのみGeoJSONの読み込みが許可されるためです。 Webサーバー上のHTMLファイルとGeoJSONファイル。)

異なるベースレイヤーを切り替えることができるはずです(以下に示すMap Questオープンレイヤーは使用できなくなっていることに注意してください)。メトロアイコンをクリックすると、強調表示された記号、Flickr画像、および説明テキストが表示されます。

ウォークスルーの最終コード

ウォークスルーが機能しない場合は、インターネットに接続していることと、コードが以下のコードと一致していることを確認してください。


8.6凡例の追加

8.6.1L.controlを使用した凡例の内容の設定

地図 伝説 マップ記号に表示されているすべてのカテゴリの意味を要約します。セクション6.8では、L.control関数を使用してマップの説明を追加しました。このセクションでは、同じ手法を使用してマップの凡例を作成します。凡例を作成するためのワークフローには、 カスタムコントロール L.controlを使用して、凡例コンポーネントを表すHTMLを入力し、CSSを使用してスタイルを設定して、コンテンツが画面に正しく表示されるようにします。次のコードセクションはそれをすべて行い、最後の例(example-08-04.html)の町の人口マップに凡例を追加します。

それで、私たちはここで何をしましたか?まず、カスタムコントロールオブジェクトのインスタンスを作成し、凡例という名前を付けました。位置オプションを使用して、マップの右上隅にあるコントロールを見つけました。次に、凡例コントロールの.onAddメソッドを使用して、凡例が追加されたときに関数を実行しました。この関数は、DOMに新しい&ltdiv&gtを作成し、「凡例」のクラスを与えます。これにより、CSSを使用して、.legendセレクター(セクション8.6.2)を使用して凡例全体のスタイルを設定できます。次に、セクション6.8ですでに行ったように、.innerHTMLメソッドを使用して、新しく作成した&ltdiv&gtにHTMLを入力します。

ほとんどのHTMLコードは第1章でおなじみのはずです。まだ見たことがない要素タイプの1つは&ltsmall&gtで、測定単位を表示するのに便利な比較的小さなテキストを作成するために使用されます(図8.7)。

凡例エントリのHTMLコードは、&ltdiv&gt要素を使用して凡例を描画します 記号、18pxの正方形の長方形です。各記号の後には、2090 +などのそれぞれのカテゴリのテキストによる説明が続きます。 &ltdiv&gt要素は、インラインCSS(セクション2.7.2)とbackground-colorプロパティ(セクション2.8.2.1)を使用して色付けされているため、このコンテキストで役立ちます。したがって、5つの&ltdiv&gt要素は、レイヤーシンボルに対応する色を反映します(セクション8.4.3)。たとえば、凡例の最初の色付きアイコン(濃い赤)を作成するHTMLコードは次のとおりです。

HTMLが追加された後、凡例全体の&ltdiv&gt要素がreturndivとともに返されます。最後に、.addToメソッドを使用して凡例がマップに追加されます。

上記のコードでは、凡例が生成されることに注意することが重要です。 手動で。つまり、凡例と地図記号(セクション8.4.3)の区切りと色は、コード内の2つの別々の場所で指定されています。マップの凡例のラベルと色が、レイヤーのスタイルを設定したものと実際に対応していることを確認するのは私たちの責任です。より一般的なアプローチは、凡例を生成することです プログラムでたとえば、マップ記号を設定するときに使用したのと同じブレークと色の配列を通過するforループを使用します(上記のセクション8.4.3)。これは、forループを使用した凡例定義の代替バージョンであり、セクション8.4.3で定義したブレークと色の配列83です。

この代替定義では、レイヤーのシンボルと凡例は、同じブレークとカラー配列に依存しているため、常に同期しています。このように、シンボルの変更(ブレークの追加、色の変更など)は、町のポリゴンの色と凡例のアイコンの色の両方に自動的に反映されます。

8.6.2CSSを使用した凡例のスタイル設定

凡例に関してもう1つ行う必要があるのは、CSSを使用して適切な配置と外観を与えることです。次のCSSコードは、凡例のスタイルを設定するために使用されます。

最初のCSSルールでは、.legendを参照して、凡例全体のプロパティを設定します。パディング、背景色、ボックスシャドウ、境界線の半径を設定しています。 2番目のルールでは、凡例シンボル(&ltdiv&gt要素)のディメンションを設定し、float:leftを設定して、シンボルが列に配置されるようにします。 float:leftプロパティ(セクション7.6.2)により、各凡例エントリの記号とテキストの説明が同じ行に並べて配置されます。最後に、3番目のルールは、ブラウザーのズームレベルに関係なく、凡例項目が正しく配置されていることを確認します。

町の地図の例-08-05.htmlは、現在は凡例が付いていますが、図8.7に示されています。

  • example-08-05.htmlのローカルコピーを作成します。
  • towns_color関数を定義するためのコードセクションを置き換えて、if / else条件の代わりにforループを使用します。代替コードのセクションはセクション8.4.3に記載されています。 forループに加えて、ブレークと色の配列定義を追加することを忘れないでください。
  • 凡例のHTMLコンテンツを生成するためのコードセクションを置き換えて、固定HTML文字列の代わりにforループを使用します。代替コードのセクションはセクション8.6に記載されています。
  • You should see few small differences between the ラベル of each color category in the legends of example-08-05.html (Figure 8.7) and your modified version. Can you figure out which parts of the code are responsible for those differences?

This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events.

Preparing your page

Before writing any code for the map, you need to do the following preparation steps on your page:

Include Leaflet CSS file in the head section of your document:

Include Leaflet JavaScript file Leaflet’s CSS:

Put a div element with a certain id where you want your map to be:

Make sure the map container has a defined height, for example by setting it in CSS:

Now you’re ready to initialize the map and do some stuff with it.

Setting up the map

Let’s create a map of the center of London with pretty Mapbox Streets tiles. First we’ll initialize the map and set its view to our chosen geographical coordinates and a zoom level:

By default (as we didn’t pass any options when creating the map instance), all mouse and touch interactions on the map are enabled, and it has zoom and attribution controls.

Note that setView call also returns the map object — most Leaflet methods act like this when they don’t return an explicit value, which allows convenient jQuery-like method chaining.

Next we’ll add a tile layer to add to our map, in this case it’s a Mapbox Streets tile layer. Creating a tile layer usually involves setting the URL template for the tile images, the attribution text and the maximum zoom level of the layer. In this example we’ll use the mapbox/streets-v11 tiles from Mapbox’s Static Tiles API (in order to use tiles from Mapbox, you must also request an access token). Because this API returns 512x512 tiles by default (instead of 256x256), we will also have to explicitly specify this and offset our zoom by a value of -1.

Make sure all the code is called after the div and leaflet.js inclusion.それはそれです! You have a working Leaflet map now.

It’s worth noting that Leaflet is provider-agnostic, meaning that it doesn’t enforce a particular choice of providers for tiles. You can try replacing mapbox/streets-v11 with mapbox/satellite-v9 , and see what happens. Also, Leaflet doesn’t even contain a single provider-specific line of code, so you’re free to use other providers if you need to (we’d suggest Mapbox though, it looks beautiful).

Whenever using anything based on OpenStreetMap, an attribution is obligatory as per the copyright notice. Most other tile providers (such as Mapbox, Stamen or Thunderforest) require an attribution as well. Make sure to give credit where credit is due.

Markers, circles and polygons

Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups. Let’s add a marker:

Adding a circle is the same (except for specifying the radius in meters as a second argument), but lets you control how it looks by passing options as the last argument when creating the object:

Adding a polygon is as easy:

Working with popups

Popups are usually used when you want to attach some information to a particular object on a map. Leaflet has a very handy shortcut for this:

Try clicking on our objects. The bindPopup method attaches a popup with the specified HTML content to your marker so the popup appears when you click on the object, and the openPopup method (for markers only) immediately opens the attached popup.

You can also use popups as layers (when you need something more than attaching a popup to an object):

Here we use openOn instead of addTo because it handles automatic closing of a previously opened popup when opening a new one which is good for usability.

Dealing with events

Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function. It allows you to react to user interaction:

Each object has its own set of events — see documentation for details. The first argument of the listener function is an event object — it contains useful information about the event that happened. For example, map click event object ( e in the example above) has latlng property which is a location at which the click occurred.

Let’s improve our example by using a popup instead of an alert:

Try clicking on the map and you will see the coordinates in a popup. View the full example &rarr

Now you’ve learned Leaflet basics and can start building map apps straight away! Don’t forget to take a look at the detailed documentation or other examples.


Click Events with Leaflet and geoJSON - Geographic Information Systems

Learn GeoJSON (and build cool collaborative datasets!)

Learn GeoJSON is a project to learn about the GeoJSON data format using git, GitHub, and geojson.io. It can be taught as a standalone exercise, or can be used to build real live collaborative datasets! There are a few in here to get you started.

The following sections are intended for absolute beginners. If you'e an intermediate or advanced user, great! Skip to the section where you're having trouble or need instructions.

The goal of this project is to build an awesome, collaborative map, showing off cool places, generated by the people who live in those places. It uses git for version control, GitHub to house the data, and provides editing examples using geojson.io, a great tool for editing GeoJSON files.

  • A tool to teach about GeoJSON, git, and GitHub in an easy and accessible way.
  • A way to learn about git and GitHub without using the command line.
  • A collaboration technique for building crowd-sourced geographic datasets.
  • A gentle introduction to GitHub for beginners.
  • A git tutorial / an overview of how to use git in the command line.
  • Comprehensive.
  • Scalable.
  • A silver bullet.

GeoJSON is an open and popular geographic data format commonly used in web applications. It is an extension of a format called JSON, which stands for JavaScriptオブジェクト表記。 Basically, JSON is a table turned on its side. GeoJSON extends JSON by adding a section called "geometry" such that you can define coordinates for the particular object (point, line, polygon, multi-polygon, etc). A point in a GeoJSON file might look like this:

GeoJSON files have to have both a "geometry" section and a "properties" section. The "geometry" section houses the geographic information of the feature (its location and type) and the "properties" section houses all of the descriptive information about the feature (like fields in an attribute table).

Git is a tool that allows multiple people to work on the same files at the same time without overwriting each other’s changes. This general concept is called version control, and git is a version control system。 There are several other version control systems out there, but git is popular because it does its job more efficiently than many (if not all) of the others.

In order for multiple people to work on a project, the data has to live in a place where multiple people can access it. GitHub is one of those places: the site houses thousands and thousands of projects, in individual workspaces called repositories、 また repos, that multiple people can access, copy, edit, and update using the tools available via git. (Guess what: You're inside of a repo right now!) These repositories also have a tracking element when someone makes a change to a project, or a commit, information is stored about the user, the time, the exact changes that were made (all the way down to the individual line inside the file!), and a unique ID that allows the project owner to restore back to that particular moment.

Why are we using GitHub and GeoJSON?

Tom MacWright over at MapBox has built an amazing, browser-based tool for editing GeoJSON files called geojson.io. Using some of the great tools available via MapBox.js, Leaflet, and some internal GitHub functionality, geojson.io allows users to easily edit and create geographic data in the browser.

素晴らしい! How do I contribute?

There are a few things that are required for you to contribute to this dataset. First of all, you need to make yourself a GitHub account, if you don't have one already. It's free and easy to set up, and should take less than five minutes.

I would also advise downloading git. Click the link and download the recommended version.

Beyond that, there are two main ways to contribute to this dataset: one is to edit existing files by adding points to them. The other is to add your own files to the repository and make them available for editing. There are step-by-step instructions for doing each of these, below.

These are the files that are currently in the repository and can be edited:


Introducing HumanGeo’s Leaflet Data Visualization Framework

At HumanGeo, we’re fans of Leaflet, Cloudmade’s JavaScript web mapping framework. In the past, we’ve used other JavaScript mapping frameworks like OpenLayers and Google Maps, and while these frameworks are great, we like Leaflet for its smooth animation, simple API, and good documentation and examples. In fact, we like Leaflet so much, we’ve been using it in all of our web projects that require a mapping component. Since Leaflet is a relative newcomer in the world of JavaScript mapping frameworks (2011), and since the developers have focused on keeping the library lightweight, there are plenty of opportunities to extend the basic functionality that Leaflet offers.

As a side project at HumanGeo, we’ve been working on extending Leaflet’s capabilities to better support visualizing data, and these efforts have produced HumanGeo’s Leaflet Data Visualization Framework. Before I delve into some of the features of the framework, I’d like to provide a little background on why we created the framework in the first place, in particular, I’d like to focus on the challenges that developers face when creating data-driven geospatial visualizations.

When visualizing data on a 2D map we often wish to illustrate differences in data values geographically by varying point, line, and polygon styles (color, fill color, line weight, opacity, etc.) dynamically based on the values of those data. The goal is for users to look at our map and quickly understand geographic differences in the data being visualized. This technique is commonly referred to as thematic mapping, and is a frequently employed technique used in infographics and for illustrating concepts related to human geography. Within the realm of thematic mapping, proportional symbols and choropleth maps are two widely used approaches for illustrating variations in data.

Symbol Styling Options

The proportional symbol approach highlights variations in data values at point locations using symbols sized proportionally to a given data value. In addition to varying symbol size, we can also vary symbol color or other style properties in order to highlight multiple data properties at each point. The image on the right shows some of the available style properties that we can vary for circle markers in Leaflet.

A good example of this approach is the USGS Earthquake Map, which by default shows earthquakes of magnitude 2.5 or greater occurring in the past week. This map denotes earthquakes using circles that are sized by magnitude and colored by age (white – older to yellow – past week to red – past hour). In an upcoming blog post, I’ll describe how we can use the Leaflet Data Visualization Framework along with USGS’ real-time earthquakes web service to easily reproduce this map.

Choropleth mapping involves styling polygons – typically country, state, or other administrative/political boundaries – based on statistical data associated with each polygon. In US election years, we see tons of maps and infographics showing breakdowns of voter preferences and predicted winners/losers by state, county, or other US political boundary. Infographics are becoming more and more popular, and there’s no shortage of news outlets like the New York Times, The Washington Post, and others producing maps illustrating various statistics at a range of administrative boundary levels. On the web, these choropleth maps are often custom developed, static or potentially interactive, single purpose maps that typically make use of a variety of frameworks, including more advanced all-purpose visualization frameworks like D3 rather than web mapping frameworks like Leaflet. This single purpose approach is not a problem when you’re using the map to show only one thing, but what if you want to show multiple data views or a variety of data on the same map? Nothing against D3 (which is awesome) or other general purpose visualization frameworks, but why would I want to learn the intricacies of some other framework in order to produce a choropleth map? If I’m already using Leaflet for all of my web mapping activities, why wouldn’t I use it for creating thematic maps?

Fortunately, Leaflet provides a number of built-in capabilities that enable creating thematic maps, including excellent support for GeoJSON and the ability to draw points using image-based, HTML-based, and circle markers as well as support for drawing lines and polygons and styling those features dynamically. There are a few tutorials on the Leaflet website that explain how to use Leaflet’s GeoJSON capabilities for displaying point, line, and polygon data and creating choropleth maps. I recommend checking these tutorials out if you’re interested in using Leaflet or want to better understand what capabilities Leaflet provides out of the box (screenshots of these tutorials plus links to the tutorials appear below).

Loading GeoJSON using Leaflet Creating a Choropleth Map using Leaflet

While Leaflet’s out of the box capabilities simplify thematic map creation, there are still several challenges that developers face when trying to create thematic maps using Leaflet or any web mapping framework for that matter, particularly when GeoJSON data is not available. The first challenge is a common one for developers – no standard format. The Internet is full of data that can be used to build thematic maps, but this data comes in a variety of formats (CSV, TSV, XML, JSON, GeoJSON, etc.). This makes building reusable code that works with and across most datasets challenging. The underlying issue here, and perhaps the main reason that data is and will continue to be created in a variety of formats, is that the people creating this data aren’t typically creating the data with geospatial visualization in mind, so there will almost always be some aspect of massaging the data so that it can be loaded and displayed using the desired mapping framework.

Mapping data on a political/admin boundary level comes with its own set of challenges. Often the data driving choropleth and thematic map visualizations related to political boundaries are numbers and categories associated with a code for a given boundary. These codes can include (among other options): two digit state code, Federal Information Processing Standard (FIPS) code, International Organization for Standardization (ISO) two or three digit country code, state name, country name, etc. This again comes back to the issue of a lack of standardization for country level statistics, for instance, you might see country name, two digit, three digit, numeric codes, or other codes being used across data providers. Very rarely are the geometries associated with each boundary included in the source data, and even more rare is pre-packaged GeoJSON that contains boundary polygons along with statistics as properties of each polygon. This introduces a challenge for developers in that we must find and associate boundary polygons with those boundary identifiers on the client-side or on the server in order to build a thematic map. On the client side, this may involve interacting with a web service (e.g. an OGC Web Feature Service (WFS)) that serves up those polygons, particularly in the case where we’re creating choropleth maps for lower level admin/political boundaries. In general, the two most common types of choropleth maps that people tend to create are country and state level maps. If I’m building a state or country choropleth, I’m probably going to be using all of the state or country polygons that are available, so making requests to a web service to get each polygon might be a little excessive. In addition, if we’re trying to display symbols based on state or country codes, we need the centroids of each political boundary in order to position each symbol correctly. This requires the need to calculate the centroid dynamically or to include it as a property of the boundary polygon.

In addition to challenges with data formats, there are often redundant tasks that developers must perform when creating thematic maps.これらには以下が含まれます:

  1. Retrieving data from a local/remote web server and translating those data into JavaScript objects
  2. Translating data locations into web mapping framework appropriate point/layer objects
  3. Dynamically styling point/layer objects based on some combination of data properties
  4. Setting up interactive features – handling mouseover and click events
  5. Displaying a legend to make it easier for the user to understand what’s being shown

In the grand scheme of things, these are not monumental challenges, but they do make the jobs of developers more difficult. HumanGeo’s Leaflet Data Visualization Framework helps to alleviate some of these challenges by abstracting many of these details from the developer. In particular, the framework seeks to:

  • Enable cool, interactive, infographic style visualizations
  • Support displaying data in any JSON-based data format (not just GeoJSON)
  • Eliminate redundant code/tasks related to displaying data
  • Provide tools for simplifying mapping one value to another (e.g. temperature to radius, count to color, etc.)
  • Standardize the way in which data are loaded/displayed
  • Minimize dependency on server-side components for typical use cases (e.g. visualizing data by US state or country)
  • Remain consistent with Leaflet’s API/coding style so that it’s easy to pickup and use if you’re already familiar with Leaflet

It wouldn’t be a proper introduction to a framework that’s all about visuals without showing you some sample visualizations, so here are a few example maps created using the framework to give you an idea of the type of maps you can create:

Election Mapping Country Level Data Display Ethnic Enclaves in New York City

In the next few blog entries, I’ll provide more details and examples illustrating how HumanGeo’s Leaflet Data Visualization Framework simplifies geospatial data visualization and thematic map creation. In the meantime, check out the code and examples on GitHub, and send me an e-mail if you’re interested, have questions, or want to contribute.