技術 - 地図の記事一覧
Prefectly - 使おう！WebFontとCSSを使った日本地図
誰かが作ってくれると思っていた！Stately
Maplace.js - 軽量なjQuery × Googleマップライブラリ
Googleマップをプログラマブルに組み込むのに良さそうです。GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は...
Winston-Salem Crime Map – 地域の犯罪情報を地図上にマッピング
こういうのは日本でも登場して欲しい！スマートフォンは普段からずっと身につけていますので生活に密着した情報をチェックするのに役立ちます。それは良い情報はもちろん、悪い情報についてもそうです。Winston-Salem Crime Mapはウィンストンセーラムの犯罪情報を地図にマッピングして表示してくれるアプリになっていま...
jQuery Mapael – jQuery x Raphaëlな地図描画ライブラリ
JavaScriptと連携できる地図が欲しかった方は要チェック！Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaël;```といった感じに呼び出すだけです。とても手軽ですね。Alternative contentというコンテンツがある通り、クローラーやJavaScript非対応の場合は別なコンテンツを...
PlanningPress – 交通計画情報用のWordPressテーマ
この仕組みは他でも使えそうですよ。新しいWebサイトを作る際にWordPressをベースにするといったケースは多いかと思います。とは言え全てのケースに当てはまる訳でもありません。そこで無理に投稿やページで解決しようとするならば、PlanningPressの仕組みを学ぶ方が良さそうですよ。!インストールしました。左側にE...
東京風速 - ぜひ見て欲しい！地図に風速情報をマッピング
もうずっと見ていたくなりますね。言葉で言うよりもまず動画を見てもらった方が早いと思います。ということで下記をまずご覧あれ。東京風速では現在の風速データを東京都環境局環境改善部大気保全課（な、長い…）から取得し、東京都の地図にマッピングしています。風の線が無数に描かれ、滑らかに移動していく様は見ていていやしすら感じられそ...
二点間の移動ルートを表示「iOS-Routing」
iOS-RoutingはiOS用のオープンソース・ソフトウェア（GPL）です。地図アプリは便利です。良く使うのが今いる場所から別な場所までどういったら良いか調べるといった操作ではないでしょうか。その実装例とも言えるアプリがiOS-Routingです。起動するとまず位置情報取得の確認が行われます。東京駅から東京タワーまで...
2013/08/07
お出かけ前、中、後のいつでも役立つ地図ソフトウェアを一気に紹介！
今回はこれからの夏の旅行に先駆けて役立つソフトウェアを一気にご紹介します。地図系ソフトウェアは人気が高く、多数ありますので今回はジャンルを分けて紹介しています。
Web Fontの新しい使い方！US地図をWeb Font/CSSで表現「Stately」
StatelyはWeb Font/CSSを使ってUS地図を表示するソフトウェアです。地図（ここではUS）をWeb上に描こうと思った場合、SVGを使ったり画像を使うのが一般的です。しかし今回は一風変わったやり方、Web Fontを使ったStatelyを紹介します。デモです。このアメリカの地図がフォントで作られています。一...
iOSのマップアプリ風に現在位置を目立たせる「GeoLocateMe」
GeoLocateMeはiOSのマップアプリ風に現在位置を表示するWebアプリケーションです。iOSのマップアプリで自分の位置を表示すると、中央にマーカーが出てきて周囲にソナーのような波紋風のイフェクトがかかります。それを模したソフトウェアがGeoLocateMeです。最初に位置情報取得の確認がされます。丸い円が広がり...
みんな作るシティーマップ「Majuro.js」
Majuro.jsは近所の説明などを加えるオープンな地図データプラットフォームです。OpenStreetMapでは道路や建物などの外観を共有していますが、より具体的に街を表現するのに使えそうなのがMajuro.jsです。実例。建物などが分かりやすくなっています。写真の貼付けもできます。こちらは編集画面。まず表示したい地...
OpenStreetMapをWeb上でメンテナンス「iD」
s2If current_user_canMOONGIFTはこう見るOSMの編集ツールは幾つかあるのですが、基本的に使い勝手があまり良くありません。スマートフォン向けアプリでは小さいものが多いですし、専用ソフトウェアをダウンロードさせるのは敷居が高いです。Web、しかもデスクトップのブラウザを使うのは利点があると思われ...
iOS6になってもGoogleマップを使いたい方はこれ！「ClassicMap」
ClassicMapはiOS5当時のマップアプリを彷彿とさせる地図アプリです。Googleマップを使えます。ついにAppleがiOS6のマップについて謝罪し、サードパーティのマップアプリをお勧めするようになりました。しかしみんなが欲しいのはiOS5以前のマップアプリではないでしょうか。そこで使ってみたいのがClassi...
iOS6の地図上にGoogleマップをオーバーレイ表示「GoogleMapsOverlayiOS」
GoogleMapsOverlayiOSはiOS6のMapKitの上にGoogleマップをオーバーレイするライブラリです。iOS6になって最も不評を買っているのがマップアプリでしょう。デフォルトのマップビューを使うとOpenStreetMapベースになってあまりにも使い勝手が悪くなる…そう考える開発者の方はGoogle...
SVGを用いたリサイズ対応の地図「jQuery Vector Maps」
jQuery Vector MapsはSVGで描かれた地図です。JavaScriptとの親和性が高いです。HTML5から標準に取り入れられた技術の一つにSVGがあります。IllustratorなどもSVGで出力できますが、まだまだ利用範囲は広くありません。そこでSVGを使ったデモとしてjQuery Vector Map...
Google Earthライクな3D地球ビューワー「EarthView」
EarthViewはGoogle EarthライクなiOSモックアップアプリです。iOS6において標準のマップアプリが3D化に対応します。Googleもまた、地図の3D表示をサポートするなど平面だった地図を立体にする動きが盛んです。自分でもそんなアプリを…と考える人はEarthViewを参考にすると良さそうです。起動時...
Googleマップをもっと簡単に使おう「gmaps.js」
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。イ...
GoogleストリートビューをWebGLで「WebGL Google Street Viewer」
WebGL Google Street ViewerはWebGLを使って作られたGoogleストリートビュービューワーです。Googleストリートビューはとても面白いサービですが、Flashで作られているのが珠に傷です。そこで使ってみたいのがWebGL Google Street Viewerです。WebGLを使ってG...
MapCSSに対応したiPad向けOpenStreetMapビューワー「MapCSS」
OpenStreetPadはOpenStreetMapに対応した地図表示のiOSアプリです。MapCSSに対応しています。ここ最近OpenStreetMapを使ったサイト、サービスが増えてきています。そこで自分のiPadアプリにもOpenStreetMapを組み入れたいと思ったならば参考にしたいのがOpenStreet...
- 2012/04/13
最近話題のOpenStreetMapって何だ？関連ソフトウェア×14選
最近何かと話題のOpenStreetMap（OSM）。オープンな地図を制作するプロジェクトですが、今回はそんなOpenStreetMapを採用している例やその特徴および関連オープンソース・ソフトウェアを紹介します。