diff --git a/src/css/shared/steps/map/styles.less b/src/css/shared/steps/map/styles.less
index 1f6fcb4..5854c97 100644
--- a/src/css/shared/steps/map/styles.less
+++ b/src/css/shared/steps/map/styles.less
@@ -41,15 +41,39 @@ map {
           margin: 0 0 auto 0;
           &.next-step {
             .bg_blanco();
-            border-color:@azul_iucn;
+            border-color: @azul_iucn;
             background-image: url('../../../assets/icon/arrow_scroll-h.svg');
           }
           &.resetBbox {
             .bg_blanco();
-            border-color:@azul_iucn;
+            border: 2px solid fade(#212121, 50%);
             background-image: url('../../../assets/icon/centermap.svg');
           }
         }
+
+        .zoomControl {
+          box-sizing: border-box;
+          width: 32px;
+          border: 2px solid fade(#212121, 50%);
+          border-radius: 20px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          margin-top: 16px;
+          .bg_blanco();
+
+          .zoomIn {
+            border: none;
+            background-image: url('../../../assets/icon/zoom-in.svg');
+            border-radius: 0;
+            border-bottom: 1px solid fade(#212121, 50%);
+          }
+          .zoomOut {
+            border: none;
+            background-image: url('../../../assets/icon/zoom-out.svg');
+          }
+        }
       }
     }
   }
diff --git a/src/css/styles.css b/src/css/styles.css
index b77af1a..57282c0 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -11,7 +11,7 @@
 -------------------------------------------------------------------------------*/
 /* Let's default this puppy out
 -------------------------------------------------------------------------------*/
-@import url('https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,500,600,700,800,900|Merriweather:300,400,400i,700,700i,900,900i');
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans:200,300,400,400i,500,600,600i,700,800,900|Merriweather:300,400,400i,700,700i,900,900i');
 html,
 body,
 body div,
