概要
paiza.ioでelixirやってみた。
練習問題やってみた。
練習問題
api叩いて、住所から、緯度経度、求めて、地図上にピンを立てよ。
サンプルコード
:inets.start
:ssl.start
IO.puts """
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.0/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px;"></div>
<script>
var map = L.map('map').setView([38.0, 140.0], 10);
var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
function pin(lat, lon) {
L.marker([lon, lat]).addTo(map);
}
"""
query = URI.encode_query(%{q: "山形県東置賜郡川西町"})
url = "https://msearch.gsi.go.jp/address-search/AddressSearch?" <> query
url = String.to_charlist(url)
{:ok, {_status, _headers, body}} = :httpc.request(url)
body
body = IO.iodata_to_binary(body)
body = String.replace(body, "\\", " ")
Regex.scan(~r/:\[(.+?)\]/, body)
#|> IO.inspect
|> Enum.map(fn [_, v] ->
IO.puts("pin( #{v});")
end)
IO.puts """
</script>
</body>
</html>
"""
実行結果
成果物
以上。