Initial commit

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true

.github/release.yml

@@ -0,0 +1,14 @@
+changelog:
+  exclude:
+    labels:
+      - ignore-for-release
+  categories:
+    - title: Breaking Changes 🛠
+      labels:
+        - breaking-change
+    - title: Exciting New Features 🎉
+      labels:
+        - enhancement
+    - title: Other Changes
+      labels:
+        - '*'

.github/workflows/build.yml

@@ -0,0 +1,26 @@
+name: Build
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Convert the YAML to GeoJSON
+        run: |
+          cd $GITHUB_WORKSPACE
+          npm install
+          npm run build
+
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: 'gh-pages'
+          folder: './docs/'
+          target-folder: './'

.github/workflows/pr.yml

@@ -0,0 +1,26 @@
+name: pr
+
+on:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Run tests
+        run: |
+          cd $GITHUB_WORKSPACE
+          npm install
+          npm run build
+
+      - name: Action step
+        uses: geolonia/map-render-benchmark@refs/heads/main
+        with:
+          style: docs/style.json
+          center: 139.7671773,35.6810755
+          zooms: 5,7,11,14
+          production_style: https://geoloniamaps.github.io/gsi/style.json

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,38 @@
+# GSI
+
+このリポジトリは、Geolonia の [GSI スタイル](https://geoloniamaps.github.io/gsi) （国土地理院と OpenStreetMap ベース）をカスタマイズし公開するためのテンプレートリポジトリです。
+
+以下のような簡単な手順でお好みのスタイルにカスタマイズし、地図として表示できます。
+
+* [DEMO](https://geoloniamaps.github.io/gsi)
+* [DEMO on editor](https://editor.geolonia.com/?style=https://geoloniamaps.github.io/gsi/style.json)
+
+## ユーザーがカスタマイズする際の手順
+
+* [Use this template](https://github.com/geoloniamaps/gsi/generate) ボタンでこのリポジトリをコピー。
+* GitHub Pages を 設定。
+* `style.yml` を編集。
+* しばらくすると `gh-pages` ブランチに `style.json` がコミットされるので、Geolonia Maps で表示する場合は、その URL を以下のように指定してください。
+
+```
+<div data-style="https://<あなたのGitHubユーザー名>.github.io/<リポジトリ名>/style.json"></div>
+```
+
+
+## GitHub Pages の設定方法
+
+* GitHub のリポジトリのメニューの中にある [Settings] をクリックしてください。
+* 移動先のページの下の方にある [GitHub Pages] のところで、以下のように設定してください。
+
+![](https://www.evernote.com/l/ABXqA26fEitDNZG6KDxX-Os6Qb8gciGRKSYB/image.png)
+
+
+## 色のカスタマイズ
+
+[style.yml](./style.yml) を開いて下さい。 以下をお好きな色のカラーコードに変更しコミットして下さい。
+
+```
+$background: rgba(254, 254, 254, 1)
+
+# カスタマイズここまで
+```

bin/dev-server.js

@@ -0,0 +1,43 @@
+const http = require('http');
+const path = require('path');
+const fs = require('fs');
+const url = require('url');
+
+const server = http.createServer(function (req, res) {
+  // parse URL
+  let parsedUrl = url.parse(req.url);
+
+  // extract URL path
+  let pathname = path.join(__dirname, '../docs', parsedUrl.pathname);
+  // based on the URL path, extract the file extension. e.g. .js, .doc, ...
+  const ext = path.parse(pathname).ext;
+  // maps file extension to MIME typere
+  const map = {
+    '.html': 'text/html',
+    '.json': 'application/json',
+    '.png': 'image/png',
+  };
+
+  fs.stat(pathname, function (error, stats) {
+    if(error) {
+      // if the file is not found, return 404
+      res.statusCode = 404;
+      res.end(`File ${pathname} not found!`);
+      return;
+    }
+
+    // read file from file system
+    fs.readFile(pathname, function(err, data){
+      if(err){
+        res.statusCode = 500;
+        res.end(`Error getting the file: ${err}.`);
+      } else {
+        // if the file is found, set Content-type and send data
+        res.setHeader('Content-type', map[ext] || 'text/plain' );
+        res.end(data);
+      }
+    });
+  });
+})
+
+module.exports = server;

bin/style-render-time.js

@@ -0,0 +1,121 @@
+const puppeteer = require('puppeteer');
+const httpClose = require('http-close')
+const server = require('./dev-server');
+const fs = require('fs');
+const path = require('path');
+const fetch = require('node-fetch');
+
+const port = 9999
+const threshold = 2000;
+
+const fetchLatestStyle = async () => {
+  const response = await fetch('https://geoloniamaps.github.io/basic/style.json');
+  const text = await response.text();
+  const style = JSON.parse(text);
+
+  fs.writeFileSync(path.join(__dirname, '../docs/style.json'), JSON.stringify(style));
+}
+
+const getMapRenderTime = async (zoom, center) => {
+
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+
+  const lng = center[0];
+  const lat = center[1];
+
+  await page.goto(`http://localhost:${port}/index.html#${zoom}/${lat}/${lng}`);
+  await page.waitForSelector('.loading-geolonia-map', { hidden: true });
+
+  const mapRenderTime = await page.evaluate(() => {
+    return mapRenderedTime;
+  })
+
+  await browser.close();
+
+  return mapRenderTime;
+}
+
+const getAverageMapRenderTime = async (zoom, center) => {
+
+  const mapRenderedTimes = [];
+
+  // 5回のレンダリング時間の平均を取得
+  for (let i = 0; i < 5; i++) {
+    const mapRenderedTime = await getMapRenderTime(zoom, center);
+    mapRenderedTimes.push(mapRenderedTime);
+  }
+
+  // get average map render time
+  const average = mapRenderedTimes.reduce((a, b) => a + b, 0) / mapRenderedTimes.length;
+  // get min max map render time
+  const min = Math.min(...mapRenderedTimes);
+  const max = Math.max(...mapRenderedTimes);
+
+  return {
+    average: Math.round(average),
+    min: Math.round(min),
+    max: Math.round(max)
+  }
+};
+
+const getMapRenderTimeDiff = async (zoom, center) => {
+
+  const mapRenderedTime = await getAverageMapRenderTime(zoom, center);
+
+  // fetch style.json at master branch
+  fetchLatestStyle();
+  const mapRenderedTimeProd = await getAverageMapRenderTime(zoom, center);
+
+  return {
+    diff: mapRenderedTime.average - mapRenderedTimeProd.average,
+    average: mapRenderedTime.average,
+    averageProd: mapRenderedTimeProd.average,
+  }
+
+}
+
+const getMapRenderTimeByZoom = async () => {
+
+  server.listen(port, async () => {
+
+    const center = [139.7671773, 35.6810755];
+    const zoomList = [ 5, 7, 11, 14 ]
+
+    let comment = '<h3><span aria-hidden="true">✅</span> 地図レンダリング時間</h3>';
+    comment += `<p><code>master</code> ブランチのスタイルと、現在のブランチのスタイルのレンダリング時間を比較した結果を表示します。（レンダリング時間が${threshold/1000}秒以上増加した場合テストが失敗します）</p>`;
+    comment += '<table><tr><th>ズームレベル</th><th>最新リリースとの差分</th><th>最新リリース</th><th>現在のブランチ</th></tr>';
+
+    for (let i = 0; i < zoomList.length; i++) {
+
+      const zoom = zoomList[i];
+      const mapRenderedTime = await getMapRenderTimeDiff(zoom, center);
+      const plusMinus = mapRenderedTime.diff > 0 ? '+' : '';
+      comment += `<tr><td>${zoom}</td><td>${plusMinus}${mapRenderedTime.diff/1000}秒</td><td>${mapRenderedTime.averageProd/1000}秒</td><td>${mapRenderedTime.average/1000}秒</td></tr>`;
+
+      if (parseInt(mapRenderedTime.diff) > threshold) {
+        throw new Error(`Map render average time changes should be less than ${threshold}ms.`);
+      }
+
+    }
+
+    comment += '</table>';
+
+    process.stdout.write(comment);
+
+    httpClose({ timeout: 1 }, server);
+
+    process.exit(0);
+
+  });
+}
+
+try {
+
+  getMapRenderTimeByZoom();
+
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+
+}