Add Stimulus Map and Taxonomy (WIP)

This commit add StimulusJS interaction for the map
and taxonomy, as well as styling.

It provides preliminary work to hook up live data on the map
from the taxonomy.

19 files changed, 246 insertions, 88 deletions

diff --git a/app/assets/stylesheets/application/_body.scss b/app/assets/stylesheets/application/_body.scss
index 06db39a..95bea4f 100644
--- a/app/assets/stylesheets/application/_body.scss
+++ b/app/assets/stylesheets/application/_body.scss
@@ -43,11 +43,6 @@ body {
     }
 }
 
-main > article {
-    background-color: rgba(255, 255, 255, 0.8);
-    z-index: 990;
-}
-
 img {
     max-width: 100%;
 }
@@ -61,9 +56,18 @@ main {
     }
 }
 
+main > article {
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 990;
+}
+
 body>aside {
     position: fixed;
-    z-index: 1001;
+    z-index: 1000;
+    background-color: var(--incommon-clear85);
+    top: 9rem;
+    bottom: 0;
+    border-top-right-radius: 1rem;
 }
 
 
@@ -155,6 +159,9 @@ body>aside {
     --gold: #e7c300;
     --silver: silver;
     --bronze: #cd7f32;
+    --incommon-blue: #216778;
+    --incommon-blue50: rgba(33, 103, 120, 0.5);
+    --incommon-clear85: rgba(237, 238, 201, 0.85);
     --icon-menu-off: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQzNDQiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE0MzUwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDM0OCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoNDM0MiIKICAgICBkPSJtIDE5LjQ4NDMzLDIxLjIzNDQgcSAwLjY0MDYyLC0xLjQ4NDQgMC42NDA2MiwtMy4xMDk0IDAsLTEuNjI1IC0wLjY0MDYyLC0zLjA5MzcgLTAuNjI1LC0xLjQ4NDQgLTEuNzAzMSwtMi41NjI1IC0xLjA3ODE0LC0xLjA3ODEgLTIuNTYyNDksLTEuNzAzMSAtMS40Njg3MywtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgLTEuNjI0OTcsMCAtMy4xMDkzOSwwLjY0MDcgUSA3LjU0NjksMTEuMzkwNyA2LjQ2ODc3LDEyLjQ2ODggNS4zOTA2MywxMy41NDY5IDQuNzUsMTUuMDMxMyA0LjEyNSwxNi41IDQuMTI1LDE4LjEyNSBxIDAsMS42MjUgMC42MjUsMy4xMDk0IDAuNjQwNjIsMS40Njg3IDEuNzE4NzcsMi41NDY5IDEuMDc4MTMsMS4wNzggMi41NDY4NywxLjcxODcgMS40ODQzNSwwLjYyNSAzLjEwOTM5LDAuNjI1IDEuNjI0OTgsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OSwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzEsLTIuNTQ2OSB6IG0gMTIuMDAwMDYsMCBxIDAuNjQwNjMsLTEuNDg0NCAwLjY0MDYzLC0zLjEwOTQgMCwtMS42MjUgLTAuNjQwNjMsLTMuMDkzNyAtMC42MjUsLTEuNDg0NCAtMS43MDMwOSwtMi41NjI1IC0xLjA3ODEzLC0xLjA3ODEgLTIuNTYyNDgsLTEuNzAzMSAtMS40Njg3NCwtMC42NDA3IC0zLjA5MzcxLC0wLjY0MDcgaCAtNi4wMzEyNiBxIDEuODU5MzMsMS40MDYzIDIuOTM3NDcsMy41IDEuMDkzNzUsMi4wOTM4IDEuMDkzNzUsNC41IDAsMi40MDYzIC0xLjA5Mzc1LDQuNSAtMS4wNzgxNCwyLjA5MzcgLTIuOTM3NDcsMy41IGggNi4wMzEyNiBxIDEuNjI0OTcsMCAzLjA5MzcxLC0wLjYyNSAxLjQ4NDM1LC0wLjY0MDcgMi41NjI0OCwtMS43MTg3IDEuMDc4MTQsLTEuMDc4MiAxLjcwMzA5LC0yLjU0NjkgeiBNIDMzLjMyODEyLDE0LjI1IHEgMC43OTY4OCwxLjg0MzggMC43OTY4OCwzLjg3NSAwLDIuMDMxMyAtMC43OTY4OCwzLjg5MDYgLTAuNzk2ODcsMS44NDM4IC0yLjE0MDU5LDMuMTg3NSAtMS4zMjgxMSwxLjMyODEgLTMuMTg3NTEsMi4xMjUgLTEuODQzNzMsMC43OTY5IC0zLjg3NDk4LDAuNzk2OSBIIDEyLjEyNDk2IHEgLTIuMDMxMjYsMCAtMy44OTA1OSwtMC43OTY5IFEgNi4zOTA2NSwyNi41MzEyIDUuMDQ2ODYsMjUuMjAzMSAzLjcxODc1LDIzLjg1OTQgMi45MjE4NywyMi4wMTU2IDIuMTI1LDIwLjE1NjMgMi4xMjUsMTguMTI1IDIuMTI1LDE2LjA5MzggMi45MjE4NywxNC4yNSAzLjcxODc1LDEyLjM5MDYgNS4wNDY4NiwxMS4wNjI1IDYuMzkwNTgsOS43MTg4IDguMjM0MzcsOC45MjE5IDEwLjA5MzcsOC4xMjUgMTIuMTI0OTYsOC4xMjUgaCAxMi4wMDAwOCBxIDIuMDMxMjUsMCAzLjg3NDk4LDAuNzk2OSAxLjg1OTMzLDAuNzk2OSAzLjE4NzUxLDIuMTQwNiAxLjM0MzcyLDEuMzI4MSAyLjE0MDU5LDMuMTg3NSB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODAiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMzODMxIgogICAgIGN4PSIxMi4xMjU3MDQiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo=');
     --icon-menu-on: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM0NDMiCiAgIHdpZHRoPSIzNi4yNSIKICAgaGVpZ2h0PSIzNi4yNSIKICAgdmVyc2lvbj0iMS4xIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEzNDQ5Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzQ0NyIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMzQ0MSIKICAgICBkPSJtIDIuOTE4ODU3NCwyMi4wMTY3OSBxIC0wLjc5Mzg1NzEsLTEuODYzNjc0IC0wLjc5Mzg1NzEsLTMuODkzNjggMCwtMi4wMzAwMDYgMC43OTM4NTcxLC0zLjg3NDc3OSBRIDMuNzIwMjc0OSwxMi4zODg0MzggNS4wNDcxNTAxLDExLjA2MTU2MiA2LjM5MjkyNjgsOS43MTU3ODUzIDguMjMzOTE5NCw4LjkxODE0ODMgMTAuMDkzODEzLDguMTI0MjkxMyAxMi4xMjc2LDguMTI0MjkxMyBoIDExLjk5ODU4MiBxIDIuMDMwMDA2LDAgMy44NzQ3NzgsMC43OTM4NTcgMS44NTk4OTQsMC43OTc2MzcgMy4xODY3NjksMi4xNDM0MTM3IDEuMzQ1Nzc3LDEuMzI2ODc2IDIuMTQzNDE1LDMuMTg2NzY5IDAuNzkzODU2LDEuODQ0NzczIDAuNzkzODU2LDMuODc0Nzc5IDAsMi4wMzM3ODUgLTAuNzkzODU2LDMuODkzNjggLTAuNzk3NjM4LDEuODQ0NzcyIC0yLjE0MzQxNSwzLjE4Njc2OSAtMS4zMjMwOTUsMS4zMjY4NzUgLTMuMTg2NzY5LDIuMTI0NTEyIC0xLjg0NDc3MiwwLjc5NzYzOCAtMy44NzQ3NzgsMC43OTc2MzggSCAxMi4xMjc2IHEgLTIuMDMzNzg3LDAgLTMuODkzNjgwNiwtMC43OTM4NTggUSA2LjM5MjkyNjgsMjYuNTMwNDM0IDUuMDQ3MTUwMSwyNS4yMDM1NTkgMy43MjAyNzQ5LDIzLjg2MTU2MiAyLjkyMjYzNzYsMjIuMDE2NzkgWiBNIDIxLjAxODc5OSwyNS41MDIyIHEgMS40ODU2NDYsMC42MjM3NDUgMy4xMTExNjMsMC42MjM3NDUgMS42MjU1MTcsMCAzLjA5MjI2MiwtMC42MjM3NDUgMS40ODU2NDcsLTAuNjQyNjQ2IDIuNTYzMDI1LC0xLjcyMDAyNCAxLjA4MTE1NywtMS4wNzczNzcgMS43MDExMjIsLTIuNTQ3OTAzIDAuNjQyNjQ2LC0xLjQ4NTY0NiAwLjY0MjY0NiwtMy4xMTExNjMgMCwtMS42MjU1MTcgLTAuNjQyNjQ2LC0zLjA5MjI2MiAtMC42MTk5NjUsLTEuNDg1NjQ3IC0xLjcwMTEyMiwtMi41NjMwMjUgLTEuMDc3Mzc4LC0xLjA3NzM3NyAtMi41NjMwMjUsLTEuNzAxMTIyIC0xLjQ2Njc0NSwtMC42NDI2NDYgLTMuMDkyMjYyLC0wLjY0MjY0NiAtMS42MjU1MTcsMCAtMy4xMTExNjMsMC42NDI2NDYgLTEuNDcwNTI2LDAuNjIzNzQ1IC0yLjU0NzkwNCwxLjcwMTEyMiAtMS4wNzczNzcsMS4wNzczNzggLTEuNzIwMDIzLDIuNTYzMDI1IC0wLjYyMzc0NSwxLjQ2Njc0NSAtMC42MjM3NDUsMy4wOTIyNjIgMCwxLjYyNTUxNyAwLjYyMzc0NSwzLjExMTE2MyAwLjY0MjY0NiwxLjQ3MDUyNiAxLjcyMDAyMywyLjU0NzkwMyAxLjA3NzM3OCwxLjA3NzM3OCAyLjU0NzkwNCwxLjcyMDAyNCB6IgogICAgIHN0eWxlPSJmaWxsOiMwMDgwODA7ZmlsbC1vcGFjaXR5OjEiIC8+CiAgPGNpcmNsZQogICAgIHI9IjguMDE1MDAwMyIKICAgICBjeT0iMTguMTMyMDc4IgogICAgIGN4PSIyNC4xMjI3ODkiCiAgICAgaWQ9InBhdGg0ODk1IgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZWRlZWM5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxOC42MzU4NjIzNTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiIC8+Cjwvc3ZnPgo=');
 }
