GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

Charlotte(シャーロット)2話に出てきた地図のleaflet版作った。

     - CSS, leaflet.js

  • このエントリーをはてなブックマークに追加

地理院地図……お前、地理院地図じゃないか!

charlotte Maps
というわけで、leaflet版作ってみました。
ズームもパンもできるよ!\(^ω^\)( /^ω^)/
ホントは地図の向きも合わせようかと思ったのですが、見づらくなるのと操作しづらくなるのでやめました。

example

一応、最新版のChromeとFirefoxで動作確認してます。IEもver.10なら動くみたいです。

制作委員会に怒られたら、やめるね!

解説

地図部分を透明色でくり抜いた画像をLeafletの上に重ねているだけです。
地図の奥行を出すのにCSS transformを利用しています。

css transform

example

地理院地図

正確には表示されているのは「電子国土基本図」です。
leafletで地理院地図を表示するのはとても簡単です。

これでいつでも念写三昧ですね!

 - CSS, leaflet.js

  • このエントリーをはてなブックマークに追加

  関連記事

turf.js along
[Turf.js]ラインに沿って任意の距離を移動する

example スライダーで選択した距離だけ各ライン上に沿ってマーカーが移動しま …

Japan Industrial Revolution data
「明治日本の産業革命遺産」のGeoJSONデータ

公開されていたKMLを変換してGeoJSONデータを作りました。 Gistに上げ …

手書き風地図
Leaflet.jsとD3.jsを使って手書き風の地図を表示する

実用性はありません。あとIEで動きません。 example スライダーを右に移動 …

turf and node test
[Turf.js]node.jsとturfで重い統計処理をバックエンドで行う。

example フロントエンドで行うには重い統計処理をバックエンドで行い、出力さ …

leaflet エリア選択
Leafletで任意のエリアを選択するUIプラグイン

いわゆる「Bounding Box」とか呼ばれる奴です。 example ホント …

d3leaflet2014051
【D3.js】 LeafletにSVGをオーバーレイする。

Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示す …

leaflet css filter
[leaflet]地図タイル画像にCSSフィルターを適用する

example こちらの記事では、重ねたレイヤーをCSSクリップを使って表示領域 …

turf hexgrid
[Turf.js]ヘックス(六角形)で統計情報を地図上に視覚化する

example 表示されている範囲内にヘックス(六角形)を敷き詰め、各セルに含ま …

Leaflet.jsで作成した地図上にお天気情報をオーバーレイする
Leaflet.jsで作成した地図上にお天気情報をオーバーレイする

以前、「Google Map上に雲と天気を表示する」という記事を書きましたが、残 …

turf Aggregation example
ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」

選択した範囲内の家賃相場を求めるとかいろんなことに使えます。 example T …