diff --git a/src/app/app.component.css b/src/app/app.component.css
index b62277e..9b28799 100644
--- a/src/app/app.component.css
+++ b/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; }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 3170eae..0c8e996 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,21 @@
+ 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 Xabier Erkizia y Luca Rullo, de la asociación AUDIOLAB.Construir a través del oído
+
Escucha en directo lo que suena en Sartaguda
" + this.appService.add(streamMessage) + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 08753fa..f8e7631 100644 --- a/src/app/app.module.ts +++ b/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] }) diff --git a/src/app/app.service.spec.ts b/src/app/app.service.spec.ts new file mode 100644 index 0000000..741d9d2 --- /dev/null +++ b/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(); + })); +}); diff --git a/src/app/app.service.ts b/src/app/app.service.ts new file mode 100644 index 0000000..2a77841 --- /dev/null +++ b/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; + } + +} diff --git a/src/app/fade.animation.ts b/src/app/fade.animation.ts new file mode 100644 index 0000000..1893bc7 --- /dev/null +++ b/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 } + ) + + ]) + + ]); diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts index 59689df..2395aba 100644 --- a/src/app/map-box/map-box.component.ts +++ b/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 = "