audiolab/sartaguda-suena
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Nuevo Archivo de Soinumapa y cambios en la visualización del mapa

Browse Source
This commit is contained in:
Siroco 2018-09-17 02:16:17 +02:00
parent 28cba47f36
commit 48233010e7
18 changed files with 3057 additions and 2933 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -1605,6 +1605,11 @@
}
}
},
"classlist.js": {
"version": "1.1.20150312",
"resolved": "https://registry.npmjs.org/classlist.js/-/classlist.js-1.1.20150312.tgz",
"integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k="
},
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",

1
package.json
View File

@ -21,6 +21,7 @@
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"classlist.js": "1.1.20150312",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"

1
src/app/map-box/map-box.component.css
View File

@ -1,3 +1,4 @@
.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; }
.marker-player { max-width:100%;}

32
src/app/map-box/map-box.component.ts
View File

@ -22,6 +22,7 @@ export class MapBoxComponent implements OnInit {
source: any;
markers: any;
hoverid: null;
activeMarker: any;
constructor(
private mapService: MapService,
@ -44,12 +45,16 @@ export class MapBoxComponent implements OnInit {
style: 'mapbox://styles/lrullo/cjm4bqlj2b36y2ss4mpq41uxs',
zoom: 13,
pitch: 60, // pitch in degrees
bearing: -60, // bearing in degrees
center: [this.lng, this.lat]
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 mapboxgl.NavigationControl())
this.map.on('click','clusters', (event) => {
let features = this.map.queryRenderedFeatures(event.point, { layers: ['clusters'] });
@ -64,14 +69,31 @@ export class MapBoxComponent implements OnInit {
})
this.map.on('click','soinumapa', (event) => {
// clean old markers
//let m = document.getElementsByClassName('active-marker')
//if (m.length > 0) document.removeChild(m[0])
if (this.activeMarker!=undefined) this.activeMarker.remove()
const coordinates = [event.lngLat.lng, event.lngLat.lat]
const newMarker = new GeoJson(coordinates, { message : 'new marker' })
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
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)
let info = "<h2>"+title+"</h2><h3>"+author+"</h3><p>"+date+"</p>"+content+"<br/><audio class=\"marker-player\"controls autoplay src=\""+url+"\"></audio>"
console.log(event.features[0]);
this.appService.clear()
this.appService.add(info)
var el = document.createElement('div');
el.className = 'marker active-marker';
this.activeMarker = new mapboxgl.Marker(el)
.setLngLat(event.features[0].geometry.coordinates)
.addTo(this.map);
})
this.map.on('mouseenter',"clusters", (event) => {

BIN
src/app/messages/.messages.component.css.swp Normal file
View File

Binary file not shown.

6
src/app/messages/messages.component.css
View File

@ -1,7 +1,9 @@
div.messages-container {
width:100px;
width:250px;
min-width:200px;
min-height:50px;
min-height:50px;
max-height:80vh;
overflow-y:auto;
background:rgba(0,0,0,0.8);
border:#fff solid 0px;
margin:20px;

BIN
src/assets/audio-lab_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
src/assets/gobierno_navarra_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/sartaguda.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

2970
src/assets/soinumapa.geojson
View File

File diff suppressed because one or more lines are too long

2913
src/assets/soinumapa.geojson.bk Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/titulo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/tramontana.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/favicon.xcf Normal file
View File

Binary file not shown.

7
src/index.html
View File

@ -2,15 +2,18 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>SartagudaSuena</title>
<title>Sartaguda - Constuir a través del oído</title>
<base href="/">
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
body {background-color:#f2eded;}
</style>
</head>
<body>
<body class="body">
<app-root></app-root>
</body>
</html>

30
src/polyfills.ts
View File

@ -19,23 +19,23 @@
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';

25
src/styles.css
View File

@ -1 +1,26 @@
/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Oswald:200|Roboto|Raleway:200,600');
body { font-family:'Raleway',sans-serif; color:#000; font-size:0.9em; background-color:#f2eded; }
p { text-align:left; line-height:1.5em;}
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;
animation: hideshow 3s ease infinite;
}
@keyframes hideshow {
0% { opacity:0; transform:scale(1); }
50% { opacity:1; transform:scale(1.5); }
100% { opacity:0; transform:scale(1);}
}
.marker-player { max-width:100%;margin-top:50px;}