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.

16 files changed, 224 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 %>