add year selection.

tiles-client/src/app/geojson-upload/geojson-upload.component.html

@@ -5,7 +5,7 @@
         name="geojson"
         chooseIcon="pi pi-upload"
         accept=".geojson,application/json"
-        [maxFileSize]="1000000"
+        [maxFileSize]="2147483648"
         (onSelect)="onFileSelect($event)"
         chooseLabel="GeoJSON">
     </p-fileUpload>

tiles-client/src/app/geojson-upload/geojson-upload.component.ts

@@ -18,7 +18,6 @@ export class GeojsonUploadComponent {
 
     onFileSelect(event: any) {
         const file = event.files[0];
-        console.log(file)
         const reader = new FileReader();
         reader.onload = () => {
             try {

tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.html

@@ -1,22 +1,35 @@
 <h4 *ngIf="lat && lon" class="text-center card">Latitude: {{ lat | number }}, Longitude: {{ lon | number }}</h4>
-
- <div class="flex justify-content-center align-content-center">
-    <label for="period-type-land">Period Type</label>
-    <p-selectButton
-        id="period-type-land"
-        [options]="landsatPeriods"
-        [(ngModel)]="selectedLandsatPeriod"
-        class="w-full"
-        (onChange)="updateLandsatMaps()"
-    ></p-selectButton>
-    <label for="vis-params-land">Visualization Params</label>
-    <p-selectButton
-        id="vis-params-land"
-        [options]="landsatVisParams"
-        [(ngModel)]="selectedLandsatVisParam"
-        class="w-full"
-        (onChange)="updateLandsatMaps()"
-    ></p-selectButton>
+<div class="flex justify-content-evenly">
+    <span class="flex flex-column align-items-center">
+        <label for="period-type-land">Period Type</label>
+        <p-selectButton
+            id="period-type-land"
+            [options]="landsatPeriods"
+            [(ngModel)]="selectedLandsatPeriod"
+            class="w-full"
+            (onChange)="updateLandsatMaps()"
+        ></p-selectButton>
+    </span>
+        <span class="flex flex-column align-items-center">
+        <label for="year-select-sant">Year</label>
+        <p-dropdown
+            class="w-full"
+            id="year-select-sant"
+            [options]="landsatYears"
+            [(ngModel)]="selectedLandsatYear"
+            (onChange)="updateLandsatMaps()"
+        ></p-dropdown>
+    </span>
+    <span class="flex flex-column align-items-center">
+        <label for="vis-params-land">Visualization Params</label>
+        <p-selectButton
+            id="vis-params-land"
+            [options]="landsatVisParams"
+            [(ngModel)]="selectedLandsatVisParam"
+            class="w-full"
+            (onChange)="updateLandsatMaps()"
+        ></p-selectButton>
+    </span>
 </div>
 <div class="map-grid mt-3">
     <div *ngFor="let map of landsatMaps" class="map-item">

tiles-client/src/app/grid-map/map-grid-landsat/map-grid-landsat.component.ts

@@ -3,12 +3,18 @@ import Map from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
 import XYZ from 'ol/source/XYZ';
-import { fromLonLat, toLonLat } from 'ol/proj';
+import {fromLonLat, toLonLat, transform} from 'ol/proj';
 import { defaults as defaultInteractions } from 'ol/interaction';
 import Pointer from 'ol/interaction/Pointer';
 import {MonthMapItem, PeriodMapItem} from "../../interfaces/map.interface";
 import {LayerService} from "../services/layer.service";
 import {PointService} from "../services/point.service";
+import {Feature} from "ol";
+import {Point} from "ol/geom";
+import {Icon, Style} from "ol/style";
+import {marker} from "../../../assets/layout/images/marker";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth() + 1;
 
@@ -44,6 +50,9 @@ export class MapGridLandsatComponent implements OnInit {
     public lat: number | null = null;
     public lon: number | null = null;
 
+    public landsatYears: number[] = [];
+    public selectedLandsatYear: number = currentYear;
+
     public sentinelPeriods = ["WET", "DRY", "MONTH"];
     public landsatPeriods = ["WET", "DRY", "MONTH"];
     public sentinelVisParams = ["tvi-green", "tvi-red", "tvi-rgb"];
@@ -53,7 +62,7 @@ export class MapGridLandsatComponent implements OnInit {
     public selectedSentinelVisParam = this.sentinelVisParams[0];
     public selectedLandsatVisParam = this.landsatVisParams[0];
 
-    constructor(private layerService: LayerService, public pointService: PointService) {}
+    constructor(public pointService: PointService) {}
 
     ngOnInit(): void {
         this.initializeMaps();
@@ -67,8 +76,33 @@ export class MapGridLandsatComponent implements OnInit {
                 }
             }
         });
+        const landsatCapabilities = CAPABILITIES.collections.find(c => c.name === 'landsat');
+        if (landsatCapabilities) {
+            this.landsatYears = landsatCapabilities.year;
+        }
     }
+    private addMarker(lat: number, lon: number, map: Map): void {
+        const iconFeature = new Feature({
+            geometry: new Point(fromLonLat([lon, lat])),
+        });
+        const iconStyle = new Style({
+            image: new Icon({
+                anchor: [0.5, 0.5],
+                src: marker,
+                scale: 1,
+            }),
+        });
 
+        iconFeature.setStyle(iconStyle);
+
+        const vectorSource = new VectorSource({
+            features: [iconFeature],
+        });
+        const vectorLayer = new VectorLayer({
+            source: vectorSource,
+        });
+        map.addLayer(vectorLayer)
+    }
     private initializeMaps(): void {
         this.createMaps('sentinel', this.selectedSentinelPeriod, this.selectedSentinelVisParam);
         this.createMaps('landsat', this.selectedLandsatPeriod, this.selectedLandsatVisParam);
@@ -85,6 +119,9 @@ export class MapGridLandsatComponent implements OnInit {
 
         if (capabilities) {
             for (let year of capabilities.year) {
+                if (year !== this.selectedLandsatYear) {
+                    continue;
+                }
                 if (selectedPeriod === 'MONTH') {
                     for (let month of capabilities.month) {
                         if (year === currentYear && parseInt(month, 10) > currentMonth) {
@@ -121,7 +158,6 @@ export class MapGridLandsatComponent implements OnInit {
     private createMap(mapId: string, periodOrMonth: string, year: number, type: string, visparam: string, month?: string): void {
         setTimeout(() => {
             const url = `https://tm{1-5}.lapig.iesa.ufg.br/api/layers/${type === 'sentinel' ? 's2_harmonized' : 'landsat'}/{x}/{y}/{z}?period=${periodOrMonth}&year=${year}&visparam=${visparam}${periodOrMonth === 'MONTH' ? `&month=${month}` : ''}`;
-            console.log('url', url)
             const map = new Map({
                 target: mapId,
                 layers: [
@@ -147,7 +183,8 @@ export class MapGridLandsatComponent implements OnInit {
                     })
                 ])
             });
-
+            const projectedCoordinate = transform(this.centerCoordinates, 'EPSG:3857', 'EPSG:4326');
+            this.addMarker(projectedCoordinate[1], projectedCoordinate[0], map);
             this.mapsInstances.push({ id: mapId, map });
         }, 0);
     }
@@ -161,14 +198,10 @@ export class MapGridLandsatComponent implements OnInit {
         for (let mapInstance of this.mapsInstances) {
             const view = mapInstance.map.getView();
             view.setCenter(this.centerCoordinates);
+            const projectedCoordinate = transform(this.centerCoordinates, 'EPSG:3857', 'EPSG:4326');
+            this.addMarker(projectedCoordinate[1], projectedCoordinate[0], mapInstance.map);
         }
     }
-
-    public updateSentinelMaps(): void {
-        this.mapsInstances = this.mapsInstances.filter(mapInstance => !mapInstance.id.startsWith('sentinel-map'));
-        this.createMaps('sentinel', this.selectedSentinelPeriod, this.selectedSentinelVisParam);
-    }
-
     public updateLandsatMaps(): void {
         this.mapsInstances = this.mapsInstances.filter(mapInstance => !mapInstance.id.startsWith('landsat-map'));
         this.createMaps('landsat', this.selectedLandsatPeriod, this.selectedLandsatVisParam);

tiles-client/src/app/grid-map/map-grid.component.html

@@ -1,7 +1,7 @@
 <h4 *ngIf="lat && lon" class="text-center card">Latitude: {{ lat | number }}, Longitude: {{ lon | number }}</h4>
 
-<div class="flex justify-content-evenly align-content-center">
-    <span>
+<div class="flex justify-content-evenly">
+    <span class="flex flex-column align-items-center">
         <label for="period-type-sant">Period Type</label>
         <p-selectButton
             id="period-type-sant"
@@ -11,7 +11,17 @@ <h4 *ngIf="lat && lon" class="text-center card">Latitude: {{ lat | number }}, Lo
             (onChange)="updateSentinelMaps()"
         ></p-selectButton>
     </span>
-    <span>
+    <span class="flex flex-column align-items-center">
+        <label for="year-select-sant">Year</label>
+        <p-dropdown
+            class="w-full"
+            id="year-select-sant"
+            [options]="sentinelYears"
+            [(ngModel)]="selectedSentinelYear"
+            (onChange)="updateSentinelMaps()"
+        ></p-dropdown>
+    </span>
+    <span class="flex flex-column align-items-center">
         <label for="vis-params-sant">Visualization Params</label>
         <p-selectButton
             id="vis-params-sant"

tiles-client/src/app/grid-map/map-grid.component.scss

@@ -13,3 +13,8 @@
     width: 100%;
     height: 300px;
 }
+
+.campo{
+    display: flex;
+
+}