Merge pull request #4 from fpsampayo/featureCatastroHistorico

Feature catastro historico

dist/index.html

@@ -71,7 +71,11 @@ <h4 class="panel-title">
                 </div>
                 <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                     <div class="panel-body" id="medidor">
-                        Por implementar
+                        <div id="sandbox-container">
+                            <div class="input-group date">
+                                <input id="fecha-catastro" type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.7",
+    "bootstrap-datepicker": "^1.7.0",
     "jquery": "^3.2.1",
     "leaflet": "^1.1.0",
     "leaflet-measure": "^2.1.7",

src/index.js

@@ -2,6 +2,9 @@ import 'jquery'
 import 'bootstrap'
 import Map from './map'
 import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-datepicker'
+import '../node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.es.min'
+import '../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css'
 import './styles/styles.css'
 import CatastroParser from './catastroParser'
 
@@ -16,7 +19,7 @@ const btnSidebar = document.getElementById('menu-toggle')
 
 const btnSearch = document.getElementById('btn-search')
 const imputRefCat = document.getElementById('navRefCatForm')
-const navHistorico = document.getElementById('nav-historico')
+const inputFechaCatastro = document.getElementById('fecha-catastro')
 
 const sideNav = document.getElementById('mySidenav')
 
@@ -51,3 +54,20 @@ btnSidebar.addEventListener('click', (evt) => {
 if (document.body.clientWidth >= 767) {
   sideNav.classList.toggle('toggled')
 }
+
+$('#sandbox-container .input-group.date').datepicker({
+  format: "dd/mm/yyyy",
+  language: "es",
+  daysOfWeekHighlighted: "0,6",
+  autoclose: true,
+  clearBtn: true,
+  todayHighlight: true
+}).on('changeDate', function(e) {
+  var dd = e.date.getDate()
+  var mm = e.date.getMonth() + 1
+  var yyyy = e.date.getFullYear() 
+  var dateString = yyyy + '-' + mm + '-' + dd
+  map.catastroHistorico(dateString)
+}).on('clearDate', function(e) {
+  map.desactivaCatastroHistorico()
+})

src/map.js

@@ -48,7 +48,7 @@ export default class Map {
 
     const catastroUrl = 'https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?'
 
-    const catastroBase = L.nonTiledLayer.wms(
+    this.catastroBase = L.nonTiledLayer.wms(
       catastroUrl, 
       {
         maxZoom: MAX_ZOOM,
@@ -82,7 +82,7 @@ export default class Map {
 
     const baseMaps = {
       PNOA: pnoa,
-      Catastro: catastroBase,
+      Catastro: this.catastroBase,
       'Google Satellite': satellite
     }
 
@@ -110,15 +110,26 @@ export default class Map {
     this.clearHighLight()
     this.highlight.addData(geoJson)
   }
-
-  catastroHistorico() {
+  /**
+   * Activa el catastro histórico para la fecha seleccionada
+   * @param {string} dateString - Fecha en formato yyyy-mm-dd
+   */
+  catastroHistorico(dateString) {
 
-    this.catastroOverlay._wmsUrl = "https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?TIME=2017-07-01"
-    this.catastroOverlay.addTo(this.map)
-
+    this.catastroOverlay._wmsUrl = "https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?TIME=" + dateString
+    this.catastroBase._wmsUrl = "https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?TIME=" + dateString
     this.catastroOverlay.redraw()
+    this.catastroBase.redraw()
+  }
 
-    console.log(this.map)
+  /**
+   * Desactiva el catastro histórico
+   */
+  desactivaCatastroHistorico() {
+    this.catastroOverlay._wmsUrl = "https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?"
+    this.catastroBase._wmsUrl = "https://ovc.catastro.meh.es/Cartografia/WMS/ServidorWMS.aspx?"
+    this.catastroOverlay.redraw()
+    this.catastroBase.redraw()
   }
 }