diff --git a/app/assets/stylesheets/taxonomies.scss b/app/assets/stylesheets/taxonomies.scss
index 446fd20..4e227da 100644
--- a/app/assets/stylesheets/taxonomies.scss
+++ b/app/assets/stylesheets/taxonomies.scss
@@ -4,39 +4,45 @@
  * SPDX-License-Identifier: LAL-1.3
  */
 
-body>aside {
-    width: auto;
-
-    span[data-target="taxonomy.filter"] {
-        z-index: 990;
-        background: var(--icon-menu-on) top left/32px no-repeat;
-        width: 32px;
-        height: 32px;
-        position: absolute;
-        top: 6.1rem;
-        left: 10px;
-
-        &.off {
-            background-image: var(--icon-menu-off);
-        }
-        &.on {
-            background-image: var(--icon-menu-on);
-        }
-    }
+[data-controller="taxonomy"] {
+    height: 100%;
+    overflow: hidden auto;
+    scrollbar-color: var(--incommon-clear85) var(--incommon-blue);
+    scrollbar-width: thin;
 
     nav {
-        z-index: 900;
-        position: fixed;
-        top: 5.5rem;
+        position: relative;
         bottom: 0;
         margin: 0;
         padding: 0;
-        background-color: var(--incommon-blue);
-        display: block;
-        border-top-right-radius: 1rem;
-        width: 20rem;
         height: calc(100% - 7.5rem);
-        padding-top: 48px;
+        padding-top: 32px;
+        max-width: 35rem;
+        width: 89vw;
+
+        display: none;
+    }
+    &.on {
+        nav {
+            display: block;
+        }
+    }
+}
+
+button[data-action="taxonomy#toggle"] {
+    position: absolute;
+    left: 0.7rem;
+    display: block;
+    cursor: pointer;
+    padding: 16px;
+    color: transparent;
+    background: transparent var(--icon-menu-off) top left/32px no-repeat;
+    border: none;
+    text-align: center;
+    z-index: 1002;
+
+    &.on {
+        background-image: var(--icon-menu-on);
     }
 }
 
@@ -49,21 +55,22 @@ body>aside {
 
         li {
             padding: 0.5rem 1rem;
+            font-weight: normal;
+            text-align: left;
+            z-index: 1001;
         }
 
         ol {
             display: none;
         }
-        ol.active {
-            font-weight: bold;
+    }
+    .active {
+        font-weight: bold;
+        ol {
+            display: block;
+        }
+        li.active {
             text-align: right;
-            li {
-                display: initial;
-                &.active {
-                    font-weight: bold;
-                    text-align: right;
-                }
-            }
         }
     }
 
diff --git a/app/assets/stylesheets/taxonomies/filter.scss b/app/assets/stylesheets/taxonomies/filter.scss
new file mode 100644
index 0000000..7506632
--- /dev/null
+++ b/app/assets/stylesheets/taxonomies/filter.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the taxonomies/filter controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
diff --git a/app/assets/stylesheets/welcome.scss b/app/assets/stylesheets/welcome.scss
index aae15d5..5854dd0 100644
--- a/app/assets/stylesheets/welcome.scss
+++ b/app/assets/stylesheets/welcome.scss
@@ -8,36 +8,3 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
 
-button[data-action="taxonomy#toggle"] {
-    position: absolute;
-    top: 9rem;
-    left: 0.7rem;
-    display: block;
-    cursor: pointer;
-    padding: 16px;
-    color: transparent;
-    z-index: 990;
-    background: transparent var(--icon-menu-off) top left/32px no-repeat;
-    border: none;
-    text-align: center;
-}
-button[data-action="taxonomy#toggle"].on {
-    background-image: var(--icon-menu-on);
-}
-
-[data-controller="taxonomy"] nav {
-    display: block;
-    position: fixed;
-    top: 9rem;
-    bottom: 0;
-    max-width: 35rem;
-    background-color: rgba(0,128,128,0.5);
-    z-index: -1;
-    display: none;
-    border-top-right-radius: 1rem;
-}
-[data-controller="taxonomy"] nav.on {
-    width: 89vw;
-    z-index: 900;
-    display: block;
-}
diff --git a/app/controllers/taxonomies/filter_controller.rb b/app/controllers/taxonomies/filter_controller.rb
new file mode 100644
index 0000000..ad3514c
--- /dev/null
+++ b/app/controllers/taxonomies/filter_controller.rb
@@ -0,0 +1,7 @@
+class Taxonomies::FilterController < ApplicationController
+  # GET /taxonomies/:id/filter
+  def show
+    @taxonomy = Taxonomy.find_by(uuid: params[:id])
+    render partial: "taxonomies/filter/taxonomy"
+  end
+end
diff --git a/app/controllers/taxonomies_controller.rb b/app/controllers/taxonomies_controller.rb
new file mode 100644
index 0000000..f33595a
--- /dev/null
+++ b/app/controllers/taxonomies_controller.rb
@@ -0,0 +1,11 @@
+class TaxonomiesController < ApplicationController
+  # GET /taxonomies
+  def index
+    @taxonomies = current_agent.taxonomies.order(:uuid).page params[:page]
+  end
+
+  # GET /taxonomies/:id
+  def show
+    @taxonomy = Taxonomy.find_by(uuid: params[:id])
+  end
+end
diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
index e7743e8..85246e5 100644
--- a/app/controllers/welcome_controller.rb
+++ b/app/controllers/welcome_controller.rb
@@ -6,6 +6,7 @@ class WelcomeController < ApplicationController
   # GET /
   def index
     @map       = Map.first
+    @taxonomy  = @map.taxonomy
     @resources = Resource.order(:uuid).page params[:page]
     Rails.logger.info "WECLOME ///// #{@resources&.count || 0}"
   end
diff --git a/app/helpers/taxonomies/filter_helper.rb b/app/helpers/taxonomies/filter_helper.rb
new file mode 100644
index 0000000..97fe271
--- /dev/null
+++ b/app/helpers/taxonomies/filter_helper.rb
@@ -0,0 +1,22 @@
+# SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc>
+#
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+# coding: utf-8
+# frozen_string_literal: true
+module Taxonomies::FilterHelper
+  def taxonomy_filter
+    @taxonomy ||= Taxonomy.first
+    html = []
+    @taxonomy.categories.each do |cat|
+      list = []
+      cat.sections.each do |sec|
+        list << tag.li(h("#{sec.rank}. #{sec.name}"), id: "section-#{sec.id}", data: { action: "taxonomy#section", target: 'taxonomy.section', 'taxonomy-section-id': sec.id })
+      end
+      html << tag.li(h("#{cat.rank}. #{cat.name}") << tag.ol(list.join.html_safe),
+                     id: "category-#{cat.id}",
+                     data: { action: "click->taxonomy#category", target: 'taxonomy.category', 'taxonomy-category-id': cat.id })
+    end
+    raw(tag.nav(tag.ol(html.join.html_safe), id: "taxonomy-#{@taxonomy.uuid}"))
+  end
+end
diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
new file mode 100644
index 0000000..5363e5e
--- /dev/null
+++ b/app/javascript/controllers/map_controller.js
@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+//
+
+import { Controller } from "stimulus"
+import L from "leaflet"
+import "leaflet/dist/leaflet.css"
+
+export default class extends Controller {
+    static targets = [ "container" ]
+
+    initialize() {
+        console.log("Map controller initialized.")
+    }
+
+    connect() {
+        this.map = L.map(this.containerTarget, {
+            zoomDelta: 0.5,
+            zoomSnap: 0.5,
+        }).setView(this._coordinates(), this._zoom());
+
+        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+		        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
+		        maxZoom: 18,
+		        id: 'mapbox/streets-v11',
+		        tileSize: 512,
+		        zoomOffset: -1,
+		        accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
+        }).addTo(this.map);
+    }
+
+    disconnect() {
+        this.map.remove();
+        console.log('Map controller disconnected.')
+    }
+
+    _coordinates() {
+        return [this.data.get('latitude'), this.data.get('longitude')];
+    }
+
+    _zoom() {
+        return this.data.get('zoom');
+    }
+
+}
diff --git a/app/javascript/controllers/taxonomy_controller.js b/app/javascript/controllers/taxonomy_controller.js
new file mode 100644
index 0000000..16d57fa
--- /dev/null
+++ b/app/javascript/controllers/taxonomy_controller.js
@@ -0,0 +1,56 @@
+// SPDX-FileCopyrightText: 2020 IN COMMON Collective <collective@incommon.cc>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+//
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+    static targets = [ "category", "deploy", "filter", "section", "toggle" ]
+
+    initialize() {
+        console.log("Taxonomy controller initialized.")
+    }
+
+    connect() {
+        console.log("Taxonomy controller connected.")
+
+        if (this.hasFilterTarget) {
+            let url = `/taxonomies/${this.data.get('uuid')}/filter.js`
+            console.log(`loading url = ${url}`)
+            fetch(url, {
+                headers: { accept: 'application/json'}
+            })
+                .then(response => response.text())
+                .then(html => this.filterTarget.innerHTML = html)
+        } else {
+            console.log("Taxonomy filter is missing")
+        }
+    }
+
+    deploy() {
+        console.log(`deploying taxonomy ${this.data.get('uuid')}`);
+        fetch(`/taxonomies/${this.data.get('uuid')}.js`)
+            .then(response => response.text())
+            .then(html => this.deployTarget.innerHTML = html);
+    }
+
+    toggle() {
+        var cssClass = 'on';
+        this.toggleTarget.classList.toggle(cssClass)
+        this.filterTarget.parentNode.classList.toggle(cssClass)
+    }
+
+    category(event) {
+        let catId = event.target.dataset.taxonomyCategoryId
+        event.target.classList.toggle('active')
+    }
+
+    section(event) {
+        let catId = event.target.dataset.taxonomySectionId
+        event.target.classList.toggle('active')
+    }
+}
diff --git a/app/views/taxonomies/_taxonomy.html.erb b/app/views/taxonomies/_taxonomy.html.erb
new file mode 100644
index 0000000..eff6931
--- /dev/null
+++ b/app/views/taxonomies/_taxonomy.html.erb
@@ -0,0 +1,8 @@
+<section id="taxonomy-<%= taxonomy.to_param %>" data-controller="taxonomy" data-taxonomy-uuid="<%= taxonomy.uuid %>">
+    <h3><%= taxonomy.name %></h3>
+    <p class="summary"><%= h taxonomy.summary %></p>
+    <div class="description"><%= m taxonomy.description %></div>
+    <button data-action="taxonomy#deploy">Preview</button>
+    <div class="deploy" data-target="taxonomy.deploy"></div>
+</section>
+
diff --git a/app/views/taxonomies/filter/_taxonomy.html.erb b/app/views/taxonomies/filter/_taxonomy.html.erb
new file mode 100644
index 0000000..99e9c89
--- /dev/null
+++ b/app/views/taxonomies/filter/_taxonomy.html.erb
@@ -0,0 +1 @@
+<%= taxonomy_filter %>
diff --git a/app/views/taxonomies/filter/show.html.erb b/app/views/taxonomies/filter/show.html.erb
new file mode 100644
index 0000000..99e9c89
--- /dev/null
+++ b/app/views/taxonomies/filter/show.html.erb
@@ -0,0 +1 @@
+<%= taxonomy_filter %>
diff --git a/app/views/taxonomies/index.html.erb b/app/views/taxonomies/index.html.erb
new file mode 100644
index 0000000..d060f6c
--- /dev/null
+++ b/app/views/taxonomies/index.html.erb
@@ -0,0 +1,5 @@
+<section id="taxonomies">
+    <h2>Available Taxonomies</h2>
+
+    <%= render collection: @taxonomies: %>
+</section>
diff --git a/app/views/taxonomies/show.html.erb b/app/views/taxonomies/show.html.erb
new file mode 100644
index 0000000..99e9c89
--- /dev/null
+++ b/app/views/taxonomies/show.html.erb
@@ -0,0 +1 @@
+<%= taxonomy_filter %>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index eac1eff..2a154ae 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -1,23 +1,13 @@
-<% content_for :head do %>
-    <%= stylesheet_link_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css",
-                            integrity: "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==",
-                            crossorigin: '') %>
-    <%= javascript_include_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.js",
-                               integrity: "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==",
-                               crossorigin: '') %>
-<% end %>
-
 <h1>Bienvenue à l'atelier carto d'IN COMMON</h1>
 
 <%= map_container %>
 
 <% content_for :aside do %>