@@ -3956,6 +3956,7 @@ body {
   animation-name: scaleFull;
 }
 .fira_sans {
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
 }
 .merriweather {
@@ -4298,6 +4299,7 @@ menu .intro.active:before {
   content: attr(data-content);
   position: absolute;
   font-size: 10px;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   bottom: -15px;
   text-align: center;
@@ -4389,8 +4391,8 @@ paragraph .component-container {
   animation-iteration-count: 1;
 }
 paragraph .component-container.highlight {
-  font-family: 'Fira Sans', sans-serif;
   font-weight: 300;
+  font-family: 'Fira Sans', sans-serif;
   font-size: 24px;
   line-height: 32px;
 }
@@ -4401,11 +4403,11 @@ paragraph .capitalized span:first-of-type {
   float: left;
   position: relative;
   font-size: 156px;
-  font-weight: 900;
   color: #14406D;
   padding-top: 52px;
   padding-bottom: 30px;
   padding-right: 10px;
+  font-weight: 900;
   font-family: 'Fira Sans', sans-serif;
 }
 image {
@@ -4455,6 +4457,7 @@ image info {
 image .credit {
   position: absolute;
   bottom: 0;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #b1b1b1;
   font-size: 12px;
@@ -4531,8 +4534,12 @@ info > .component-container {
   -o-animation-name: fadeIn;
   animation-name: fadeIn;
 }
+info > .component-container .btn-row:not(.hidden) {
+  padding-top: 36px;
+}
 info > .component-container .btn-row .btn.download {
   opacity: 1;
+  visibility: visible;
   -webkit-animation-duration: 0.3s;
   -moz-animation-duration: 0.3s;
   -o-animation-duration: 0.3s;
@@ -4554,24 +4561,31 @@ info > .component-container .btn-row .btn.download {
   -o-animation-name: fadeIn;
   animation-name: fadeIn;
   position: relative;
-  width: 120px;
+  width: auto;
   height: 32px;
+  padding: 0 10px;
   border-radius: 16px;
-  background-color: #0079BA;
   border: 2px solid #0079BA;
   line-height: 30px;
   text-align: center;
+  font-size: 12px;
+  text-transform: uppercase;
+  display: table;
+  letter-spacing: 1px;
+  margin: 0 0 16px 0;
+  background-color: #0079BA;
+  font-weight: 600;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
-  font-weight: 500;
-  font-size: 12px;
 }
 info > .component-container .btn-row.hidden .btn.download {
   opacity: 0;
+  visibility: hidden;
   -webkit-animation-name: fadeOut;
   -moz-animation-name: fadeOut;
   -o-animation-name: fadeOut;
   animation-name: fadeOut;
+  display: none;
 }
 info > .component-container .info {
   width: 400px;
@@ -4583,11 +4597,11 @@ info > .component-container .info {
 info > .component-container .info paragraph {
   padding: 0;
   margin-left: 0;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 14px;
   line-height: 18px;
-  font-weight: normal;
   margin-bottom: 10px;
 }
 info > .component-container .info > paragraph,
@@ -4620,28 +4634,70 @@ info > .component-container .info::-webkit-scrollbar-track {
 info > .component-container .info.hidden {
   display: none;
 }
-info > .component-container .title {
+info > .component-container .allMapLayers {
+  max-height: 92%;
+  overflow-y: auto;
+}
+info > .component-container .allMapLayers .mapLayerWrapper {
+  width: 320px;
+}
+info > .component-container .allMapLayers .mapLayerWrapper:not(:last-child) {
+  border-bottom: 2px solid #0079BA;
+  margin-bottom: 10px;
+  padding-bottom: 22px;
+}
+info > .component-container .titleWrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+info > .component-container .titleWrapper .btn {
+  background-color: white;
+  color: #0079BA;
+  border: 2px solid #0079BA;
+  background-image: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-family: 'Fira Sans', sans-serif;
+  margin-right: 8px;
+}
+info > .component-container .titleWrapper .btn.selected {
+  border: 2px solid transparent;
+}
+info > .component-container .titleWrapper .title {
+  font-weight: 600;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
-  font-size: 24px;
-  line-height: 32px;
+  font-size: 14px;
+  line-height: 18px;
   font-weight: 800;
   font-style: italic;
-  margin-bottom: 8px;
+  display: inline-flex;
+  max-width: 279px;
+  cursor: pointer;
+}
+info > .component-container .titleWrapper .title.selected {
+  font-size: 24px;
+  line-height: 32px;
 }
 info > .component-container .credit {
   display: block;
   width: 320px;
   padding: 0 0 16px 0;
   margin-top: 15px;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 14px;
   line-height: 18px;
-  font-weight: normal;
   position: relative;
 }
-info > .component-container .credit:before {
+info > .component-container .credit(:empty) {
+  display: none;
+}
+info > .component-container .credit:not(:empty):before {
   content: "";
   position: absolute;
   top: -6px;
@@ -4679,8 +4735,9 @@ info.collapsed .btn-row .summary {
   display: block;
 }
 info.collapsed .btn-row .summary .btn {
+  font-weight: 700;
+  font-family: 'Fira Sans', sans-serif;
   color: #0079BA;
-  font-weight: bold;
   background-image: none;
   display: flex;
   align-items: center;
@@ -4702,6 +4759,7 @@ cover .button-row,
 cover h3,
 cover h2 {
   position: absolute;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   opacity: 0;
@@ -4781,6 +4839,7 @@ cover .shared-link {
   z-index: 100;
   right: 34px;
   top: 34px;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 14px;
@@ -4793,6 +4852,7 @@ cover .shared-link > * {
 }
 cover .shared-link span {
   font-weight: 500;
+  font-family: 'Fira Sans', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
@@ -4826,6 +4886,7 @@ cover .button-row {
   -moz-animation-iteration-count: 1;
   -o-animation-iteration-count: 1;
   animation-iteration-count: 1;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 14px;
@@ -4836,6 +4897,7 @@ cover .button-row {
 }
 cover .button-row span {
   font-weight: 500;
+  font-family: 'Fira Sans', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   display: block;
@@ -4853,6 +4915,7 @@ cover .button-row .btn.next-step {
 }
 cover .credit-full {
   background-color: #ffffff;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #212121;
   display: block;
@@ -4868,6 +4931,7 @@ cover .credit-full {
 }
 cover .credit-full .author {
   font-weight: 700;
+  font-family: 'Fira Sans', sans-serif;
   padding-left: 5px;
 }
 home .shared-link {
@@ -4895,6 +4959,7 @@ home .shared-link {
   z-index: 0;
   right: 34px;
   top: 34px;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 14px;
@@ -4907,6 +4972,7 @@ home .shared-link > * {
 }
 home .shared-link span {
   font-weight: 500;
+  font-family: 'Fira Sans', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
@@ -4994,13 +5060,13 @@ home .content .preview > .title {
   -moz-animation-name: fadeInDown;
   -o-animation-name: fadeInDown;
   animation-name: fadeInDown;
+  font-weight: 300;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   max-width: 540px;
   width: 75%;
   font-size: 64px;
   line-height: 64px;
-  font-weight: 300;
   position: relative;
   margin: 0 auto;
   text-align: center;
@@ -5010,11 +5076,11 @@ home .content .preview > .description {
   position: relative;
   margin: 0 auto;
   text-align: center;
+  font-weight: 500;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 24px;
   line-height: 32px;
-  font-weight: 500;
   margin-bottom: 48px;
   -webkit-animation-duration: 0.6s;
   -moz-animation-duration: 0.6s;
@@ -5042,12 +5108,12 @@ home .content .preview > .subtitle {
   position: relative;
   margin: 0 auto;
   text-align: center;
+  font-weight: 500;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 32px;
   line-height: 32px;
   text-transform: uppercase;
-  font-weight: 500;
   margin-bottom: 48px;
   -webkit-animation-duration: 0.6s;
   -moz-animation-duration: 0.6s;
@@ -5161,9 +5227,9 @@ home .content .preview .btn-row .btn.view-stories {
   border: 2px solid #0079BA;
   line-height: 30px;
   text-align: center;
+  font-weight: 500;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
-  font-weight: 500;
   font-size: 12px;
   text-transform: uppercase;
 }
@@ -5195,10 +5261,10 @@ home .content .preview .btn-row .btn.more-info {
   border-radius: 16px;
   line-height: 30px;
   text-align: center;
+  font-weight: 500;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   border: 2px solid #ffffff;
-  font-weight: 500;
   font-size: 12px;
   text-transform: uppercase;
 }
@@ -5227,13 +5293,13 @@ home .content .list > .title {
   -moz-animation-name: fadeIn;
   -o-animation-name: fadeIn;
   animation-name: fadeIn;
+  font-weight: 300;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   max-width: 540px;
   width: 100%;
   font-size: 32px;
   line-height: 64px;
-  font-weight: 300;
   letter-spacing: 2px;
   position: relative;
   margin: 0 auto;
@@ -5403,11 +5469,11 @@ home .content .stories-container .story-block a.image.scale {
 home .content .stories-container .story-block a.title {
   opacity: 0.75;
   text-align: center;
+  font-weight: 900;
   font-family: 'Fira Sans', sans-serif;
   color: #ffffff;
   font-size: 32px;
   line-height: 32px;
-  font-weight: 900;
   max-width: 340px;
   z-index: -1;
 }
@@ -5462,6 +5528,7 @@ home .credit-container {
   width: 100%;
   bottom: 8px;
   left: 8px;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #909090;
   font-size: 12px;
@@ -5502,6 +5569,7 @@ intro .button-row {
   -moz-animation-iteration-count: 1;
   -o-animation-iteration-count: 1;
   animation-iteration-count: 1;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #0079BA;
   font-size: 14px;
@@ -5512,6 +5580,7 @@ intro .button-row {
 }
 intro .button-row span {
   font-weight: 500;
+  font-family: 'Fira Sans', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   display: block;
@@ -5577,9 +5646,31 @@ map > .component-container > div > .btn-row .btn.next-step {
 }
 map > .component-container > div > .btn-row .btn.resetBbox {
   background-color: #ffffff;
-  border-color: #0079BA;
+  border: 2px solid rgba(33, 33, 33, 0.5);
   background-image: url('../../../assets/icon/centermap.svg');
 }
+map > .component-container > div > .btn-row .zoomControl {
+  box-sizing: border-box;
+  width: 32px;
+  border: 2px solid rgba(33, 33, 33, 0.5);
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+  background-color: #ffffff;
+}
+map > .component-container > div > .btn-row .zoomControl .zoomIn {
+  border: none;
+  background-image: url('../../../assets/icon/zoom-in.svg');
+  border-radius: 0;
+  border-bottom: 1px solid rgba(33, 33, 33, 0.5);
+}
+map > .component-container > div > .btn-row .zoomControl .zoomOut {
+  border: none;
+  background-image: url('../../../assets/icon/zoom-out.svg');
+}
 conclusion {
   background-color: #14406D;
 }
@@ -5591,14 +5682,15 @@ conclusion > .component-container {
 }
 conclusion h2 {
   text-align: center;
+  font-weight: 800;
   font-family: 'Fira Sans', sans-serif;
   color: #66B7EA;
   font-size: 24px;
   line-height: 32px;
   margin-bottom: 25px;
-  font-weight: 800;
 }
 conclusion paragraph {
+  font-weight: 300;
   font-family: 'Fira Sans', sans-serif;
   font-size: 16px;
   line-height: 24px;
@@ -5607,7 +5699,6 @@ conclusion paragraph {
   width: 95%;
   display: block;
   margin: 0 auto 24px auto;
-  font-weight: 300;
 }
 conclusion paragraph .capitalized {
   clear: both;
@@ -5616,11 +5707,11 @@ conclusion paragraph .capitalized span:first-of-type {
   float: left;
   position: relative;
   font-size: 156px;
-  font-weight: 900;
   color: #ffffff;
   padding-top: 54px;
   padding-bottom: 30px;
   padding-right: 10px;
+  font-weight: 900;
   font-family: 'Fira Sans', sans-serif;
 }
 conclusion el-quote {
@@ -5671,6 +5762,7 @@ skip .closing-story-container {
 }
 skip .credit-full {
   background-color: #ffffff;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #212121;
   display: block;
@@ -5681,11 +5773,11 @@ skip .credit-full {
   background-position: 15px center;
   font-size: 14px;
   line-height: 18px;
-  font-weight: normal;
   padding-top: 13px;
 }
 skip .credit-full .author {
   font-weight: 700;
+  font-family: 'Fira Sans', sans-serif;
   padding-left: 5px;
 }
 skip .skip-container {
@@ -5743,9 +5835,9 @@ skip .skip-container > .component-container h2 {
   -moz-animation-iteration-count: 1;
   -o-animation-iteration-count: 1;
   animation-iteration-count: 1;
+  font-weight: 900;
   font-family: 'Fira Sans', sans-serif;
   color: #14406D;
-  font-weight: 900;
   font-size: 64px;
   line-height: 64px;
   display: block;
@@ -5787,8 +5879,8 @@ skip .skip-container > .component-container .btn-row .btn {
 skip .skip-container > .component-container .btn-row span {
   font-size: 14px;
   letter-spacing: 1px;
-  font-weight: 500;
   text-transform: uppercase;
+  font-weight: 500;
   font-family: 'Fira Sans', sans-serif;
 }
 skip .contact-info-container {
@@ -5820,6 +5912,7 @@ skip .contact-info-container .shared-link {
   -o-animation-name: bounceInDownLittle;
   animation-name: bounceInDownLittle;
   z-index: 0;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   color: #0079BA;
   font-size: 14px;
@@ -5832,6 +5925,7 @@ skip .contact-info-container .shared-link > * {
 }
 skip .contact-info-container .shared-link span {
   font-weight: 500;
+  font-family: 'Fira Sans', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
@@ -5851,6 +5945,7 @@ skip .contact-info-container .shared-link .btn.tw-link {
 skip .contact-info-container .pre-author {
   text-align: center;
   color: #909090;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   font-size: 14px;
   letter-spacing: 2px;
@@ -5863,9 +5958,9 @@ skip .contact-info-container .author {
 skip .contact-info-container .author .name,
 skip .contact-info-container .author .departament {
   color: #212121;
+  font-weight: 300;
   font-family: 'Fira Sans', sans-serif;
   font-size: 24px;
-  font-weight: 300;
   line-height: 24px;
   text-align: center;
 }
@@ -5895,15 +5990,16 @@ skip .contact-info-container .address-container:before {
 }
 skip .contact-info-container .address-container .center-name {
   color: #212121;
+  font-weight: 500;
   font-family: 'Fira Sans', sans-serif;
   font-size: 16px;
-  font-weight: 500;
   line-height: 24px;
   text-align: center;
   margin-bottom: 10px;
 }
 skip .contact-info-container .address-container .center-address {
   color: #909090;
+  font-weight: 400;
   font-family: 'Fira Sans', sans-serif;
   font-size: 12px;
   line-height: 16px;
@@ -5912,3 +6008,122 @@ skip .contact-info-container .address-container .center-address {
 skip .contact-info-container a {
   color: #0079BA;
 }
+.modalOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  visibility: hidden;
+  z-index: -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modalOverlay .modal {
+  width: 400px;
+  min-height: 120px;
+  max-height: 400px;
+  overflow-y: auto;
+  opacity: 0;
+  visibility: hidden;
+  background-color: white;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  background-clip: padding-box;
+  font-weight: 400;
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 14px;
+}
+.modalOverlay .modal .modal-header {
+  margin: 15px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 16px;
+}
+.modalOverlay .modal .modal-header .close {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  color: #999;
+  line-height: 10px;
+  cursor: pointer;
+}
+.modalOverlay .modal .modal-body {
+  margin: 5px 15px 5px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modalOverlay .modal .modal-footer {
+  margin: 15px;
+  text-align: center;
+  height: 19px;
+}
+.modalOverlay.open {
+  -webkit-animation-duration: 0.8s;
+  -moz-animation-duration: 0.8s;
+  -o-animation-duration: 0.8s;
+  animation-duration: 0.8s;
+  -webkit-animation-delay: 0.3s;
+  -moz-animation-delay: 0.3s;
+  -o-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-iteration-count: 1;
+  -moz-animation-iteration-count: 1;
+  -o-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-name: fadeInDown;
+  -moz-animation-name: fadeInDown;
+  -o-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+  opacity: 1;
+  visibility: visible;
+  z-index: 101;
+}
+.modalOverlay.open .modal {
+  -webkit-animation-duration: 0.8s;
+  -moz-animation-duration: 0.8s;
+  -o-animation-duration: 0.8s;
+  animation-duration: 0.8s;
+  -webkit-animation-delay: 0.3s;
+  -moz-animation-delay: 0.3s;
+  -o-animation-delay: 0.3s;
+  animation-delay: 0.3s;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-iteration-count: 1;
+  -moz-animation-iteration-count: 1;
+  -o-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-name: fadeInDown;
+  -moz-animation-name: fadeInDown;
+  -o-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+  opacity: 1;
+  visibility: visible;
+}
+.modalOverlay.open .modal input.wmsInput {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid rgba(0, 121, 186, 0.4);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-weight: 400;
+  font-family: 'Fira Sans', sans-serif;
+  font-size: 14px;
+}
+.modalOverlay.open .modal input.wmsInput::-moz-focus-inner {
+  border: 0;
+}
diff --git a/src/shared/elements/info/Info.js b/src/shared/elements/info/Info.js
index 9892d8f..bae78fe 100644
--- a/src/shared/elements/info/Info.js
+++ b/src/shared/elements/info/Info.js
@@ -20,6 +20,11 @@ var InfoComponent = (function (_super) {
     function InfoComponent() {
         _super.apply(this, arguments);
         this.collapsed = true;
+        this.modalOpen = false;
+        this.wmsValue = '';
+        this.wmsCopied = null;
+        this.manageLayers = new core_1.EventEmitter();
+        this.downloadShp = new core_1.EventEmitter();
     }
     InfoComponent.prototype.toggleVisibility = function () {
         this.collapsed = !this.collapsed;
@@ -33,11 +38,73 @@ var InfoComponent = (function (_super) {
         }
         _super.prototype.ngAfterViewInit.call(this);
     };
+    InfoComponent.prototype.toggleLayer = function (info) {
+        if (info === void 0) { info = {}; }
+        if (info.collapsed === false)
+            return;
+        var item = {};
+        for (var _i = 0, _a = this.item; _i < _a.length; _i++) {
+            item = _a[_i];
+            item.collapsed = true;
+        }
+        info.collapsed = !info.collapsed;
+        this.manageLayers.emit(info);
+    };
+    InfoComponent.prototype.downloadFile = function (info) {
+        if (info === void 0) { info = {}; }
+        this.downloadShp.emit(info);
+    };
+    InfoComponent.prototype.toggleModal = function () {
+        this.modalOpen = !this.modalOpen;
+    };
+    InfoComponent.prototype.openModal = function (info) {
+        if (info === void 0) { info = {}; }
+        this.wmsValue = info.shp;
+        this.modalOpen = true;
+        this.wmsCopied = null;
+    };
+    InfoComponent.prototype.copyWmsValue = function () {
+        var copyTextarea = document.querySelector('.wmsInput.active');
+        copyTextarea.select();
+        try {
+            var successful = document.execCommand('copy');
+            if (successful) {
+                this.wmsCopied = true;
+            }
+            else {
+                this.wmsCopied = false;
+            }
+        }
+        catch (err) {
+            console.log('Oops, unable to copy');
+            this.wmsCopied = false;
+        }
+    };
     __decorate([
         core_1.HostBinding('class.collapsed'),
         core_1.Input(), 
         __metadata('design:type', Boolean)
     ], InfoComponent.prototype, "collapsed", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], InfoComponent.prototype, "modalOpen", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', String)
+    ], InfoComponent.prototype, "wmsValue", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], InfoComponent.prototype, "wmsCopied", void 0);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
+    ], InfoComponent.prototype, "manageLayers", void 0);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
+    ], InfoComponent.prototype, "downloadShp", void 0);
     InfoComponent = __decorate([
         core_1.Component({
             selector: 'info',
diff --git a/src/shared/elements/info/Info.js.map b/src/shared/elements/info/Info.js.map
index b0a4360..58b093f 100644
--- a/src/shared/elements/info/Info.js.map
+++ b/src/shared/elements/info/Info.js.map
@@ -1 +1 @@
-{"version":3,"file":"Info.js","sourceRoot":"","sources":["Info.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAA4C,eAAe,CAAC,CAAA;AAC5D,4BAAmC,6BAA6B,CAAC,CAAA;AAMjE;IAAmC,iCAAoB;IAAvD;QAAmC,8BAAoB;QAE1C,cAAS,GAAY,IAAI,CAAC;IAgBvC,CAAC;IAdG,wCAAgB,GAAhB;QACI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACrC,CAAC;IAED,kCAAU,GAAV;QACI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,SAAS,CAAC;IACzC,CAAC;IAED,uCAAe,GAAf;QACI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QACzC,CAAC;QACD,gBAAK,CAAC,eAAe,WAAE,CAAC;IAC5B,CAAC;IAhBD;QAAC,kBAAW,CAAC,iBAAiB,CAAC;QAC9B,YAAK,EAAE;;oDAAA;IANZ;QAAC,gBAAS,CAAC;YACP,QAAQ,EAAE,MAAM;YAChB,WAAW,EAAE,2CAA2C;SAC3D,CAAC;;qBAAA;IAmBF,oBAAC;AAAD,CAAC,AAlBD,CAAmC,kCAAoB,GAkBtD;AAlBY,qBAAa,gBAkBzB,CAAA"}
\ No newline at end of file
+{"version":3,"file":"Info.js","sourceRoot":"","sources":["Info.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/src/shared/elements/modal/CustomModal.ts b/src/shared/elements/modal/CustomModal.ts
deleted file mode 100644
index dae632b..0000000
--- a/src/shared/elements/modal/CustomModal.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Component, Input, HostBinding, Output, EventEmitter} from "@angular/core";
-import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
-
-@Component({
-    selector: 'modal',
-    template: `
-        <modal #myModal>
-            ...xxxxxxxxxx
-        </modal>
-    `
-})
-export class CustomModalComponent extends ModalComponent {} 
\ No newline at end of file
diff --git a/src/shared/steps/map/MapStep.js b/src/shared/steps/map/MapStep.js
index 22c0031..8d1ca91 100644
--- a/src/shared/steps/map/MapStep.js
+++ b/src/shared/steps/map/MapStep.js
@@ -29,6 +29,9 @@ var MapStepComponent = (function (_super) {
         this.document = document;
         this.windowService = windowService;
         this.mapService = mapService;
+        this.activeLayer = false;
+        this.zoom = 4.5;
+        this.center = [15.0, 38.0];
     }
     MapStepComponent.prototype.onResize = function (event) {
         _super.prototype.onResize.call(this, event);
@@ -64,14 +67,86 @@ var MapStepComponent = (function (_super) {
     MapStepComponent.prototype.ngAfterViewInit = function () {
         _super.prototype.ngAfterViewInit.call(this);
         this.mapService.map = new mapbox_gl_1.Map({
-            trackResize: true,
+            trackResize: false,
             container: 'map',
-            style: 'mapbox://styles/mapbox/light-v9',
-            zoom: 5,
-            center: [6.328125, 40.78054143186033]
+            style: 'mapbox://styles/cayetanobv/cj0do9yow001q2smnpjsp8wtq',
+            zoom: this.zoom,
+            center: this.center
         });
         this.mapService.map.scrollZoom.disable();
+        this.setActiveLayer();
     };
+    MapStepComponent.prototype.setActiveLayer = function () {
+        for (var layer in this.step.info) {
+            if (this.step.info[layer].collapsed === false) {
+                this.activeLayer = this.step.info[layer];
+                break;
+            }
+        }
+    };
+    MapStepComponent.prototype.toggleActiveLayer = function () {
+        if (!this.activeLayer.layer.subLayers.length || !this.mapService.map)
+            return;
+        for (var _i = 0, _a = this.activeLayer.layer.subLayers; _i < _a.length; _i++) {
+            var sublayer = _a[_i];
+            var visibility = this.mapService.map.getLayoutProperty(sublayer, 'visibility');
+            if (visibility === 'visible') {
+                this.mapService.map.setLayoutProperty(sublayer, 'visibility', 'none');
+            }
+            else {
+                this.mapService.map.setLayoutProperty(sublayer, 'visibility', 'visible');
+            }
+        }
+    };
+    MapStepComponent.prototype.updateLayers = function (info) {
+        if (info === void 0) { info = {}; }
+        if (this.activeLayer) {
+            this.toggleActiveLayer();
+        }
+        this.activeLayer = info;
+        this.toggleActiveLayer();
+    };
+    MapStepComponent.prototype.zoomIn = function () {
+        var currentZoom = this.mapService.map.getZoom();
+        var currentCenter = this.mapService.map.getCenter();
+        this.flyTo(currentCenter, currentZoom + 1);
+    };
+    MapStepComponent.prototype.zoomOut = function () {
+        var currentZoom = this.mapService.map.getZoom();
+        var currentCenter = this.mapService.map.getCenter();
+        this.flyTo(currentCenter, currentZoom - 1);
+    };
+    MapStepComponent.prototype.flyTo = function (center, zoom) {
+        if (center === void 0) { center = this.center; }
+        if (zoom === void 0) { zoom = this.zoom; }
+        if (!this.mapService.map)
+            return;
+        this.mapService.map.flyTo({
+            center: center,
+            zoom: zoom,
+            speed: 0.6
+        });
+    };
+    MapStepComponent.prototype.getShpFile = function (info) {
+        if (info === void 0) { info = {}; }
+        var anchor = document.createElement('a');
+        anchor.href = info.shp;
+        anchor.target = '_blank';
+        anchor.download = info.shp;
+        anchor.click();
+    };
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Object)
+    ], MapStepComponent.prototype, "activeLayer", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Object)
+    ], MapStepComponent.prototype, "zoom", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Object)
+    ], MapStepComponent.prototype, "center", void 0);
     MapStepComponent = __decorate([
         core_1.Component({
             selector: 'map',
diff --git a/src/shared/steps/map/MapStep.js.map b/src/shared/steps/map/MapStep.js.map
index c7da1ee..bf1fada 100644
--- a/src/shared/steps/map/MapStep.js.map
+++ b/src/shared/steps/map/MapStep.js.map
@@ -1 +1 @@
-{"version":3,"file":"MapStep.js","sourceRoot":"","sources":["MapStep.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"MapStep.js","sourceRoot":"","sources":["MapStep.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/src/shared/steps/map/MapStep.ts b/src/shared/steps/map/MapStep.ts
index 4714ba2..263439e 100644
--- a/src/shared/steps/map/MapStep.ts
+++ b/src/shared/steps/map/MapStep.ts
@@ -1,6 +1,6 @@
 import {Component, Inject, Renderer, ElementRef, AfterViewInit, HostBinding, Input} from "@angular/core";
 import {BaseStepComponent} from "../base/BaseStep";
-import {Map, NavigationControl} from 'mapbox-gl';
+import {Map} from 'mapbox-gl';
 import {MapService} from "../../../services/MapService";
 import {DOCUMENT} from "@angular/platform-browser";
 import {WindowService} from "../../../services/WindowService";
@@ -59,7 +59,7 @@ export class MapStepComponent extends BaseStepComponent {
     ngAfterViewInit() {
         super.ngAfterViewInit();
         this.mapService.map = new Map({
-            trackResize: true,
+            trackResize: false,
             container: 'map',
             style: 'mapbox://styles/cayetanobv/cj0do9yow001q2smnpjsp8wtq',
             zoom: this.zoom,
@@ -100,12 +100,26 @@ export class MapStepComponent extends BaseStepComponent {
         this.toggleActiveLayer();
     }
 
-    resetBbox() {
+    zoomIn() {
+        let currentZoom = this.mapService.map.getZoom();
+        let currentCenter = this.mapService.map.getCenter();
+
+        this.flyTo(currentCenter, currentZoom + 1);
+    }
+
+    zoomOut() {
+        let currentZoom = this.mapService.map.getZoom();
+        let currentCenter = this.mapService.map.getCenter();
+
+        this.flyTo(currentCenter, currentZoom - 1);
+    }
+
+    flyTo(center: any = this.center, zoom: any = this.zoom) {
         if (!this.mapService.map) return;
 
         this.mapService.map.flyTo({
-            center: this.center,
-            zoom: this.zoom,
+            center: center,
+            zoom: zoom,
             speed: 0.6
         });
     }
diff --git a/src/templates/shared/steps/map/view.html b/src/templates/shared/steps/map/view.html
index 661ea41..fd1ff31 100644
--- a/src/templates/shared/steps/map/view.html
+++ b/src/templates/shared/steps/map/view.html
@@ -11,7 +11,11 @@
         </div>
 
         <div class="btn-row top right">
-            <a class="btn small circle resetBbox" (click)="resetBbox()"></a>
+            <a class="btn small circle resetBbox" (click)="flyTo()"></a>
+            <div class="zoomControl">
+                <a class="btn small circle zoomIn" (click)="zoomIn()"></a>
+                <a class="btn small circle zoomOut" (click)="zoomOut()"></a>
+            </div>
         </div>
 
         <div class="btn-row">