diff --git a/css/app.css b/css/app.css
index 5ae1f5d..05a2cf8 100644
--- a/css/app.css
+++ b/css/app.css
@@ -158,12 +158,12 @@ a:visited {
     left: 35vw;
 }
 /* Menu overlay */
-#menu {
+.menu-overlay {
     z-index: 1000;
     overflow-y: auto;
     margin-top: 54px;
 }
-#menu.is-overlay {
+.menu-overlay.is-overlay {
     left: auto;
 }
 /* Content in tabs */
diff --git a/webgis/index.html b/webgis/index.html
index 8a74c02..ef39546 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -25,7 +25,8 @@
     <script src="js/index.js" type="module"></script>
     <title>WebGIS Isola di Capri</title>
 </head>
-<body data-controller="menu" data-action="menu-ready@document->menu#buildMenu">
+<body data-controller="menu"
+    data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu">
     <nav class="navbar mb-0" role="navigation">
         <div class="navbar-brand">
             <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
@@ -46,12 +47,21 @@
         <hr class="navbar-divider">
         <div class="navbar-end pb-1 pt-1" id="nav-menu">
             <button class="navbar-item button is-size-5 is-white mr-3" role="button"
+                data-id="main"
                 data-action="menu#toggleMenu">
                 <span class="icon mr-2">
                     <i class="fa fa-list"></i>
                 </span>
                 Elenco beni
             </button>
+            <button class="navbar-item button is-size-5 is-white mr-3" role="button"
+                data-id="cartography"
+                data-action="menu#toggleMenu">
+                <span class="icon mr-2">
+                    <i class="fa fa-map"></i>
+                </span>
+                Cartografia
+            </button>
             <button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
                 <span class="icon is-large has-text-link">
                     <i class="fas fa-question fa-lg"></i>
@@ -69,7 +79,7 @@
                 <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
             </div>
         </div>
-        <div class="column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter" id="menu"
+        <div class="menu-overlay column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter"
             data-menu-target="menu" data-controller="layer">
             <!-- Template to build menu items dynamically -->
             <template id="menu-item-template">
@@ -256,6 +266,35 @@
                 </ul>
             </aside>
         </div>
+        <div class="menu-overlay column is-hidden is-3 is-3-desktop is-4-mobile is-pulled-right is-overlay has-background-white-ter"
+            data-menu-target="cartography">
+            <!-- Template to build menu items dynamically -->
+            <template id="cartography-item-template">
+                <li>
+                    <label class="checkbox">
+                        <input type="checkbox"
+                            data-controller="layer"
+                            data-action="layer#toggleCartography"
+                            data-layer-id-value=""
+                            data-layer-type-value=""
+                        />
+                    </label>
+                </li>
+            </template>
+            <aside class="menu ml-4 mt-3" data-id="cartography-aside">
+                <button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#close"></button>
+                <p class="menu-label is-size-5 mt-2 is-clickable" data-id="historic">
+                    <span role="button" data-action="click->menu#toggle" data-id="historic">
+                        Catasto storico
+                        <!--
+                            <span class="icon pl-2">
+                                <i class="fa fa-chevron-right" data-menu-target="icon" data-id="historic"></i>
+                            </span>
+                        -->
+                    </span>
+                </p>
+            </aside>
+        </div>
     </div>
     <!-- Bibliography citations template -->
     <template id="biblio-item-template">
diff --git a/webgis/js/controllers/layer_controller.js b/webgis/js/controllers/layer_controller.js
index 0435ea7..e44d616 100644
--- a/webgis/js/controllers/layer_controller.js
+++ b/webgis/js/controllers/layer_controller.js
@@ -1,8 +1,37 @@
 import { Controller } from "@hotwired/stimulus";
 import { GisState } from "../state.js";
