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.

app/assets/stylesheets/application.css

@@ -13,3 +13,16 @@
  *= require_tree .
  *= require_self
  */
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+.map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}

app/controllers/map_styles_controller.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+class MapStylesController < ApplicationController; end

app/controllers/maps_controller.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+class MapsController < ApplicationController; end

app/controllers/tiles_controller.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class TilesController < ApplicationController
+  def show
+    zoom, x, y = params.values_at(:zoom, :x, :y).map(&:to_i)
+
+    respond_to do |format|
+      format.mvt do
+        send_data(Municipality.as_mvt_for(zoom:, x:, y:))
+      end
+    end
+  end
+end

app/javascript/controllers/map_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+import { apply } from "ol-mapbox-style"
+
+export default class extends Controller {
+  static values = { url: String }
+
+  connect() {
+    apply(this.element, this.urlValue)
+      .then((value) => { this.map = value })
+  }
+
+  disconnect() {
+    this.map.setTarget(null)
+    this.map = null
+  }
+}

app/models/municipality.rb

@@ -5,8 +5,8 @@ class Municipality < ApplicationRecord
 
   def self.as_mvt_for(zoom:, x:, y:)
     relation = joins(:municipality_areas)
-                 .merge(MunicipalityArea.as_mvt_geom_for(zoom:, x:, y:))
-                 .select(:id, :name)
+               .merge(MunicipalityArea.as_mvt_geom_for(zoom:, x:, y:))
+               .select(:id, :name)
 
     all.unscoped.from(relation, :mvtgeom).select('ST_AsMVT(mvtgeom.*) mvt').take.mvt
   end

app/models/municipality_area.rb

@@ -8,10 +8,10 @@ def self.for_map_tile(zoom:, x:, y:)
   end
 
   def self.as_mvt_geom_for(zoom:, x:, y:)
-    sql = sanitize_sql_array([
-            "ST_AsMVTGeom(area, ST_TileEnvelope(:zoom, :x, :y)) AS geom",
-            zoom:, x:, y:,
-          ])
+    sql = sanitize_sql_array(
+      ['ST_AsMVTGeom(area, ST_TileEnvelope(:zoom, :x, :y)) AS geom',
+       { zoom:, x:, y: }]
+    )
 
     for_map_tile(zoom:, x:, y:).select(sql)
   end

app/views/map_styles/show.json.jbuilder

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+json.version 8
+
+json.center [130.399994, 33.583332] # Fukuoka
+
+json.zoom 12
+
+json.sources do
+  json.map do
+    json.type 'vector'
+    json.tiles [tile_url('{z}', '{x}', '{y}', format: :mvt)]
+  end
+end
+
+json.layers do
+  json.child! do
+    json.id 'municipality-label'
+    json.type 'symbol'
+    json.source 'map'
+    json.set! 'source-layer', 'default'
+    json.layout do
+      json.set! 'text-field', %w[get name]
+      json.set! 'symbol-placement', 'line-center'
+    end
+  end
+
+  json.child! do
+    json.id 'municipality-outline'
+    json.type 'line'
+    json.source 'map'
+    json.set! 'source-layer', 'default'
+    json.paint do
+      json.set! 'line-color', '#3EA5F5'
+      json.set! 'line-width', 3
+    end
+  end
+end

app/views/maps/show.html.erb

@@ -0,0 +1,2 @@
+<div class='map' data-controller="map" data-map-url-value="<%= map_style_url(format: :json) -%>">
+</div>

config/importmap.rb

@@ -7,3 +7,8 @@
 pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
 pin_all_from 'app/javascript/controllers', under: 'controllers'
+pin 'ol-mapbox-style', to: 'https://ga.jspm.io/npm:[email protected]/dist/index.js'
+pin 'ieee754', to: 'https://ga.jspm.io/npm:[email protected]/index.js'
+pin 'ol/', to: 'https://ga.jspm.io/npm:[email protected]/'
+pin 'pbf', to: 'https://ga.jspm.io/npm:[email protected]/index.js'
+pin 'rbush', to: 'https://ga.jspm.io/npm:[email protected]/rbush.min.js'

config/initializers/types.rb

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+Mime::Type.register 'application/vnd.mapbox-vector-tile', :mvt

config/routes.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 Rails.application.routes.draw do
-  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
+  get 'tiles/:zoom/:x/:y', to: 'tiles#show', as: :tile
+  resource :map_style, only: :show
 
-  # Defines the root path route ("/")
-  # root "articles#index"
+  root 'maps#show'
 end