地図アプリの開発を爆速化する「Webマッピング」サービスの活用術を大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、地図上にデータをマッピングすることで、さまざまな情報を「見える化(可視化)」できるWebサービスの活用法についてご紹介しようと思います！ マッピングが出来るようになると、単なる「データの集まり」だったものが視覚的にとても分かりやすくなるので非常に便利です。 誰でも簡単に扱える定番のマッピングサービスから、地図アプリなどの開発に役立つモノまで取り上げてご紹介しようと思います。 ちなみに、マッピングをするのに必要な「データ」に関しては、無償で利用できるオープンデータをまとめたサイト「LinkData」に公開中のモノを利用しているので、みなさんもぜひ一緒にトライしてみてください！ ■「Googleマイマップ」を活用しよう！ まずは、誰でも扱いやすいGoogleの「マイマップ機能」を使って、簡単なマッピングに挑戦してみましょう！ データは、Li
地図タイルについて - smellman's Broken Diary
どうも、生きてます。 今回はFOSS4G Advent Calendar 2015 (1個目)の最後となる記事です。 今回書く内容はタイトルどおり、いまさらだけど地図タイルについていろいろ解説して実際に実装をしてみようというものになっています。 地図エンジニアで無い人でも興味を持っていただき、沼感を感じていただけたらと思います。 なお、先に書いておくと精度とかそういう話はほっておいてるので非常に雑です。 地図タイルって何？ まずは基本となる地図タイルについてご紹介します。 そもそも地図を使ったクライアントソフトウェアとしては古くからGIS(Geographic Information System)という種類のソフトが多く開発されていました。 私も大学生の時に留年して半年間休学していた間だけとある地図会社でアルバイトで実際にVisual BasicでGISの開発をしていました。 2002年
旅行ルート、ビッグデータマップ、ファイアマップ等、独自Mapを作るためのフリーツール
10 Free Tools for Creating Your Own Maps – WebDesignFlip というわけで今回は、無料で色々なMapデータを作成することが出来るツールをご紹介。 こちらで紹介されている、実際に昔に使ったことがあるものや、紹介されているサービスを使ってみて、よさ気なものをピックアップする。 各種フリーマップエディタ GeoCommons 触ってみたけど、やすい、作りやすい。 Mapを作るとき、そのスタート時間を設定することになる。これは、旅行や、プランの作成などで、ルートと写真、コメントをシェアするために作ることを目的としているからです。 なので、ルート案内や、写真の埋め込みなどを作るなら抜群の使いやすさとなっている。 画像のアップロードに関しては、ログインしてから、Mapを作成→一度保存を行ってからする必要がある。 Draw On Maps and Ma
Google Maps JavaScript APIの使い方まとめ
公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用
富豪実装なJavaScriptジオコーダーを作ってみた - Qiita
※ npmを使わず、スクリプトとデータを直接ダウンロードすることもできます。 Nodeでの利用は、こんな感じ。OSCでよくお世話になる、明星大学のキャンパスの緯度経度を出してみます。 var tokoro = require('tokoro') tokoro('東京都日野市程久保2-1-1', function(code) { if (code) { console.log('緯度', code[0]) // 35.64564 console.log('経度', code[1]) // 139.40688 } else { console.log('見つからないよ!') } }) 同じように、フロントエンドのJavaScriptからも使えます。Nodeの場合と違い、データの格納場所を変更できます。デフォルトは node_modules/tokoro/dataですが、任意の場所に置いて構いま
初めて地図周りの技術に触れた時に作ったまとめ資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 関連して以下も参考にしてください GoogleMapのオープンソース版地図アプリ（OSRM）のインストール - Qiita 住所（市区町村番地）から緯度経度を取得する - Qiita まとめたこと やりたい事ベースでざっくり分類 住所（地名） ⇔ 緯度/経度変換 地図上への位置情報のプロット 距離計算・ルーティング（緯度経度計算、2点間の距離を計測） 詳しく 住所（地名） ⇔ 緯度/経度変換 住所（地名）→緯度/経度の変換はジオコーディング(Geocoding)と呼ばれる。 （昔はアドレスマッチングとも呼ばれていたらしい） 緯度/経度→
Isomorphic Google Maps, MyScriptJS
Isomorphic Google Maps Ivan Starkov sent in an isomorphic Google Maps component for React (GitHub: istarkov/google-map-react, License: MIT, npm: google-map-react). It provides several useful features, including rendering any React component over maps, lazy loading of the Google Maps API, and isomorphic rendering. By rendering maps on the server, you can improve search engine visibility, and render
ここ最近のWeb地図周辺の動向をまとめてみた
Web地図の歴史というのは Google Maps 登場以前と登場後に分けられるのですが、2015年現在、まさにGoogle Maps登場と同じぐらいの変革がWeb地図の世界に訪れているのではないか？ と勝手に思っているので自分の観測範囲内でまとめてみました。 概要 簡単に要点をまとめると、CanvasとかSVGとかWebGLとかブラウザ周りの表現力の進化がWeb地図にも影響を及ぼしていて、そこにGeoJSONのようなそれまでGISなどに疎かったフロントエンドエンジニアにも気軽に扱うことができるフォーマットが普及し始めたことと、降って湧いたようなデータビジュアライゼーションブームなどによって爆発的にエコシステムが増殖し、さらにフロントエンド回りの新技術、仮想DOMとか Web Components とかFRPだとかもろもろいろいろ絡まってよくわからないけど地味に凄いことになっています。 G
新しい地理院地図のソースコードがGitHubに公開されていたので、Fx0(FirefoxOS)にアプリとしてインストールしてみた。
国土地理院、「地理院地図」がスマホ対応、「触地図」特設サイトや西之島のGIFアニメも登場 スマートフォンやタブレット端末に対応して使いやすくなった地理院地図ですが、そのソースコードがGithubにて公開されています。 gsi-cyberjapan/gsimaps (利用する場合の注意点については、README.mdを参照ください) すごい……すごいぞ国土地理院！ これで、誰でも自分専用の地理院地図を作って利用することができますね！ すでに「地図タイルを追加する方法」を書かれている方も。 地理院地図に地図タイルを追加して公開する方法 そこで自分も、最近買ったばっかりのFx0に地理院地図をアプリとしてインストールしてみました。 やったこと 下記からzipファイルをダウンロード。 gsi-cyberjapan/gsimaps １．Firefox Developer EditionのWebIDEで
Google Mapsの地図に目的地までのルートをJavaScriptで描画する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンジニアのおじいちゃんです。 今回は、任意で入力した場所から指定された場所までのルートをGoogleマップに描画する方法を紹介したいと思います。 Googleマップ描画 サンプルとして、任意に入力した場所からLIGまでの、徒歩でのルートを描画することにしたいと思います。 まずは通常のGoogleマップを設置します。 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js/sensor=TRUE"></script> <div id="map_canvas" style="width: 800px; height: 600px;"></div> <div class="searchBox"> <form> <input id="mapSearch" type="text"> <
Mixing maps and WebGL to visualize huge geo datasets
Product updates, customer stories, and tips and tricks on Google Maps Platform Just like you’d expect from a Maps Layer you can now load in data. WebGL Layer uses GeoJSON as a data source, but you can extend this as you wish. You can use GeoJSON from your application or GeoJSON from an external source. There’s also support for Vector Tile Servers. As WebGL Layer is designed to display huge amounts
Google Maps API v3を使ってウェブサイトやブログに地図を表示する
Google Maps API v3を使ってウェブサイトやブログに地図を表示する方法を紹介します。 本エントリーではGoogleマップの基本的な表示するために必要な、下記の手順について説明します。 APIキーの取得 Googleマップの表示 中心地点の設定 縮尺の設定 １．APIキーの取得 Google APIコンソールのページを開いて、Google アカウントでログインし、表示された画面の左メニューにある「APIs & auth」をクリック。 APIの一覧が表示されるので、「Google Maps JavaScript API v3」の右側にある「OFF」をクリック。 サービス利用規約に同意する場合はチェックボックスをチェックして「Accept」をクリック。 （クリックで拡大） 「Google Maps JavaScript API v3」のSTATUSが「ON」になったことを確認。 「
Googleとの比較で学ぶYahoo!マップAPIの使い方 (1/3)
Yahoo! JAPANが提供している地図サービス「Yahoo! Open Local Platform（YOLP）」の「JavaScriptマップAPI」（以降は「Yahoo!マップ」と表記します）について、前回に続きGoogle Maps APIと比較しながら解説します。基本的な地図の表示、マーカーやクリックイベントの設定方法は前回紹介しましたので、今回は、地図の移動やズームレベルの変更方法、地図上への多角形の描画方法を解説します。 地図を移動させる 最初に、指定した緯度・経度の場所に地図を移動させてみましょう。地図の移動は、GoogleマップもYahoo!マップもマップオブジェクトのpanTo()メソッドを使い、移動先の緯度・経度を示すオブジェクトを引数に指定します。 Yahoo!マップの場合は、panTo()メソッドの第2引数にアニメーションフラグを指定できます。trueならアニメ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SmartNavi by Christian Henke - Experiments with Google
Draw Your Own Election Adventure
PubNub Developers: Build Powerful Real-Time Apps Easily
How Tall is That Gantry? - bellingcat
Launchpad Online: Accessing Google Maps from a spreadsheet?!?