Pagina de inicio y interacción para acceder al mapa y al streaming

src/app/app.component.css

@@ -1,3 +1,7 @@
+
+
+header { max-height:500px; overflow:hidden;}
+
 soinu-progress {
 	margin: auto;
 	float: left;
@@ -6,5 +10,37 @@ soinu-progress {
 	margin-top: 5%;
 }
 
-map-box {
+section {  max-width:500px; margin:auto; margin-top:50px;}
+section p { font-family: 'Raleway', sans-serif; color:#000;text-align:left; font-size:0.9em; line-height:1.5em;  color:#000;}
+section h1, h2 { font-size:2em; font-weight:200; font-family: 'Oswald', serif; color:#877474; text-align:right;}
+
+section a { color:#efa775; font-weight:bold; cursor:pointer; text-decoration:none;}
+nav button {
+    border: solid #666 2px;
+    padding: 10px;
+    width: 30%;
+    background: transparent;
+    color: #333;
+    font-family: Raleway;
+    font-size: 1em;
+    font-weight: bold;
+		cursor:pointer;
+		transition-duration:1s;
 }
+
+nav button:hover {
+	border: solid #efa775 2px;
+	color:#fff;
+	background:#efa775;
+}
+
+footer { margin-top:50px; text-align:center; }
+footer ul { list-style:none; padding:0; margin:auto; width:90%;}
+footer ul li { float:left; padding:10px;}
+footer ul li img { transition-duration:1s; max-height:25px; filter:grayscale(1); }
+footer ul li img:hover { filter:grayscale(0);}
+
+
+map-box {}
+
+app-messages { position:fixed; z-index:100; left:0; top:0; }

src/app/app.component.html

@@ -1,3 +1,21 @@
+<app-messages></app-messages>
+<header>
+	<soinu-progress *ngIf="!isMap"></soinu-progress>
+</header>
+<section *ngIf="!isMap">
+	<h1>Construir a través del oído</h1>
+	<p>El objetivo de Landarte 2018, el programa de arte y ruralidad de la Dirección General-Institución Príncipe de Viana,, es desarrollar un mapa sonoro de Sartaguda que pueda proyectarse tanto en el parque de la memoria como en otros espacios de localidad. Los encargados de guiar al vecindario en la realización de esta peculiar obra de arte es el artista sonoro <b>Xabier Erkizia</b> y <b>Luca Rullo</b>, de la asociación <a href="https://www.audio-lab.org">AUDIOLAB</a>.</p>
+	<nav *ngIf="appService.acceptCookies">
+		<button pButton label="map" (click)="showMap()" title="Muestra el mapa">Mapa</button>
+		<button pButton label="listen" (click)="listenStream()" title="En directo">En directo</button>
+	</nav>
+	<footer>
+		<ul>
+			<li><img alt="Gobierno de Navarra" title="Gobierno de Navarra" src="/assets/gobierno_navarra_logo.png"/></li>
+			<li><img alt="Ayuntamiento de Sartaguda" title="Ayuntamiento de Sartaguda" src="/assets/sartaguda.png"/></li>
+			<li><img alt="Audiolab" title="Audiolab" src="/assets/audio-lab_logo.png"/></li>
+			<li><img alt="Red Tramontana" title="Red Tramontana"style="min-width:50px;min-height:50px;" src="/assets/tramontana.png"/></li>
+		</ul>
+	</footer>
+</section>
 <map-box *ngIf="isMap"></map-box>
-<soinu-progress *ngIf="!isMap"></soinu-progress>
-<button pButton label="Map" *ngIf="!isMap" (click)="isMap=true">Map</button>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { AppService } from './app.service';
 
 @Component({
   selector: 'app-root',
@@ -8,4 +9,17 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'Sartaguda suena';
 	isMap = false;
+
+  constructor(public appService: AppService) { }
+
+	showMap() {
+		this.isMap = true;
+		this.appService.add('Bienvenido al mapa de sonidos de Sartaguda.',true);
+	}
+
+	listenStream() {
+		let streamMessage = "<p>Escucha en directo lo que suena en Sartaguda</p><audio controls autoplay preload width=100% class=\"simple-audioplayer\" src=\"http://irratia.zintzilik.net\"></audio>"
+		this.appService.add(streamMessage)
+	}
+
 }

src/app/app.module.ts

@@ -2,23 +2,27 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { MapService } from './map.service';
+import { AppService } from './app.service';
 
 import { AppComponent } from './app.component';
 import { MapBoxComponent } from './map-box/map-box.component';
 import { SoinuProgressComponent } from './soinu-progress/soinu-progress.component';
+import { MessagesComponent } from './messages/messages.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     MapBoxComponent,
-    SoinuProgressComponent
+    SoinuProgressComponent,
+    MessagesComponent
   ],
   imports: [
     BrowserModule
   ],
   providers: [
 		MapService,
+		AppService
 	],
   bootstrap: [AppComponent]
 })

src/app/app.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AppService } from './app.service';
+
+describe('AppService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AppService]
+    });
+  });
+
+  it('should be created', inject([AppService], (service: AppService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/app.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AppService {
+
+	messages: string[] = [];
+	acceptCookies: boolean = false;
+	audioStreamingUrl = "http://irratia.zintzilik.net";
+	button: boolean = false;
+
+  constructor() {}
+	
+	add(message: string, button:boolean = false) {
+		this.messages.push(message);
+		this.button=button;
+	}
+
+	clear() {
+		this.messages = [];
+		this.acceptCookies = true;
+	}
+
+}

src/app/fade.animation.ts

@@ -0,0 +1,36 @@
+// fade.animation.ts
+
+import { trigger, animate, transition, style, query } from '@angular/animations';
+
+export const fadeAnimation =
+
+    trigger('fadeAnimation', [
+
+        transition( '* => *', [
+
+            query(':enter', 
+                [
+                    style({ opacity: 0 })
+                ], 
+                { optional: true }
+            ),
+
+            query(':leave', 
+                [
+                    style({ opacity: 1 }),
+                    animate('0.2s', style({ opacity: 0 }))
+                ], 
+                { optional: true }
+            ),
+
+            query(':enter', 
+                [
+                    style({ opacity: 0 }),
+                    animate('0.2s', style({ opacity: 1 }))
+                ], 
+                { optional: true }
+            )
+
+        ])
+
+    ]);

src/app/map-box/map-box.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import * as mapboxgl from 'mapbox-gl';
 import { MapService } from '../map.service';
+import { AppService } from '../app.service';
 import { GeoJson, FeatureCollection} from '../map';
 
 @Component({
@@ -22,7 +23,10 @@ export class MapBoxComponent implements OnInit {
 	markers: any;
 	hoverid: null;
 
-  constructor( private mapService: MapService) { }
+  constructor( 
+		private mapService: MapService,
+		public appService: AppService
+		) { }
 
   ngOnInit() {
 		this.initializeMap()
@@ -52,7 +56,6 @@ export class MapBoxComponent implements OnInit {
       let clusterId = features[0].properties.cluster_id;
 			this.map.getSource('soinumapa').getClusterExpansionZoom(clusterId, (err,zoom) => {
 				if (err) return
-				console.log(zoom)
 				this.map.easeTo({
 					center: features[0].geometry.coordinates,
 					zoom: zoom
@@ -63,8 +66,12 @@ export class MapBoxComponent implements OnInit {
 		this.map.on('click','soinumapa', (event) => {
 			const coordinates = [event.lngLat.lng, event.lngLat.lat]
 			const newMarker = new GeoJson(coordinates, { message : 'new marker' })
-			//console.log(newMarker)
-			alert(event.features[0].properties.message)
+			let content = event.features[0].properties.content
+			let title = event.features[0].properties.title
+			let url = event.features[0].properties.url
+			let info = "<h3>"+title+"</h3>"+content
+			this.appService.clear()
+			this.appService.add(info)
 		})
 
 		this.map.on('mouseenter',"clusters", (event) => {
@@ -89,35 +96,28 @@ export class MapBoxComponent implements OnInit {
     });
 
 		this.map.on('load',(event) => {
-	
+		
+			let feed = "http://www.soinumapa.net/geojson/"
+				
 			this.map.addSource('soinumapa', {
 				type: 'geojson',
+				//data: feed,
 				data: '/assets/soinumapa.geojson',
 				cluster:true,
 				clusterMaxZoom: 30,
 				clusterRadius: 50
 			})
-	
-			/*
-      this.map.addSource('soinumapa', {
-         type: 'geojson',
-         data: {
-           type: 'FeatureCollection',
-           features: []
-         }
-      });
-			*/
-	
-			this.source = this.map.getSource('soinumapa')
-
-			/*	
-		 	this.markers.subscribe(markers => {
-				let data = new FeatureCollection(markers)
-				this.source.setData(data)
-			})
-			*/
-
+			
 
+			/*mapboxgl.util.getJSON(feed, (err,data) => {
+				this.map.addSource('soinumapa', {
+					type:'geojson',
+					data: data,
+					cluster:true,
+					clusterMaxZoom:30,
+					clusterRadius: 50
+				})*/
+				
 			this.map.addLayer({
         id: "clusters",
         type: "circle",
@@ -132,9 +132,9 @@ export class MapBoxComponent implements OnInit {
             "circle-color": [
                 "step",
                 ["get", "point_count"],
-                "#51bbd6",
+                "#ff6968",
                 100,
-                "#f1f075",
+                "#efeec2",
                 750,
                 "#f28cb1"
             ],
@@ -184,8 +184,8 @@ export class MapBoxComponent implements OnInit {
 
 					}	
 				})	
-			})
-				
+			}) //load image
+		 //}) // load feed
 		})
 	}
 

src/app/messages/messages.component.css

@@ -0,0 +1,18 @@
+div.messages-container { 
+	width:100px;
+	min-width:200px; 
+	min-height:50px; 
+	background:rgba(0,0,0,0.8);
+	border:#fff solid 0px;
+	margin:20px;
+	color:#fff;
+	padding:30px 10px;
+	font-size:0.8em;
+}
+
+h1 { font-size:1em; }
+
+button { font-family:'Raleway',sans-serif; background:transparent; padding:5px; width:100%; color:#fff; border:#fff solid 2px;}
+button:hover {background:#fff;color:#000;cursor:pointer;}
+audio { max-width:90%; margin:auto;}
+.simple-audioplayer { width:100% !important;max-width:90%;}

src/app/messages/messages.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="appService.messages.length" class="messages-container">
+	<div class="content">
+		<p *ngFor="let m of appService.messages" [innerHTML]="m"></p>
+		<button *ngIf="appService.button" class="clear" (click)="appService.clear()" title="Confirmación">Entendido</button>
+	</div>
+</div>

src/app/messages/messages.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/messages/messages.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+  constructor(public appService: AppService) { }
+
+  ngOnInit() {
+		this.appService.add('Esta página contiene cookies para la mejora de la interactividad con el usuario. Contacto con <a href="https://www.audio-lab.org">nosotros</a> para cualquier duda. <strong>Buena escucha</strong>',true);
+	}
+
+}

src/app/soinu-progress/soinu-progress.component.css

@@ -12,7 +12,7 @@ animation: hideshow 10s 1.5s ease infinite;
 animation: hideshow 10s 3s ease infinite;
 }
 
-.soinuwave { animation: moveX 100s ease infinite; }
+.soinuwave { }
 
 @keyframes hideshow {
 	0% { opacity:0; }

src/app/soinu-progress/soinu-progress.component.html

@@ -196,6 +196,6 @@
        style="fill:#ffffff;stroke-width:0.35700428" />
   </g>
 </svg>
-<div class="titulo">
+<div class="titulo" *ngHide >
 	<img class="image-title" src="/assets/titulo.png"/>
 </div>