First commit - Sartaguda Map for Landarte 2018

src/app/app.component.html

@@ -1,20 +1,3 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<h1>{{title}}</h1>
 
+<map-box></map-box>

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  title = 'Sartaguda suena';
 }

src/app/app.module.ts

@@ -1,18 +1,23 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+import { MapService } from './map.service';
 
 import { AppComponent } from './app.component';
+import { MapBoxComponent } from './map-box/map-box.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MapBoxComponent
   ],
   imports: [
     BrowserModule
   ],
-  providers: [],
+  providers: [
+		MapService,
+	],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

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

@@ -0,0 +1,3 @@
+.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; } 

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

@@ -0,0 +1 @@
+<div class="map" id="map"></div>

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

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

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

@@ -0,0 +1,198 @@
+import { Component, OnInit } from '@angular/core';
+import * as mapboxgl from 'mapbox-gl';
+import { MapService } from '../map.service';
+import { GeoJson, FeatureCollection} from '../map';
+
+@Component({
+  selector: 'map-box',
+  templateUrl: './map-box.component.html',
+  styleUrls: ['./map-box.component.css']
+})
+
+export class MapBoxComponent implements OnInit {
+
+	map: mapboxgl.Map;
+	style = 'mapbox://styles/mapbox/outdoors-v9';
+	lng = -2.047919;
+	lat = 42.383986;
+	message = 'Map from Sartaguda';
+
+	// data
+	source: any;
+	markers: any;
+	hoverid: null;
+
+  constructor( private mapService: MapService) { }
+
+  ngOnInit() {
+		this.initializeMap()
+  }
+
+	private initializeMap() {
+		this.markers = this.mapService.getMarkers()
+		this.buildMap()
+	}
+
+	buildMap() {
+		this.map = new mapboxgl.Map({
+			container: 'map',
+		  //style: 'mapbox://styles/mapbox/outdoors-v9',
+			style: 'mapbox://styles/lrullo/cjm3ppgo50j492snxn2lwak88',
+			zoom: 13,
+			center: [this.lng, this.lat]
+		});
+
+		// controls
+		this.map.addControl(new mapboxgl.NavigationControl());
+
+		this.map.on('click','clusters', (event) => {
+			let features = this.map.queryRenderedFeatures(event.point, { layers: ['clusters'] });
+      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
+				});
+			})
+		})
+
+		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)
+		})
+
+		this.map.on('mouseenter',"clusters", (event) => {
+			this.map.getCanvas().style.cursor = 'pointer';
+		});
+
+		this.map.on('mouseenter','soinumapa', (event) => {
+			this.map.getCanvas().style.cursor = 'pointer';
+			let id = event.features[0].properties.id
+			this.map.setFeatureState({source:'soinumapa',id: id}, { hover:true })
+			this.hoverid = id
+		})
+		
+		this.map.on("mouseleave", "clusters", () => {
+			this.map.getCanvas().style.cursor = '';
+		});
+
+		this.map.on("mouseleave", "soinumapa", () => {
+      this.map.getCanvas().style.cursor = '';
+      if (this.hoverid) this.map.setFeatureState({source: 'soinumapa', id: this.hoverid}, { hover: false});
+			this.hoverid = null
+    });
+
+		this.map.on('load',(event) => {
+	
+			this.map.addSource('soinumapa', {
+				type: 'geojson',
+				data: '/assets/soinumapa.geojson',
+				cluster:true,
+				clusterMaxZoom: 20,
+				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)
+			})
+			*/
+
+
+			this.map.addLayer({
+        id: "clusters",
+        type: "circle",
+        source: "soinumapa",
+        filter: ["has", "point_count"],
+        paint: {
+            // Use step expressions (https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
+            // with three steps to implement three types of circles:
+            //   * Blue, 20px circles when point count is less than 100
+            //   * Yellow, 30px circles when point count is between 100 and 750
+            //   * Pink, 40px circles when point count is greater than or equal to 750
+            "circle-color": [
+                "step",
+                ["get", "point_count"],
+                "#51bbd6",
+                100,
+                "#f1f075",
+                750,
+                "#f28cb1"
+            ],
+            "circle-radius": [
+                "step",
+                ["get", "point_count"],
+                20,
+                100,
+                30,
+                750,
+                40
+            ]
+        }
+    	});
+	
+			this.map.addLayer({
+        id: "cluster-count",
+        type: "symbol",
+        source: "soinumapa",
+        filter: ["has", "point_count"],
+        layout: {
+            "text-field": "{point_count_abbreviated}",
+            "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
+            "text-size": 12
+        }
+    	});
+				
+			this.map.loadImage('/assets/icon-red.png', (error,image) => {
+				if (error) throw error;
+				this.map.addImage('icon-red',image);
+
+				this.map.addLayer({
+					id: "soinumapa",
+					source: "soinumapa",
+					type: "symbol",
+	        filter: ["!", ["has", "point_count"]],
+					layout: {
+            'icon-image': "icon-red",
+						'icon-size': 1,
+        	},
+					paint: {
+						'icon-opacity': ["case",
+							["boolean", ["feature-state", "hover"], false],
+							0.5,
+							1
+						]
+
+					}	
+				})	
+			})
+				
+		})
+	}
+
+}
+
+/* DOCUMENTATION */
+/*----
+https://www.mapbox.com/help/working-with-large-geojson-data/
+https://www.mapbox.com/mapbox-gl-js/example/cluster/
+https://www.mapbox.com/mapbox-gl-js/example/popup-on-hover/
+https://www.mapbox.com/mapbox-gl-js/example/hover-styles/
+----*/

