Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita
はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはこちら サンプルコードはこちら 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・加工等して利用する場合の記載例）「新宿駅周辺屋内地図データ」（国土交通省）（https://www.geospatial.jp/ckan/dataset/mlit-i
Visualizing TSNE Maps with Three.js
For the last year or so, Yale’s DHLab has undertaken a series of experiments organized around analysis of visual culture. Some of those experiments have involved identifying similar images and visualizing patterns uncovered in this process. In this post, I wanted to discuss how we used the amazing Three.js library to build a WebGL-powered visualization that can display tens of thousands of images
ソースマップの自作は割とコワくない。 - Qiita
「めんどくさそう」先入観で敬遠していたのですが、仕様を見たらそんなでもなかったので書き残しておきます。手っ取り早くコードを見たい方はこちらをどうぞ。 ユーザとして、ソースマップに接する機会は多いですが、AltJSを作るとかでもない限り、あまり提供側に回ることはないかもしれません。私自身、次のような疑問というか誤解を抱えたまま、深入りしなかったクチです...。 誤解1: ソースマップを作るにはASTを作る必要がある → 実際はもっとシンプル 誤解2: なんかすごいエンコード(AAAA;AACA;AACA;AACA...)がされてる → ただのBase64 よく見かけるソースマップの説明記事(というほど、記事自体ないけれど)では、「ソースを構文解析してASTを構築して...」という手順が出てくるのですが、 ソースマップにASTは必要ありません。 もちろん、実際にAltJSを作るならASTの作成
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
位置情報の取得とWebSocketによる送信 [Geolocation APIとwebsocket-railsによる位置情報通知アプリ #1] | DevelopersIO
はじめに ブラウザにて位置情報を取得し、その情報を別のクライアントへPush通知する処理の サンプルをRuby on Railsで作成してみました。 なんらかの業務で、ある社員が持つ端末より位置情報を取得し、本社側でリアルタイムで その情報を把握する、というような用途を想定しています。 アプリの機能としては JavaScriptにて、Geolocation APIを使用して位置情報を取得する websocket-railsを使い、WebSocketでサーバ側へ送信する サーバ側は、受け取った位置情報をwebsocket-railsを使い、別画面へPush通知する の3つに分けることができます。 これらの機能を実装するポイントについて書いていきたいと思います。 今回は、1.と2.についてです。 Geolocation APIを使用して位置情報を取得する 位置情報の取得は上記に書いた通り、Ja
![位置情報の取得とWebSocketによる送信 [Geolocation APIとwebsocket-railsによる位置情報通知アプリ #1] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b4922b5389542c8e96eeab21022cc4f7d02b2380/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Frails.jpg)
jQuery Mapael·jQuery x Raphaëlな地図描画ライブラリ MOONGIFT
JavaScriptと連携できる地図が欲しかった方は要チェック！ Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaëlです。そんなRaphaëlをjQueryベースで使えるようにしたプラグインがjQuery Mapaelになります。地図に限定されますが、SVGで描かれた地図に様々な情報を付与したりJavaScriptと連携させることができるようになっています。 実際の例としてはフランスの地図を扱ったものが多くなっています。 マウスオーバーでハイライトされます。 さらにズームもできるタイプもあります。この辺りはSVGならではと言えるでしょう。 JavaScriptと連携させることでクリックイベントをキャッチできるようになっています。 人口の多い町や都市を描いています。こういった外部データとの連携も容易です。 最後はフランスではなく世界地図のデモです。 国ごとにデータを色分け
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
震源地の推移
このページについて 震源地の推移をアニメーションします． から までのデータを表示可能です． マーカーの大きさはマグニチュードに比例，するんじゃなくて，マグニチ ュードを m とすると，「マーカーのサイズ = 5 * 1.5m」としてい ます．1.5 にはあんまり意味が無くて，それっぽく見えるサイズを調整しました． 深さを色（白黒）で表しており，浅い（0km）と白く，10km 刻みでだん だん暗くなっていき，深い（90km 以上）と黒くなります．深さが公開されてい ないデータがあったんですが，面倒なので 0km として扱っています．なので， 白が目立つかも． 震源地のデータはhttp://tenki.jp/earthquake/で公開 されている，震源地が明らかなデータを利用させて頂きました．いい加減に抜き 出しているので，間違いなどあるかもしれません．また，多分発生時の発表デー タなので
ASCII.jp：Googleマップ＋jQueryで作るAjaxなデザイン｜29分でできる！ あのサイトの“技”を盗め
今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。 コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。 一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。 今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。 今回のお手本サイト： 『hitotoki―町の文学地図』 「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型の
市町村変遷パラパラ地図
版別に探す 完全版 樺太｜ 北海道｜ 青森県｜ 岩手県｜ 宮城県｜ 秋田県｜ 山形県｜ 福島県 茨城県｜ 栃木県｜ 群馬県｜ 埼玉県｜ 千葉県｜ 東京都｜ 神奈川県 新潟県｜ 富山県｜ 石川県｜ 福井県｜ 山梨県｜ 長野県｜ 岐阜県｜ 静岡県｜ 愛知県 三重県｜ 滋賀県｜ 京都府｜ 大阪府｜ 兵庫県｜ 奈良県｜ 和歌山県 鳥取県｜ □島根県｜ 岡山県｜ 広島県｜ 山口県｜ 徳島県｜ 香川県｜ 愛媛県｜ 高知県 福岡県｜ 佐賀県｜ 長崎県｜ 熊本県｜ 大分県｜ 宮崎県｜ 鹿児島県｜ 沖縄県 □は外部リンク、リンク先の方の作成（□:DMさん） 簡易版 北海道｜ 青森県｜ 岩手県｜ 宮城県｜ 秋田県｜ 山形県｜ 福島県 茨城県｜ 栃木県｜ 群馬県｜ 埼玉県｜ 千葉県｜ 東京都｜ 神奈川県 新潟県｜ 富山県｜ 石川県｜ 福井県｜ 山梨県｜ 長野県｜ 岐阜県｜ 静岡県｜ 愛知県 三重県｜ 滋賀県｜
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Maps, Maps, Maps!
http://www.playfuljs.com/demos/terrain/
日本全国花粉飛散マップ Pollen Map in Japan - ICS