Here API を贅沢な使い方してみた。w

本日は、[ASIA OPEN DATA Hack a Thon! 2019](https://note.mu/tomoaoki/n/nb1fa018a273b)　から参戦！

縁あって、東京ですけど、fukuoka.ex でElixirパターンマッチ！と叫んでる[YOSUKENAKAO.me](https://twitter.com/YOSUKENAKAO)です。

最近は、[日本ゲーミフィケーション協会](https://jgamifa.jp/)を立ち上げたりと、プログラミング教育を楽しくする仕掛けづくりをしています。仲間募集中なので、是非、今の日本に一石を投じたい方はDMください。

また、fukuoka.exのpiacereさんが書かれたElixirのチュートリアル[Excelから関数型言語マスター1回目：データ行の”並べ替え”と”絞り込み”
](https://qiita.com/piacere_ex/items/6714e1440e3f25fb46a1)は非常に入りやすい教材なのでお勧めです。第７回まであるので、まだやっていない方は是非トライしてみてください。

---
# [ASIA OPEN DATA Hack a Thon!](https://note.mu/tomoaoki/n/nb1fa018a273b)

![ASIA OPEN DATA Hack a Thon!](https://d2l930y2yx77uc.cloudfront.net/production/uploads/images/12798902/rectangle_large_type_2_629aa3a242b1d2c5da269d7c793729ec.png)

## Here APIを触ってみた！と言いたいだけの為の苦肉の策

さて、今回はASIA OPEN DATA Hack a Thon!にてメンターとして参加させて頂きました。
その際にスポンサーであるHereのAPIを利用すると賞金$1500が狙える！という事もあり、早速使いたい！

という参加者の声にお答えしてAPIを見ると、凄い沢山のAPIが揃っているので、期待大！

という事で触ってみたものの、なんと！日本の地図はまだ未対応！
でも日本市場を重視しだしたようなのでその辺は今後に期待することとして、簡単に使えそうなもので何か作って見ることにしました。

---
## 作ったもの

### [Destination Weather API](https://developer.here.com/api-explorer/rest/auto_weather/weather-forecast-7days-astronomy) 

を利用して、地図に天気のアイコンを表示する。

<img width="826" alt="スクリーンショット 2019-07-07 15.32.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/18c7fe6e-841c-0fb9-f871-2f782a678bda.png">

---

##　備忘録
せっかくなので、備忘録として雑コードを乗せておきます。

プロジェクトは、mix phx.new here　で作りました。
apiを呼び出すのに、smallexモジュールを追加
この辺りは、省略します。

まずは、環境変数にhere idとhere codeを入れておく

```
export HERE_API_id="xxxxxxx"
export HERE_API_code="xxxxxxx"
```

grepして確かめ

```
export -p | grep HERE
```

config.exに環境変数から取得するコードを記述

```config.ex

# Import API
config :here, HereWeb.Endpoint,
hereid: System.get_env("HERE_API_id"),
herecode: System.get_env("HERE_API_code")
```

here.exに環境変数から取得したidとcodeを連結して、Json.get(domain,path)に利用する為のpathを
生成する

```lib/here.ex
defp get_id do
    Application.get_env(:here,HereWeb.Endpoint)[:hereid]
  end

  defp get_code do
    Application.get_env(:here,HereWeb.Endpoint)[:herecode]
  end

  def get_here(location) do
    Enum.join(["/weather/1.0/report.json?product=observation&name=",location,"&app_id=", get_id(),"&app_code=",get_code()])
  end
```

index.html.eexで、leaflet.jsで日本地図を表示して、here APIから取得した天気情報を表示しました。

```index.html.eex

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<%
domain = "https://weather.cit.api.here.com"
weather = Json.get(domain,Here.get_here("Tokyo"))
local = Map.get(weather,"observations")
[head | tail] = Map.get(local,"location")
city = Map.get(head, "city")
lat = Map.get(head, "latitude")
lng = Map.get(head, "longitude")
[ obs ] = Map.get(head,"observation")

url = Map.get(obs,"iconLink")
%>

<div id="map"></div>
<style>
  div#map{
    width: 100%;
    height: 500px;
  }
</style>

<script>
var t_std = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map('map',{
  center: [<%= lat %>, <%= lng %>],
  zoom: 13,
  layers: [t_std]
});

var weatherIcon = L.icon({
    iconUrl: '<%= url %>',
    iconRetinaUrl: '<%= url %>',
    iconSize: [100, 100],
    iconAnchor: [25, 50],
    popupAnchor: [0, -50],
});

var mapMarker = L.marker([<%= lat %>, <%= lng %>], { icon: weatherIcon }).addTo(map);
var comment = '<%= city %>';
mapMarker.bindPopup(comment).openPopup();
</script>
```
---
###　感想
here APIの数が多いので、色々と使ってみたい
早く、日本地図対応してくれないかなw