first commit

champierre · champierre · commit 560097c5820b · 2022-11-25T00:31:16.000+09:00
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+1. dojo一覧を取得する
+
+```
+% sh curl.sh
+```
+
+2. geojsonファイルに変換する
+
+```
+% ruby convert.rb
+```
+
+3. http serverを起動し、ブラウザで閲覧する
+
+```
+% npm install -g http-server
+% http-server
+% open http://localhost:8080
+```
diff --git a/convert.rb b/convert.rb
@@ -0,0 +1,32 @@
+require 'json'
+
+dojos = []
+
+File.open("dojos.json") do |file|
+  dojos = JSON.load(file)
+end
+
+features = []
+dojos.each do |dojo|
+  if dojo["geoPoint"]
+    features << {
+      "type" => "Feature",
+      "geometry" => {
+        "type" => "Point",
+        "coordinates" => [dojo["geoPoint"]["lon"], dojo["geoPoint"]["lat"]]
+      },
+      "properties" => {
+        "description" => "#{dojo['name']}<br /><a target='_blank' href='http://zen.coderdojo.com/dojos/#{dojo['urlSlug']}'>zen</a>"
+      }
+    }
+  end
+end
+
+geojson = {
+  "type": "FeatureCollection",
+  "features": features
+}
+
+File.open("dojos.geojson", "w") do |file|
+  JSON.dump(geojson, file)
+end
diff --git a/curl.sh b/curl.sh
@@ -0,0 +1,18 @@
+curl -X POST --header 'Content-Type: application/json' --header 'Accept: application/json' -d '{
+  "query": {
+    "verified": 1,
+    "deleted": 0,
+    "fields$": [
+      "name",
+      "geo_point",
+      "stage",
+      "url_slug",
+      "start_time",
+      "end_time",
+      "private",
+      "frequency",
+      "alternative_frequency",
+      "day"
+    ]
+  }
+}' 'https://zen.coderdojo.com/api/2.0/dojos' -o dojos.json
diff --git a/dojos.geojson b/dojos.geojson
diff --git a/dojos.json b/dojos.json
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>dojos map</title>
+    <style>
+      body,
+      html {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+
+      .geolonia {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    
+    <script id="geojson" type="application/json">
+    </script>
+    <div
+      class="geolonia"
+      data-geojson="./dojos.geojson"
+      data-lat="35.6809591"
+      data-lng="139.7673068"
+      data-zoom="7"
+      data-marker="off"
+      data-geolocate-control="on"
+    ></div>
+
+    <script
+      type="text/javascript"
+      src="https://cdn.geolonia.com/v1/embed?geolonia-api-key=YOUR-API-KEY"
+    ></script>
+  </body>
+</html>
