Google Maps API

この記事は ケーシーエスキャロット Advent Calendar の記事です。 WMS とは、地図画像配信方式の一つです。 表示したい地図範囲を指定すると、その範囲を切り取った画像が返ってくるという方式でデータの配信を行います。 地理院地図｜地理院タイルについて これを Google Map 上に表示してみよう、というのが今回の内容です。 WMS の API 仕様 今回利用しようと思っているWMSのAPIは、大体以下のような仕様とします。 範囲指定： 左下（南西）と右上（北東）の緯度経度を指定（世界測地系） サイズ指定： px単位 Google Map 上に画像を表示する方法 まず Goog…

ブレインパッドの社員が「数理最適化技術」に関して連載するこの企画。 第6回は、当社のデータサイエンティストが、最適化ツールを使って、「1日でできるだけ多くの京都の観光地を巡る」という問題を解いています。 こんにちは、データサイエンティストの田中です。 最近は金融系のお客様のもとで常駐しながら分析を行ったり、新卒研修に携わったりしています。あと先月から、ちょっとお高いお米を買うようになってQOLが爆上がりしました。たったの数百円で毎日幸せを感じられるので、マジでおすすめです。 さて、今日はOR-Toolsという最適化ツールをご紹介し、いくつか実践的な制約を入れた巡回セールスマン問題を解いていきま…

概要 全国の松屋をマッピングしたくなったのでやってみた。 Yahoo! ローカルサーチAPIを叩いて、松屋の店舗一覧をざっくり取り出せた（※完全ではないけど、趣味なのでその程度の精度でいいってことにする）。この方法は別に松屋に限ったものではないので、他の様々なチェーン店等のデータ抽出にも応用できる。 GISで他のデータに重ねて遊べる。「標高が1番高い松屋」とかがわかる。松屋は都市部中心に立地しているので標高が低い場所にあるものが大半であり、標高が高い松屋は山梨・長野らへんに集中している。 概要 手法検討 Yahoo! ローカルサーチAPIを叩く 遊ぶ ＜追伸＞ 手法検討 全国の松屋（系列店を含…

もともと google-map-react を使っていたのを @react-google-maps/api に変更。 google-map-react はダウンロード数が多く、当初必要だった要件を満たしそうだったので導入したものの、デフォルトのマーカーへの変更を考えたときに、 new maps.Marker({ position: { lat, lng } map, }) のようにライブラリを直接呼び出す必要があり、Reactっぽくなく使いにくかった。 クリックイベントも取得しにくいので、他ライブラリを調査することに。 google-maps-react というそっくりな名前のパッケージもあっ…

「Leaflet」を使えば、「Google MAPS API」なしで「Google マップ」が使える。

昨日、「Leaflet」を使って「OpenStreetMap」「国土地理院」「Esri World Topo Map」の地図表示を試した。 「Leaflet」を使えば、「Google MAPS API」なしで「Google マップ」が使える。APIキーも要らない。 地図オブジェクトを生成して「Google マップ」の画像タイルを読み込むだけ。 var map = L.map('map'); var tileLayer = L.tileLayer('https://mt1.google.com/vt/lyrs=r&x={x}&y={y}&z={z}', { attribution: "<a hr…

先ほど、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試してみた。 以前作成した「Google Maps API」を使った「日本三百名山マップ」は、Googleの規約変更により地図が表示されなくなっている。 今回、「Leaflet」と「OpenStreetMap」を使って、「日本三百名山マップ」を作成した。 【4/29追記】初期表示を「Google マップ」に置き換え。 マーカーをクリックすると、ポップアップが表示される。標高や都道府県名などが表示される。山名をクリックするとGoogle検索画面が開く。緯度経度をクリックするとGoogleマップが開く。 「Op…

地図情報を扱うサービス「Google Maps API」が無料では使えなくなり、「Yahoo! JavaScriptマップAPI」もサービス提供が終了し、以前「Mapbox GL JS」を試してみた。 今回、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試してみた。 「Leaflet」は、地図データを扱うためのJavaScript ライブラリ。「OpenStreetMap」は、OpenStreatMap財団が「Open Data Commons Open Database License (ODbL)」 の下にライセンスするオープンデータ。いずれも無料でかつA…

js-api-loaderを使います。 www.npmjs.com Vueの公式ドキュメントだと、google-maps-api-loaderが使われていますが、3年位更新されていません。 npmのページにいくと、js-api-loaderが推奨されています。 vuejs.org Google map導入 まずは、完成形から。 [GoogleMap.vue] <template> <div> <div id="map" style="width: 500px; height: 300px" /> </div> </template> <script lang="ts"> import { Lo…

お疲れ様です！ 今日はREADME.mdにアプリケーションの機能などを追加で記述していました。 ある程度記述後は地図機能の実装です！ あと、もう一歩でルート検索機能が実装できそうなんですが中々うまくいきません！ 今まで教材上で学んできたことってわかりやすかったなと感じます。 自分から新しい技術を学びにいこうとするとかなり難しく感じます！ 特に今google maps apiを使ってアプリの方を実装していますがとりあえず公式ドキュメントを読み進めながら作業してきましたが地図の表示と検索後該当箇所にピンを立てるだけでかなり時間がかかってしまいました。 とりあえずjavascriptのコードが少しあ…

今日はターミナル操作について復習しました。 僕は今まで、生きてきて初めてターミナルというアプリケーションがあるということを知りました。 ターミナルとは何かという話ですが簡単に説明するとPCに命令をすることができるツールのことです。 初めて知った時はだから？という感じでしたが普段から僕はパソコンに命令しながら仕事をしていたことを初めて説明を聞いて知りました。 特に使っていたのがGUI(グラフィカルユーザインターフェース)というものでグラフィックを用いて操作を行う仕組みのことです。 例えばマウスでファイルをダブルクリックして開くなど。 でターミナルではその逆であるコマンドライン (または コマンド…

お疲れ様です！ 今日はAction Cableを用いた、リアルタイムチャットアプリを作成と転職活動時にアピールになるかもしれないオリジナルアプリの作成をしていました！ まずAction Cableについてです。 Railsのアプリケーションと同様の記述で、即時更新機能を実装できるといったフレームワークです。実装内容としては、メッセージの保存や送信に必要なRubyのコーディングと、保存したメッセージを即時に表示させるJavaScriptのコーディングを行いました。 また、Channelをという仕組みを使ってデータの経路を設定したりします。 Channelを作成後stream_fromメソッドのコ…

位置情報系の分析をしていると、店舗などの住所情報を緯度経度に変換したいケースがあるかと思います。今回は2020年12月にリリースされたAWSの位置情報サービスであるAmazon LocationをPythonから操作することでテキストの住所から緯度経度情報を取得してみました。 Amazon Locationとは Amazon Locationとは、2020年12月にリリースされたAWSの位置情報サービスです。Amazon Locationは現時点(2021.03)では以下4つの機能を使うことができます。 Maps Place indexes Geofence collections Track…