-    <div data-controller="taxonomy" data-taxonomy-id="2519915f-d19c-4281-b758-f5ddb889d7fa">
+    <div data-controller="taxonomy" data-taxonomy-uuid="<%= @taxonomy.to_param %>">
         <div class="leaflet-bar leaftlet-control" id="taxonomy-toggle">
-            <button data-action="taxonomy#toggle"></button>
+            <button data-action="taxonomy#toggle" data-target="taxonomy.toggle"></button>
         </div>
-        <nav data-target="taxonomy.filter">
-        </nav>
+        <div data-target="taxonomy.filter"></div>
     </div>
 <% end %>
 
diff --git a/config/routes.rb b/config/routes.rb
index a3fcf8c..f5c6194 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -11,6 +11,9 @@ Rails.application.routes.draw do
     shallow do
       # Classification routes
       resources :taxonomies do
+        member do
+          get :filter, to: 'taxonomies/filter#show'
+        end
         resources :categories do
           resources :sections
         end
diff --git a/db/migrate/20201110225447_create_maps.rb b/db/migrate/20201110225447_create_maps.rb
new file mode 100644
index 0000000..bf001f0
--- /dev/null
+++ b/db/migrate/20201110225447_create_maps.rb
@@ -0,0 +1,14 @@
+class CreateMaps < ActiveRecord::Migration[6.0]
+  def change
+    create_table :maps do |t|
+      t.uuid :uuid, null: false, unique: true
+      t.decimal :latitude, precision: 9, scale: 7
+      t.decimal :longitude, precision: 10, scale: 7
+      t.integer :zoom, default: 13
+      t.references :taxonomy, null: false, foreign_key: true
+
+      t.timestamps
+    end
+    add_index :maps, [:uuid], unique: true
+  end
+end
diff --git a/db/seeds.rb b/db/seeds.rb
index ea9fc25..6252ebf 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -48,3 +48,8 @@ if Category.count == 0
     end
   end
 end
+
+# Create default map
+if Map.count == 0
+  Map.create(uuid: "1a42651e-3fe8-4e83-bfcd-f14bb8d0c713", latitude: 50.8503396, longitude: 4.3517103, zoom: 13, taxonomy_id: 1)
+end