© 2020 shinji ichien G空間APIと 地図ライブラリの紹介 一円 真治 @1coin178 ヤフー株式会社 2020.2.1 Geospatial Hackers Program 東海

© 2020 shinji ichien My Profile ● 一円 真治 - Shinji Ichien ● Twitter: @1coin178 ● Yahoo Japan Corporation ● Enginner / Yahoo!地図

© 2020 shinji ichien (作る)開発しているサービス

© 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/

© 2020 shinji ichien G空間情報を扱うAPI を公開しています

© 2020 shinji ichien https://map.yahoo.co.jp/promo/yolp/

© 2020 shinji ichien 15+ API 地図SDK

© 2020 shinji ichien やりたいことを 逆引きする形で紹介

© 2020 shinji ichien 基本、REST形式の Web APIです

© 2020 shinji ichien 地理空間 検索

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 2020 shinji ichien その他 便利なAPI

© 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

© 2020 shinji ichien 利用するには アプリケーションIDの取得が必要

© 2020 shinji ichien アプリケーションIDを取得 https://e.developer.yahoo.co.jp/dashboard/

© 2020 shinji ichien アプリケーションIDを取得 https://e.developer.yahoo.co.jp/register フォーム入力し、最後に「同意する」->「登録」クリック

© 2020 shinji ichien アプリケーションIDを取得 https://e.developer.yahoo.co.jp/dashboard/

© 2020 shinji ichien 地図ライブラリ

© 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

© 2020 shinji ichien Web版の mapbox-gl-jsの使い方を紹介 していきます

© 2020 shinji ichien https://www.mapbox.com/maps/ Mapboxについて ● インタラクティブな地図の作成 ● データの可視化が得意 ● SDK提供 ○ Web, Android, iOS等 ● オープンソースでGithubに公開済み

© 2020 shinji ichien 地図表示 https://docs.mapbox.com/mapbox-gl-js/example/simple-map/ 1/3

© 2020 shinji ichien 地図スタイル変更 https://docs.mapbox.com/mapbox-gl-js/example/satellite-map/ https://docs.mapbox.com/mapbox-gl-js/example/setstyle/ 2/3

© 2020 shinji ichien 国土地理院の地図を表示 ● サンプルコード: https://codepen.io/1coin178/pen/BayqEMb ● 色別標高図: https://maps.gsi.go.jp/development/ichiran.html#relief 3/3

© 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

© 2020 shinji ichien (私の)作成事例

© 2020 shinji ichien プロダクト名: Ground Escape - @NASA Space Apps Challenge 2019 Tokyo http://bit.ly/3a5XkKG

© 2020 shinji ichien 利用技術 ● 地図表示 ○ mapbox-gl-js ● 標高地形図 ○ 地理院地図｜地理院タイル一覧 ● ハザードマップデータ ○ ハザードマップポータルサイト ● 経路検索 ○ mapbox Directions API ● 避難所データ ○ Yahoo!ローカルサーチAPI

© 2020 shinji ichien まとめ ● YOLP API ○ 施設検索や施設の情報取得が得意 ● 地図ライブラリには、mapboxがおすすめ ○ 公式のサンプルが豊富で、できることを確認してみると良い ● 紹介した各APIはドキュメントをリンク付き ○ 詳細な使い方はそちらをぜひご覧ください！

© 2020 shinji ichien Fin.