diff --git a/js/caprigis.js b/js/caprigis.js
index d2b6ba3..2a06325 100644
--- a/js/caprigis.js
+++ b/js/caprigis.js
@@ -5,6 +5,8 @@
  */
 const GIS = {};
 
+GIS.CENTER_COORDS = [40.5492, 14.2317];
+GIS.INIT_ZOOM = 15;
 const optionsVincoli = {
     color: '#222',
     opacity: 0.8,
@@ -54,7 +56,7 @@ function capitalize(text) {
  * @param {number} zoomLevel
  * @returns {{map: Map, sites: Layer}}
  */
-GIS.initMap = async function (mapId, zoomLevel = 15) {
+GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
     let layerSiti = await this.loadLayer('siti.geojson', optionsSiti, false);
     // TODO named parameters??
@@ -68,7 +70,7 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
         attributionControl: false,
         minZoom: 11,
         layers: [osmap, layerVincoli, layerSiti, layerPaesistici]
-    }).setView([40.5492, 14.2317], zoomLevel);
+    }).setView(this.CENTER_COORDS, zoomLevel);
 
     map.crs = L.CRS.EPSG4326;
 
diff --git a/js/index.js b/js/index.js
index d0e1329..8dd2638 100644
--- a/js/index.js
+++ b/js/index.js
@@ -3,7 +3,10 @@ import UI from './ui.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     const init = await GIS.initMap('map');
+    let {map, sites} = init;
 
-    const centerCoords = init.sites.getBounds().getCenter();
-    UI.addSitesControl(init.map, centerCoords, 'Grotta di Matermania');
+    UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
+
+    const centerCoords = sites.getBounds().getCenter();
+    UI.addSitesControl(map, centerCoords, 'Grotta di Matermania');
 });
\ No newline at end of file
diff --git a/js/ui.js b/js/ui.js
index 81074e5..45afcf0 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -25,15 +25,35 @@ const siteIcon = `<svg
 </svg>`;
 
 /**
- * Zoom and pan the map to a given layer position
+ * Add a control to center the map
  * @param {Map} map
- * @param {Layer} layer
+ * @param {LatLngExpression} centerCoords
  * @param {number} zoom Zoom level
  */
-UI.zoomToPosition = function (map, layer, zoom = 20) {
-    const center = layer.getCenter();
+UI.addCenterMapControl = function (map, centerCoords, zoom) {
+    L.Control.CenterControl = L.Control.extend({
+        options: {
+            position: 'topleft'
+        },
+        onAdd: function (map) {
+            let controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
+            L.DomEvent
+                .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
+                .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
+                .addListener(controlDiv, 'click', function () {
+                    map.setView(centerCoords, zoom, {animate: true});
+                }
+            );
+            let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
+            controlUI.title = 'Centra la mappa';
+            controlUI.href = '#';
+            controlUI.innerHTML = siteIcon;
+            return controlDiv;
+        }
+    });
 
-    map.setView(center, zoom, {animate: true});
+    let centerCtr = new L.Control.CenterControl();
+    map.addControl(centerCtr);
 }
 /**
  *