Giter Club home page Giter Club logo

camp-vector-tile's Introduction

GitHub を活用したベクトルタイル配信基盤

このリポジトリは、CSVGeoJSON フォーマットのデータを Mapbox Vector Tile (.mvt) フォーマットに変換し API として公開するためのテンプレートリポジトリです。

テンプレートレポジトリとは、既存のレポジトリを自身や他の人が同じディレクトリ構造や GitHub Actions を持つ新たなレポジトリコピーを作るための仕組みです。フォークとは異なり、ひとつのテンプレートレポジトリから、複数の異なる名前とURLを持つレポジトリを作成できます。

このテンプレートをコピーしてできたレポジトリに緯度と経度を含む CSV または GeoJSON をコミットすると、 .mvt が作成され、同レポジトリの GitHub Pages 上にホストされます。ホストされたデータへアクセスすることで、API配信基盤として機能するように作成しているため、自治体が公開するオープンデータや自組織が保有する地理空間情報を空間ID APIとすることができます。

このようにして作成したAPIに、空間IDタイルデータ取得SDKや、Mapbox GL JS、 MapLibre GL JS、 Geolonia の Javascript API等を用いることで、アプリケーションの開発が可能です。

Geolonia spatialid-gh-template-image

テンプレートレポジトリの利用方法

  • [Use this template] ボタンをクリックして、このテンプレートを自分のリポジトリにコピーしてください。
  • GitHub Pages の設定方法 を参考にGitHub Pagesを有効にする。
  • example.csv を編集してコミットすると数分後に ベクトルタイルが生成されます。
    • csv の先頭行には、必ず 緯度経度という項目を追加して下さい
    • 任意のファイル名の CSV を1つのみ設置できます。
    • ファイルの文字コードは UTF-8 を指定して下さい。
  • https://<あなたのGitHubユーザー名>.github.io/<リポジトリ名>/tiles/tiles.json をリクエスト用のURL()として利用する。

GeoJSON データのご利用方法

  • 以下の build.yml の 20行目の "*.csv""*.geojson" に書き換えて push して下さい。
  • example.csv を削除し、example.geojson をアップロードして下さい。数分でタイルが生成されます。

build.yml

  with:
    file: "*.csv"
    out_dir: ./

https://github.com/geolonia/vector-tiles-api/blob/main/.github/workflows/build.yml#L20

GitHub Pages の設定方法

  • GitHub のリポジトリのメニューの中にある [Settings] をクリックしてください。
  • 移動先のページの下の方にある [GitHub Pages] のところで、以下のように設定してください。

sample

生成したデータをAPIとして利用する

生成したデータへの空間ID APIアクセスについては、空間ID データ取得SDKのドキュメンテーションをご覧ください

生成したデータを地図に表示する

GitHub を活用した空間ID API を使って港区のフリーWi-Fiスポットを地図に表示するサンプル では、港区が公開している公衆無線LANのアクセスポイントのオープンデータを変換した上で、地図(ここでは、Geolonia Maps)上に表示させています。

スクリーンショット 2022-10-29 0 16 31

データ出典

サンプルデータは以下のデータを利用しています。

港区は、この上記のデータのほか、55件のCSV/GeoJSON形式の地理空間データをオープンデータとして公開しています。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.