Mapbox Vector Tiles with Ruby on Rails

This is the sample application for the 福岡Rubyist会議03 Yamap sponsor session. The slides can be found here.

Goal

We will create a map displaying Japan's municipalities.

Steps to create a map

PostGIS setup with active record adapter 🔗

To store geographic data, you need Postgres with the PostGIS extension enabled. PostGIS introduces new data types and functions to Postgres for storing and querying geographic information. Ruby on Rails does not support these data types out of the box. The Rgeo library got you covered here.

Municipalities with many areas 🔗

Data structure to save Japanese municipalities and the associated areas.

Download, Convert, and import Japanese area information. 🔗

National Land Information Division of Japan offers areal information. This data is converted into PostGIS SQL and imported into the municipalities table.

The data format is called a Shapefile. This standard data format is used to publish most geographic data.

Query and convert municipality data to vector tile 🔗

Vector tiles can be created with a PostGIS query.

First, The geometry data needs to be limited for inclusion into the vector tiles. Only areas that intersect the tile boundary are considered. Overlapping zones are clipped.

The scoped data is then converted to the Mapbox Vector Tile binary format.

Map resources and JavaScript map client 🔗

To display a map of the Japanese municipalities, two resources are needed:

1. The vector tile endpoint to stream the binary vector tiles.
2. A Mapbox Style endpoint to tell the map client how to render the vector data.

The JavaScript client can now render this map with the style URL without further design configuration.

Development

Setup

1. Get the code.

   % git clone [email protected]:yamap-inc/geo_rails_demo.git
   

2. Start dockerized PostGIS

    % docker-compose up -d
   

3. Setup your environment.

    % bin/setup
   

4. Generate Japanese municipality data

    % bin/generate_data
   

5. Start Rails.

    % bin/rails server
   

6. Verify that the app is up and running.

    % open http://localhost:3000