paiza.ioでelixir その106

# 概要
paiza.ioでelixirやってみた。
練習問題やってみた。

# 練習問題
jsonをパースして、geojsonを、生成して、地図上に表示せよ。

# サンプルコード

```

defmodule Main do
    def main() do
        json = """
{
		"bikuya": [{
				"lat": "37.929687",
				"lon": "140.151111",
				"name": "オートショップユニット"
		}, {
				"lat": "37.929220",
				"lon": "140.109344",
				"name": "（株）エイジュウプロ"
		}, {
				"lat": "37.923453",
				"lon": "140.093108",
				"name": "（株）ホンダウイングロードショウ"
		}, {
				"lat": "37.911333",
				"lon": "140.112004",
				"name": "（有）カーセンター葵商会"
		}, {
				"lat": "37.907591",
				"lon": "140.108036",
				"name": "塚本サイクル"
		}, {
				"lat": "37.928429",
				"lon": "140.114247",
				"name": "サイクルショップ川口"
		}, {
				"lat": "37.916279",
				"lon": "140.099879",
				"name": "サイクルショップ中村"
		}, {
				"lat": "37.917854",
				"lon": "140.101416",
				"name": "菅原商会"
		}, {
				"lat": "37.912485",
				"lon": "140.108688",
				"name": "サイクルセンター卯月"
		}, {
				"lat": "37.912049",
				"lon": "140.105914",
				"name": "ホンダ野村モータース"
		}, {
				"lat": "37.869915",
				"lon": "140.103534",
				"name": "モーターハウスＫ"
		}, {
				"lat": "37.918955",
				"lon": "140.109289",
				"name": "ライダースサロン・ヤマカ"
		}, {
				"lat": "37.915746",
				"lon": "140.108313",
				"name": "中央ホンダ"
		}, {
				"lat": "37.905011",
				"lon": "140.107225",
				"name": "香澄ホンダ"
		}, {
				"lat": "37.912663",
				"lon": "140.123328",
				"name": "佐藤オート商会"
		}, {
				"lat": "37.910789",
				"lon": "140.121636",
				"name": "香坂輪店"
		}, {
				"lat": "37.958525",
				"lon": "140.125682",
				"name": "斎藤モータース"
		}, {
				"lat": "37.956678",
				"lon": "140.117820",
				"name": "ニューホンダ石山"
		}, {
				"lat": "37.903901",
				"lon": "140.131694",
				"name": "二輪屋たかはし"
		}, {
				"lat": "37.886019",
				"lon": "140.104554",
				"name": "夢工場"
		}, {
				"lat": "37.874814",
				"lon": "140.103239",
				"name": "あべ輪店"
		}, {
				"lat": "37.905055",
				"lon": "140.137379",
				"name": "レッドバロン米沢"
		}]
}
"""
        json = String.replace(json, "\n", "")
        json = String.replace(json, "\t", "")
        line = String.split(json, "lat")
        IO.write """
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
        crossorigin=""></script>
  </head>
  <body>
    <textarea id="src">

{"type":"FeatureCollection","features":[
"""
        Enum.map(line, fn s -> 
            mat = Regex.named_captures(~r/\": \"(?<lat>.+)\",\"lon\": \"(?<lon>.+)\",\"name\": \"(?<name>.+)\"}/, s)
            print(mat["lat"], mat["lon"], mat["name"])
        end)
        IO.puts """
        {}]}
        </textarea>
    <div id="mapid" style="width: 450 px; height: 450px;"></div>
    <script>
    
var map = L.map('mapid').setView([37.9, 140.15], 11);

L.control.layers({
    "OpenStreetMap": L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 25,
                maxNativeZoom: 19,
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
}).addTo(map), "地理院 標準地図": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
                maxZoom: 25,
                maxNativeZoom: 18,
                attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
    }), "地理院 淡色地図(Zoom2～)": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
                minZoom: 2,
                maxZoom: 18,
                attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>'
    }), "地理院 写真(Zoom9～)": L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
                minZoom: 9,
                maxZoom: 18,
                attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>( Zoom9～13:Landsat8画像（GSI,TSIC,GEO Grid/AIST）, Landsat8画像（courtesy of the U.S. Geological Survey）, 海底地形（GEBCO）)'
    })
}).addTo(map);
var src = document.getElementById('src');
var features = JSON.parse(src.value);
L.geoJson(features).addTo(map);
    </script>
  </body>
</html>
"""
    end
    def print(nil, nil, nil) do
    end
    def print(lat, lon, name) do
        IO.write "{\"type\":\"Feature\",\"properties\":{\"name\":\"#{name}\"},\"geometry\":{\"type\":\"Point\",\"coordinates\":[\"#{lon}\",\"#{lat}\"]}},"
    end
end

Main.main



```

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1b43cd47-6a51-bf4a-9ca0-2e1b2c772514.png)



# 成果物

https://paiza.io/projects/q_60WU3lqkqAXoVsYJVnUw?language=elixir


以上。