G空間APIと地図ライブラリの紹介

■Geospatial Hackers Program 東海 - connpass - https://ghp.connpass.com/event/157260/
■ HACK THE TOYOTA公式ページ - https://hackthetoyota.createfuture.biz/

#geohack

Transcript

1. © 2020 shinji ichien G空間APIと 地図ライブラリの紹介 一円 真治 @1coin178 ヤフー株式会社 2020.2.1 Geospatial Hackers Program 東海
2. © 2020 shinji ichien My Profile • 一円 真治 - Shinji Ichien • Twitter: @1coin178 • Yahoo Japan Corporation • Enginner / Yahoo!地図
3. © 2020 shinji ichien (作る)開発しているサービス
4. © 2020 shinji ichien 地図とカーナビ https://play.google.com/store/apps/details?id=jp.co.yahoo.android.apps.map&hl=ja https://carnavi.yahoo.co.jp/promo/
5. © 2020 shinji ichien G空間情報を扱うAPI を公開しています
6. © 2020 shinji ichien https://map.yahoo.co.jp/promo/yolp/
7. © 2020 shinji ichien 15+ API 地図SDK
8. © 2020 shinji ichien やりたいことを 逆引きする形で紹介
9. © 2020 shinji ichien 基本、REST形式の Web APIです
10. © 2020 shinji ichien 地理空間 検索
11. © 2020 shinji ichien 全国の店舗、イベント、クチコミ情報などの地域・拠点情報を検索したい Yahoo!ローカルサーチAPI https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html 例: 名駅1km以内のラーメン https://map.yahooapis.jp/search/local/V1/localSearch?appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bWVyc2VjcmV0Jng9MzA -&query=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3&lat=35.170915&lon=136.881537&dist=1&output=json 1/8
12. © 2020 shinji ichien 住所の緯度経度を知りたい Yahoo!ジオコーダAPI https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/geocoder.html 例: 「愛知県名古屋市中村区名駅1-1-4」 https://map.yahooapis.jp/geocode/V1/geoCoder?appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bWVyc2VjcmV0Jng9MzA-&qu ery=%E6%84%9B%E7%9F%A5%E7%9C%8C%E5%90%8D%E5%8F%A4%E5%B1%8B%E5%B8%82%E4%B8%AD%E6%9D%91%E5%8C%BA% E5%90%8D%E9%A7%851-1-4%20JR%E3%82%BB%E3%83%B3%E3%83%88%E3%83%A9%E3%83%AB%E3%82%BF%E3%83%AF%E3%83 %BC%E3%82%BA&output=json 2/8
13. © 2020 shinji ichien 緯度経度が示す住所を知りたい Yahoo!リバースジオコーダAPI https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/reversegeocoder.html 例: 「35.17071011,136.88254467」-> 「愛知県名古屋市中村区名駅１丁目１－４」 https://map.yahooapis.jp/geoapi/V1/reverseGeoCoder?lat=35.17071011&lon=136.88254467&appid=dj00aiZpPXF3a25mWGUyOUlray ZzPWNvbnN1bWVyc2VjcmV0Jng9MzA-&output=json 3/8
14. © 2020 shinji ichien 住所を市区町村単位で扱いたい 住所ディレクトリAPI https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/addressdirectory.html 例: 愛知県の住所一覧(市) https://map.yahooapis.jp/search/address/V1/addressDirectory?ac=23&appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bWVyc2 VjcmV0Jng9MzA-&output=json 4/8
15. © 2020 shinji ichien 施設内の店舗・施設情報を知りたい 施設内検索API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/buildingSearch.html 例: ミッドランドスクエア(35.170082, 136.885238)内店舗検索 https://map.yahooapis.jp/inner/V1/building?lat=35.170082&lon=136.885238&appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bW Vyc2VjcmV0Jng9MzA-&output=json&results=100 5/8
16. © 2020 shinji ichien その場所の標高が知りたい 標高API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/altitude.html 例: 富士山最高地点 剣ヶ峰 (35.360629,138.727363 らへん ) -> ?m https://map.yahooapis.jp/alt/V1/getAltitude?appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bWVyc2VjcmV0Jng9MzA-&coordina tes=138.727363,35.360629,&output=json https://pixabay.com/ja/photos/%E5%AF%8C%E5%A3%AB%E5%B1%B1-%E7%81%AB%E5%B1%B1-%E9%9C%A7-%E5%B1%B1-477832/ 6/8
17. © 2020 shinji ichien その場所の標高が知りたい 標高API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/altitude.html 例: 富士山最高地点 剣ヶ峰 (35.360629,138.727363 らへん ) -> 約3,776m https://map.yahooapis.jp/alt/V1/getAltitude?appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bWVyc2VjcmV0Jng9MzA-&coordina tes=138.727363,35.360629,&output=json https://pixabay.com/ja/photos/%E5%AF%8C%E5%A3%AB%E5%B1%B1-%E7%81%AB%E5%B1%B1-%E9%9C%A7-%E5%B1%B1-477832/ 6/8
18. © 2020 shinji ichien 今いる場所がどんな場所なのか知りたい 場所情報API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/placeinfo.html 例: 名古屋駅 https://map.yahooapis.jp/placeinfo/V1/get?lat=35.170915&lon=136.881537&appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bW Vyc2VjcmV0Jng9MzA-&output=json 7/8
19. © 2020 shinji ichien ルート沿いの施設情報を知りたい ルート沿い検索API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/spatialSearch.html 例: ここらへん検索 https://map.yahooapis.jp/spatial/V1/shapeSearch ?coordinates=136.884348,35.170814%20136.884659,35.169867%20136.884970,35.168648 &appid=dj00aiZpPXF3a25mWGUyOUlrayZzPWNvbnN1bWVyc2VjcmV0Jng9MzA- &output=json&results=100 8/8
20. © 2020 shinji ichien その他 便利なAPI
21. © 2020 shinji ichien やりたいこと API名 特定地点の雨の強さを知りたい 気象情報API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/weather.html 郵便番号の場所情報を知りたい 郵便番号検索API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/zipcodesearch. html 特定の店舗の口コミを知りたい クチコミ検索API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/reviewsearch.ht ml 経路の案内図を作りたい 経路地図API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/routemap.html 2つの緯度経度点間の距離を知りたい 2点間距離API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/distance.html 日本測地系と世界測地系を変換したい 測地系変換API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/datum.html どんなカセットがあるか知りたい カセットサーチAPI https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/cassetteSearch .html 文字列から場所を表す単語を抽出したい コンテンツジオコーダ API https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/contentsgeoco der.html
22. © 2020 shinji ichien 利用するには アプリケーションIDの取得が必要
23. © 2020 shinji ichien アプリケーションIDを取得 https://e.developer.yahoo.co.jp/dashboard/
24. © 2020 shinji ichien アプリケーションIDを取得 https://e.developer.yahoo.co.jp/register フォーム入力し、最後に「同意する」->「登録」クリック
25. © 2020 shinji ichien アプリケーションIDを取得 https://e.developer.yahoo.co.jp/dashboard/
26. © 2020 shinji ichien 地図ライブラリ
27. © 2020 shinji ichien https://map.yahoo.co.jp/blog/archives/20191030_map_mapboxweb.html https://map.yahoo.co.jp/blog/archives/20191015_map_mapbox.html
28. © 2020 shinji ichien Web版の mapbox-gl-jsの使い方を紹介 していきます
29. © 2020 shinji ichien https://www.mapbox.com/maps/ Mapboxについて • インタラクティブな地図の作成 • データの可視化が得意 • SDK提供 ◦ Web, Android, iOS等 • オープンソースでGithubに公開済み
30. © 2020 shinji ichien 地図表示 https://docs.mapbox.com/mapbox-gl-js/example/simple-map/ 1/3
31. © 2020 shinji ichien 地図スタイル変更 https://docs.mapbox.com/mapbox-gl-js/example/satellite-map/ https://docs.mapbox.com/mapbox-gl-js/example/setstyle/ 2/3
32. © 2020 shinji ichien 国土地理院の地図を表示 • サンプルコード: https://codepen.io/1coin178/pen/BayqEMb • 色別標高図: https://maps.gsi.go.jp/development/ichiran.html#relief 3/3
33. © 2020 shinji ichien 国土地理院の地図 + 河川洪水危険区域 • サンプルコード: https://codepen.io/1coin178/pen/PowygvV • 色別標高図: https://maps.gsi.go.jp/development/ichiran.html#relief • 河川洪水危険区域: https://disaportal.gsi.go.jp/hazardmap/copyright/opendata.html 3/3
34. © 2020 shinji ichien (私の)作成事例
35. © 2020 shinji ichien プロダクト名: Ground Escape - @NASA Space Apps Challenge 2019 Tokyo http://bit.ly/3a5XkKG
36. © 2020 shinji ichien 利用技術 • 地図表示 ◦ mapbox-gl-js • 標高地形図 ◦ 地理院地図｜地理院タイル一覧 • ハザードマップデータ ◦ ハザードマップポータルサイト • 経路検索 ◦ mapbox Directions API • 避難所データ ◦ Yahoo!ローカルサーチAPI
37. © 2020 shinji ichien まとめ • YOLP API ◦ 施設検索や施設の情報取得が得意 • 地図ライブラリには、mapboxがおすすめ ◦ 公式のサンプルが豊富で、できることを確認してみると良い • 紹介した各APIはドキュメントをリンク付き ◦ 詳細な使い方はそちらをぜひご覧ください！
38. © 2020 shinji ichien Fin.