src/app/map.service.spec.ts

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

src/app/map.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../environments/environment';
+import { GeoJson, MARKERS } from './map';
+import * as mapboxgl from 'mapbox-gl';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+@Injectable()
+export class MapService {
+
+  constructor() { 
+		mapboxgl.accessToken = environment.mapbox.accessToken
+	}
+
+	getMarkers(): Observable<any> {
+		//get Markers from local GeoJson
+		return of(MARKERS);
+	}
+
+}

src/app/map.ts

@@ -0,0 +1,72 @@
+export interface IGeometry {
+    type: string;
+    coordinates: number[];
+}
+
+export interface IGeoJson {
+    type: string;
+		id?: any;
+    geometry: IGeometry;
+    properties?: any;
+    $key?: string;
+}
+
+export class GeoJson implements IGeoJson {
+  type = 'Feature';
+  geometry: IGeometry;
+
+  constructor(coordinates, public properties?) {
+    this.geometry = {
+      type: 'Point',
+      coordinates: coordinates
+    }
+  }
+}
+
+export class FeatureCollection {
+  type = 'FeatureCollection'
+  constructor(public features: Array<GeoJson>) {}
+}
+
+export const MARKERS: IGeoJson[] = [
+{
+  "type": "Feature",
+	"id" : 1,
+  "geometry": {
+    "type": "Point",
+    "coordinates": [-2.0585433446040042, 42.38092131273111]
+  },
+  "properties": {
+		"id" : 1,
+    "content": "Hello World!",
+		"icon": "marker-red",
+		"iconSize": [5, 5]
+  }
+},
+{	
+	"type": "Feature", 
+	"id" : 12351, 
+	"geometry": 	{
+		"type": "Point",
+		"coordinates": [-2.044522480456749, 42.3596491127368]
+	},	
+	"properties":	{
+		"id" : 12351, 
+		"date" : "08/08/2018", 
+		"category": "Mekanikoa",
+		"title": "Sartaguda - Traktorea", 
+		"author" : "Beatriz Calvo", 
+		"href" : "", 
+		"content" : "Muxikak bildu eta traktorea badoa deskargatzera.<br\/><a href=\"http:\/\/www.culturanavarra.es\/eu\/landarte\">Landarte egitasmoaren laguntzarekin egindako grabaketa<\/a>.", 
+		"attachment" : "http://www.soinumapa.net/wp-content/uploads/2018/08/sartaguda_tractor.mp3",
+		"image-url":"",
+		"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.<br\/><a href=\"http:\/\/www.culturanavarra.es\/eu\/landarte\">Landarte egitasmoaren laguntzarekin egindako grabaketa<\/a>.", "attachment" : "http://www.soinumapa.net/wp-content/uploads/2018/08/sartaguda_paraguayos.mp3","image-url":"","image" : "" }
+  	},
+{	"type": "Feature", "id":12436, "geometry": 	{"type": "Point","coordinates": [-2.0551689816199996, 42.38049250425786]},	"properties":	{ "id" : 12436, "date" : "27/07/2018", "category": "Gizartea","title": "Sartaguda - Ontziratzea", "author" : "Beatriz Calvo", "href" : "", "content" : "Babarrun txuri eta tomateak boteetan sartzeko prozesuaren, eta ondorengo egoste eta esterilizazio prozesuen soinuen grabaketa.", "attachment" : "http://www.soinumapa.net/wp-content/uploads/2018/09/sartaguda_embotado.mp3","image-url":"","image" : "" }
+  	}
+]
+
+export class Map {}