+import GIS from "../gis.js";
 
 export default class extends Controller {
-    static targets = ['sites', 'findings', 'notconserved', 'prehist',];
+    static targets = [
+        'sites',
+        'findings',
+        'notconserved',
+        'prehist',
+    ];
+
+    static values = {
+        'id': Number,
+        'type': String,
+    };
+
+    async toggleCartography() {
+        const map = GisState.map;
+        const id = this.idValue;
+
+        let currentLayer = await GIS.getImageOverlay(id);
+        let hasLayer = false;
+
+        map.eachLayer(function (layer) {
+            if (layer.options.label === currentLayer.options.label) {
+                hasLayer |= true;
+                currentLayer = layer;
+            }
+        });
+
+        if (!hasLayer) currentLayer.addTo(map);
+        else map.removeLayer(currentLayer);
+    }
 
     /**
      * @todo Use Stimulus values?
diff --git a/webgis/js/controllers/menu_controller.js b/webgis/js/controllers/menu_controller.js
index ef3313f..7c32d14 100644
--- a/webgis/js/controllers/menu_controller.js
+++ b/webgis/js/controllers/menu_controller.js
@@ -2,7 +2,17 @@ import { Controller } from "@hotwired/stimulus"
 import { GisState } from '../state.js';
 
 export default class extends Controller {
-    static targets = ['list', 'menu', 'icon'];
+    static targets = [
+        'list',
+        'menu',
+        'cartography',
+        'icon'
+    ];
+
+    static values = {
+        'cartography' : String,
+        'main' : String,
+    };
 
     buildMenu() {
         const groups = Object.keys(GisState.markers);
@@ -17,7 +27,6 @@ export default class extends Controller {
             }
         }
     }
-
     /**
      * 
      * @param {String} group 
@@ -47,8 +56,50 @@ export default class extends Controller {
         return ul;
     }
 
-    toggleMenu() {
-        this.menuTarget.classList.toggle('is-hidden');
+    buildCartographyMenu() {
+        const historicCadastre = GisState.cartography.historic;
+        const template = document.getElementById('cartography-item-template');
+        const ul = document.createElement('ul');
+        ul.className = 'menu-list';
+        ul.id = 'historic-sub';
+
+        const aside = document.querySelector('[data-id="cartography-aside"]');
+
+        for (let geoImage of historicCadastre) {
+            const clone = template.content.cloneNode(true);
+            const label = clone.querySelector('label');
+            const checkbox = clone.querySelector('input[type="checkbox"]');
+
+            checkbox.dataset.layerIdValue = geoImage.id;
+            checkbox.dataset.layerTypeValue = 'historic';
+            const span = document.createElement('span');
+            span.className = 'pl-3';
+            span.textContent = geoImage.label;
+            label.appendChild(span);
+
+            ul.appendChild(clone);
+        }
+
+        aside.appendChild(ul);
+    }
+
+    toggleMenu(event) {
+        const menuId = event.target.dataset.id;
+
+        // Stupid...
+        if (menuId === 'main') {
+            this.menuTarget.classList.toggle('is-hidden');
+            if (!this.cartographyTarget.classList.contains('is-hidden')) {
+                this.cartographyTarget.classList.add('is-hidden');
+            }
+        }
+
+        if (menuId === 'cartography') {
+            this.cartographyTarget.classList.toggle('is-hidden');
+            if (!this.menuTarget.classList.contains('is-hidden')) {
+                this.menuTarget.classList.add('is-hidden');
+            }
+        }
     }
 
     close() {
diff --git a/webgis/js/gis.js b/webgis/js/gis.js
index 4e5069b..3b09dd8 100644
--- a/webgis/js/gis.js
+++ b/webgis/js/gis.js
@@ -113,13 +113,12 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
 
     await this.addLayerGroups(map);
-
-    const historicCadastre = await this.imageOverlays();
+    await this.fetchCartographyLayers();
 
     const archeo = {
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesistici' : layerPaesistici,
-        'Catasto storico' : historicCadastre,
+        //'Catasto storico' : historicCadastre,
     };
     L.control.layers(baseMap, archeo).addTo(map);
 
@@ -128,35 +127,45 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     return map;
 }
 /**
- * Load georeferenced image overlays layer group
+ * Fetches references to cartography layers
+ * and updates GisState
  */
-GIS.imageOverlays = async function () {
-    const data = await this._fetchData('geoimage')
+GIS.fetchCartographyLayers = async function () {
+    const data = await this._fetchData('geoimages/menu')
         .catch(error => console.error(`Could not fetch data for geo images: ${error}`));
 
-    const overlays = L.layerGroup();
-
-    for (let image of data) {
-        let polygonCoords = JSON.parse(image.polygon).coordinates[0];
-        // Image rectangle bounds are SE and NW coordinates from the PostGIS polygon
-        // with long/lat swapped...
-        const se = [polygonCoords[0][1], polygonCoords[0][0]];
-        const nw = [polygonCoords[2][1], polygonCoords[2][0]];
-        const bounds = [se, nw];
-
-        const imageOverlay = L.imageOverlay(
-            `/webgis/img/geo/${image.filename}`,
-            bounds,
-            {
-                opacity: 0.8,
-                alt: `Immagine georeferita dal catasto storico di Capri`
-            }
-        );
-
-        overlays.addLayer(imageOverlay);
+    for (let item of data) {
+        let {id, label} = item;
+        GisState.cartography.historic.push({id, label});
     }
+}
+/**
+ * Load georeferenced image overlays layer group
+ * @param {Number} imageId - The API id of the georeferenced image
+ * @returns {L.ImageOverlay}
+ */
+GIS.getImageOverlay = async function (imageId) {
+    const imageData = await this._fetchData(`geoimages/${imageId}`)
+        .catch(error => console.error(`Could not fetch data for geo image ${imageId}: ${error}`));
 
-    return overlays;
+    let polygonCoords = JSON.parse(imageData.polygon).coordinates[0];
+    // Image rectangle bounds are SE and NW coordinates from the PostGIS polygon
+    // with long/lat swapped...
+    const se = [polygonCoords[0][1], polygonCoords[0][0]];
+    const nw = [polygonCoords[2][1], polygonCoords[2][0]];
+    const bounds = [se, nw];
+
+    const imageOverlay = L.imageOverlay(
+        `/webgis/img/geo/${imageData.filename}`,
+        bounds,
+        {
+            opacity: 0.8,
+            alt: `Immagine georeferita (${imageData.label})`,
+            label: `geoimage:${imageData.id}:${imageData.label}`,
+        }
+    );
+
+    return imageOverlay;
 }
 /**
  * Add layer groups to map
diff --git a/webgis/js/state.js b/webgis/js/state.js
index b62b216..1decfa5 100644
--- a/webgis/js/state.js
+++ b/webgis/js/state.js
@@ -11,10 +11,11 @@
 /**
  * @typedef {Object} GisStateType
  * @property {L.Map|null} map
- * @property {String|null} apiUrl
  * @property {MarkerLookup} markers
  * @property {LayerGroupLookup} layers
  * @property {Object|null} bibliography
+ * @property {String|null} apiUrl
+ * @property {Object} cartography
  */
 
 /** @type {GisStateType} */
@@ -36,6 +37,9 @@ export const GisState = {
     },
     bibliography: null,
     apiUrl : null,
+    cartography : {
+        historic: [],
+    }
 }
 
 /**
diff --git a/webgis/js/ui.js b/webgis/js/ui.js
index d6e0354..af468e8 100644
--- a/webgis/js/ui.js
+++ b/webgis/js/ui.js
@@ -68,31 +68,6 @@ UI.toggleBurger = function(burgerClass) {
 		document.querySelector(`#${menuId}`).classList.toggle('is-active');
 	});
 }
-/**
- * Toggle side menu
- * @param {string} triggerId The ID of the trigger element
- * @param {?string} listId The ID of the menu list to open (if any)
- */
-UI.toggleMenu = function (triggerId, listId = null) {
-	const trigger = document.querySelector(`#${triggerId}`);
-	const menu = document.querySelector('#menu');
-	trigger.addEventListener('click', () => {
-		menu.classList.remove('is-hidden');
-		//menu.classList.add('is-3');
-		const lists = menu.querySelectorAll('ul');
-
-		if (listId !== null) {
-			const list = document.querySelector(`#${listId}`);
-			list.classList.remove('is-hidden');
-
-			for (let ul of lists) {
-				if (ul.id !== listId && !ul.id.includes('sub')) {
-					ul.classList.add('is-hidden');
-				}
-			}
-		}
-	});
-}
 /**
  * Open a modal with DB site data
  * @param {object} data The data retrieved from the DB to display as modal content
