Construir a través del oído
- 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 .
+ 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 .
Mapa
En directo
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 19f1615..ba14977 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,7 @@
import { Component } from '@angular/core';
import { AppService } from './app.service';
+import { GeojsonService } from './geojson.service';
+import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-root',
@@ -9,8 +11,12 @@ import { AppService } from './app.service';
export class AppComponent {
title = 'Sartaguda suena';
isMap = false;
+ info: Observable;
- constructor(public appService: AppService) { }
+ constructor(public appService: AppService,
+ public geojsonService: GeojsonService ) {
+ this.geojsonService.getData();
+ }
showMap() {
this.isMap = true;
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f8e7631..ff96d19 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,13 +1,17 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
import { MapService } from './map.service';
import { AppService } from './app.service';
+import { GeojsonService } from './geojson.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';
+import { AddContentComponent } from './add-content/add-content.component';
@NgModule({
@@ -15,14 +19,18 @@ import { MessagesComponent } from './messages/messages.component';
AppComponent,
MapBoxComponent,
SoinuProgressComponent,
- MessagesComponent
+ MessagesComponent,
+ AddContentComponent
],
imports: [
- BrowserModule
+ BrowserModule,
+ HttpClientModule,
+ FormsModule
],
providers: [
MapService,
- AppService
+ AppService,
+ GeojsonService
],
bootstrap: [AppComponent]
})
diff --git a/src/app/app.service.ts b/src/app/app.service.ts
index 2a77841..6a58cf1 100644
--- a/src/app/app.service.ts
+++ b/src/app/app.service.ts
@@ -1,4 +1,5 @@
import { Injectable } from '@angular/core';
+import { GeoJson } from './map';
@Injectable()
export class AppService {
@@ -7,14 +8,24 @@ export class AppService {
acceptCookies: boolean = false;
audioStreamingUrl = "http://irratia.zintzilik.net";
button: boolean = false;
+ markers: any[] = [];
+
+ constructor() { }
- constructor() {}
-
add(message: string, button:boolean = false) {
this.messages.push(message);
this.button=button;
}
+ addMarker(message: string, coord:any[]) {
+ this.markers = coord
+ console.log('new marker: '+coord)
+ }
+
+ clearMarker() {
+ this.markers = [];
+ }
+
clear() {
this.messages = [];
this.acceptCookies = true;
diff --git a/src/app/geojson.service.spec.ts b/src/app/geojson.service.spec.ts
new file mode 100644
index 0000000..fd26220
--- /dev/null
+++ b/src/app/geojson.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { GeojsonService } from './geojson.service';
+
+describe('GeojsonService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [GeojsonService]
+ });
+ });
+
+ it('should be created', inject([GeojsonService], (service: GeojsonService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/src/app/geojson.service.ts b/src/app/geojson.service.ts
new file mode 100644
index 0000000..5547249
--- /dev/null
+++ b/src/app/geojson.service.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { GeoJson, MARKERS } from './map';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import 'rxjs/add/operator/map';
+
+@Injectable()
+export class GeojsonService {
+
+ accessToken:string;
+ apiUrl:string;
+
+ constructor( private http: HttpClient) {
+ this.accessToken = '1245c38775ff9fd8b8a721e4fe7472ab5d06020f853f66c516f26eb96fb87235'
+ this.apiUrl = 'http://ca.ecouterlemonde.net/service.php/find/ca_objects'
+ }
+
+ getData() {
+ const data = {
+ "bundles" : {
+ "access" : { "convertCodesToDisplayText" : true },
+ "status" : { "convertCodesToDisplayText" : true },
+ "ca_entities.entity_id" : {"returnAsArray" : true }
+ }
+ }
+
+ const params = new HttpParams()
+ .set('authToken',this.accessToken)
+ .set('q','*')
+ .set('source',encodeURIComponent(JSON.stringify(data)))
+
+ console.log(encodeURIComponent(JSON.stringify(data)))
+
+ /*this.http.get(this.apiUrl, { params: params } )
+ .subscribe( resp=> {
+ console.log('.... data ...');
+ console.log(resp);
+ });*/
+ return of();
+ }
+
+}
diff --git a/src/app/map-box/map-box.component.css b/src/app/map-box/map-box.component.css
index 5d9c4d3..8e44838 100644
--- a/src/app/map-box/map-box.component.css
+++ b/src/app/map-box/map-box.component.css
@@ -1,4 +1,5 @@
+/*@import '../../../node_modules/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';*/
.map { width:100%;height:100%; position:absolute; top:0; left:0;}
.mapboxgl-marker { width:30px;height:30px;background:#fff;}
-.mapboxgl-marker { width:300px; height:300px; background:#fff !important; }
+.mapboxgl-marker { width:300px; height:300px; background:#fff !important; }
.marker-player { max-width:100%;}
diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts
index 4f369b2..8f09f6b 100644
--- a/src/app/map-box/map-box.component.ts
+++ b/src/app/map-box/map-box.component.ts
@@ -3,6 +3,8 @@ import * as mapboxgl from 'mapbox-gl';
import { MapService } from '../map.service';
import { AppService } from '../app.service';
import { GeoJson, FeatureCollection} from '../map';
+//import * as MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+
@Component({
selector: 'map-box',
@@ -23,8 +25,9 @@ export class MapBoxComponent implements OnInit {
markers: any;
hoverid: null;
activeMarker: any;
+ newMarker: any;
- constructor(
+ constructor(
private mapService: MapService,
public appService: AppService
) { }
@@ -47,14 +50,26 @@ export class MapBoxComponent implements OnInit {
pitch: 60, // pitch in degrees
bearing: 0, // bearing in degrees
center: [this.lng, this.lat],
- attributionControl: {
- compact: true,
- customAttribution: "Developed by Audiolab"
- }
+
});
// controls
this.map.addControl(new mapboxgl.NavigationControl())
+ // this.map.addControl(new MapboxGeocoder({
+ // accessToken: mapboxgl.accessToken
+ // }));
+
+
+ let feed = "http://www.soinumapa.net/geojson/"
+ /*mapboxgl.util.getJSON(feed, (err,data) => {
+ this.map.addSource('soinumapa', {
+ type:'geojson',
+ data: data,
+ cluster:true,
+ clusterMaxZoom:30,
+ clusterRadius: 50
+ })*/
+
this.map.on('click','clusters', (event) => {
let features = this.map.queryRenderedFeatures(event.point, { layers: ['clusters'] });
@@ -68,6 +83,24 @@ export class MapBoxComponent implements OnInit {
})
})
+ this.map.on('click',(event)=> {
+ if (this.newMarker!=undefined) this.newMarker.remove()
+
+ var features = this.map.queryRenderedFeatures(event.point, {layers:['clusters','soinumapa']});
+ //console.log(features);
+ if (features.length==0) {
+ var el = document.createElement('div');
+ el.className = 'marker new-marker';
+ const coordinates = [event.lngLat.lng, event.lngLat.lat]
+ // const newMarker = new GeoJson(coordinates, { message : 'new marker' })
+ this.appService.addMarker('new marker',coordinates)
+ this.newMarker = new mapboxgl.Marker(el)
+ .setLngLat(coordinates)
+ .addTo(this.map);
+ }
+ //console.log(event)
+ })
+
this.map.on('click','soinumapa', (event) => {
// clean old markers
//let m = document.getElementsByClassName('active-marker')
@@ -76,16 +109,18 @@ export class MapBoxComponent implements OnInit {
if (this.activeMarker!=undefined) this.activeMarker.remove()
const coordinates = [event.lngLat.lng, event.lngLat.lat]
- const newMarker = new GeoJson(coordinates, { message : 'new marker' })
+ //const newMarker = new GeoJson(coordinates, { message : 'new marker' })
+ //this.appService.addMarker('new marker',newMarker)
+
let content = event.features[0].properties.content
let title = event.features[0].properties.title
let url = event.features[0].properties.attachment
let author = event.features[0].properties.author
let category = event.features[0].properties.category
let date = event.features[0].properties.date
- console.log(event.features[0].properties)
+ //console.log(event.features[0].properties)
let info = ""+title+" "+author+" "+date+"
"+content+""+title+" "+author+" "+date+"
"+content+"Landarte egitasmoaren laguntzarekin egindako grabaketa<\/a>.",
+ "title": "Sartaguda - Traktorea",
+ "author" : "Beatriz Calvo",
+ "href" : "",
+ "content" : "Muxikak bildu eta traktorea badoa deskargatzera. Landarte egitasmoaren laguntzarekin egindako grabaketa<\/a>.",
"attachment" : "http://www.soinumapa.net/wp-content/uploads/2018/08/sartaguda_tractor.mp3",
"image-url":"",
- "image" : ""
+ "image" : ""
}
},
{ "type": "Feature", "id" : 12330, "geometry": {"type": "Point","coordinates": [-2.038689716235922, 42.3658864254611]}, "properties": { "id" : 12330, "date" : "05/08/2018", "category": "Gizartea","title": "Sartaguda - Paraguayo bilketa", "author" : "Iñaki Martinez", "href" : "", "content" : "Uztaila iritsi bezala hasten dira Sartagudako nekazariak paraguayoak biltzen. Grabaketa honek lan horren berezko soinua erakusten du. Landarte egitasmoaren laguntzarekin egindako grabaketa<\/a>.", "attachment" : "http://www.soinumapa.net/wp-content/uploads/2018/08/sartaguda_paraguayos.mp3","image-url":"","image" : "" }
@@ -70,3 +70,20 @@ export const MARKERS: IGeoJson[] = [
]
export class Map {}
+
+export class Documento {
+ constructor (
+ public id: number,
+ public coord: GeoJson,
+ public title: string,
+ public author: string,
+ public email: string,
+ public category: string,
+ public file: string,
+ public description?: string
+ ) {}
+
+ public setCoord(coord:number[]) {
+ this.coord = new GeoJson(coord)
+ }
+}
diff --git a/src/app/messages/.messages.component.css.swp b/src/app/messages/.messages.component.ts.swp
similarity index 92%
rename from src/app/messages/.messages.component.css.swp
rename to src/app/messages/.messages.component.ts.swp
index 0dfe38c..130e09a 100644
Binary files a/src/app/messages/.messages.component.css.swp and b/src/app/messages/.messages.component.ts.swp differ
diff --git a/src/app/messages/messages.component.css b/src/app/messages/messages.component.css
index e13328d..3873f06 100644
--- a/src/app/messages/messages.component.css
+++ b/src/app/messages/messages.component.css
@@ -1,9 +1,10 @@
-div.messages-container {
+
+div.messages-container {
width:250px;
- min-width:200px;
+ min-width:200px;
min-height:50px;
max-height:80vh;
- overflow-y:auto;
+ overflow-y:auto;
background:rgba(0,0,0,0.8);
border:#fff solid 0px;
margin:20px;
@@ -12,6 +13,21 @@ div.messages-container {
font-size:0.8em;
}
+
+div.messages-container::before {
+ display: block;
+ position: absolute;
+ top: 15px;
+ left: 2.7rem;
+ width: 0;
+ height: 0;
+ border-right: 8px solid transparent;
+ border-bottom: 8px solid #333;
+ border-left: 8px solid transparent;
+ content: "";
+ z-index: 1000;
+}
+
h1 { font-size:1em; }
button { font-family:'Raleway',sans-serif; background:transparent; padding:5px; width:100%; color:#fff; border:#fff solid 2px;}
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index 426741d..f37d7be 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { AppService } from '../app.service';
@Component({
- selector: 'app-messages',
+ selector: 'messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.css']
})
diff --git a/src/assets/em.jpg b/src/assets/em.jpg
new file mode 100644
index 0000000..501187e
Binary files /dev/null and b/src/assets/em.jpg differ
diff --git a/src/assets/icon-red (copia).png b/src/assets/icon-red (copia).png
new file mode 100644
index 0000000..2771402
Binary files /dev/null and b/src/assets/icon-red (copia).png differ
diff --git a/src/assets/icon-red.png b/src/assets/icon-red.png
index 2771402..7bbfc78 100644
Binary files a/src/assets/icon-red.png and b/src/assets/icon-red.png differ
diff --git a/src/messages.xlf b/src/messages.xlf
new file mode 100644
index 0000000..51235de
--- /dev/null
+++ b/src/messages.xlf
@@ -0,0 +1,15 @@
+
+
+
+
+
+ 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
+
+ app/app.component.ts
+ 7
+
+ Texto intro
+
+
+
+
diff --git a/src/styles.css b/src/styles.css
index d1666dc..5853763 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7,20 +7,47 @@ a { color:#fff; font-weight:bold; cursor:pointer; text-decoration:none;}
/* map */
-.active-marker {
- width:50px;
- height:50px;
- border-radius:100%;
- border:#f95f5f solid 5px;
+#map { width:100%;height:100%; position:absolute; top:0; left:0;}
+
+.active-marker {
+ width:50px;
+ height:50px;
+ border-radius:100%;
+ border:#000 solid 2px;
+ border-top:0;
animation: hideshow 3s ease infinite;
}
+.new-marker {
+ width:50px;
+ height:50px;
+ border-radius:100%;
+ border:0;
+ background-color:#f3e;
+}
+
+.ecouterlemonde {
+ width:200px;
+ height:200px;
+ background-image:url('/assets/em.jpg');
+ background-size:cover;
+ background-color:transparent;
+ background-position:center center;
+ background-repeat: no-repeat;
+ -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
+-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
+box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
+}
+
@keyframes hideshow {
- 0% { opacity:0; transform:scale(1); }
- 50% { opacity:1; transform:scale(1.5); }
- 100% { opacity:0; transform:scale(1);}
+ 0% { opacity:0; transform:rotate(0deg); }
+ 50% { opacity:1; transform:rotate(180deg); }
+ 100% { opacity:0; transform:rotate(360deg);}
}
.marker-player { max-width:100%;margin-top:50px;}
+/* add content */
+messages { position:fixed; z-index:100; left:0; top:0;z-index:1000; }
+add-content { position:absolute; right:0; top:0; z-index:1000;}