src/app/map.ts.backup

@@ -0,0 +1,85 @@
+export interface IGeometry {
+    type: string;
+    coordinates: number[];
+}
+
+export interface IGeoJson {
+    type: string;
+		id?: any;
+    geometry: IGeometry;
+    properties?: any;
+    $key?: string;
+}
+
+export class GeoJson implements IGeoJson {
+  type = 'Feature';
+  geometry: IGeometry;
+
+  constructor(coordinates, public properties?) {
+    this.geometry = {
+      type: 'Point',
+      coordinates: coordinates
+    }
+  }
+}
+
+export class FeatureCollection {
+  type = 'FeatureCollection'
+  constructor(public features: Array<GeoJson>) {}
+}
+
+export const MARKERS: IGeoJson[] = [
+{
+  "type": "Feature",
+	"id" : 1,
+  "geometry": {
+    "type": "Point",
+    "coordinates": [-2.0585433446040042, 42.38092131273111]
+  },
+  "properties": {
+		"id" : 1,
+    "message": "Hello World!",
+		"icon": "marker-red",
+		"iconSize": [5, 5]
+  }
+},
+{
+  "type": "Feature",
+	"id" : 2,
+  "geometry": {
+    "type": "Point",
+    "coordinates": [-1.0585433446040052, 42.38092131273111]
+  },
+  "properties": {
+		"id" : 2,
+    "message": "Hello World!",
+		"icon": "marker-red",
+		"iconSize": [50, 50]
+  }
+},
+
+{	
+	"type": "Feature", 
+	"id" : 2,
+	"geometry": 	{
+		"type": "Point",
+		"coordinates": [-2.044522480456749, 42.3596491127368]
+	},	
+	"properties":	{
+		"icon": "marker-red",
+		"iconSize": [50,50], 
+		"id" : 12351, 
+		"date" : "08/08/2018", 
+		"category": "Mekanikoa",
+		"title": "Sartaguda - Traktorea", 
+		"author" : "Beatriz Calvo", 
+		"href" : "", 
+		"content" : "Muxikak bildu eta traktorea badoa deskargatzera.<br\/><a href=\"http:\/\/www.culturanavarra.es\/eu\/landarte\">Landarte egitasmoaren laguntzarekin egindako grabaketa<\/a>.", 
+		"attachment" : "http://www.soinumapa.net/wp-content/uploads/2018/08/sartaguda_tractor.mp3",
+		"image-url":"",
+		"image" : "" 
+	}
+}
+]
+
+export class Map {}

src/environments/environment.ts

@@ -4,5 +4,9 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+	mapbox: {
+    accessToken: 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w'
+  }
 };
+

src/index.html

@@ -4,9 +4,11 @@
   <meta charset="utf-8">
   <title>SartagudaSuena</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">
+
+
 </head>
 <body>
   <app-root></app-root>