diff --git a/package-lock.json b/package-lock.json index 48e341a0954d5f8c2accf3a6731be28e5bb9c0de..6c56f8e826d5f64c715a8933459b5526913c4f5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,3 +1,24 @@ { - "lockfileVersion": 1 + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "@types/geojson": { + "version": "7946.0.3", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.3.tgz", + "integrity": "sha512-BYHiG1vQJ7T93uswzuXZ0OBPWqj5tsAPtaMDQADV8sn2InllXarwg9llr6uaW22q1QCwBZ81gVajOpYWzjesug==" + }, + "@types/leaflet": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.7.tgz", + "integrity": "sha512-y9KEOzVB1uIPVPOc8FBqQjBvFykb/WhNfHDN6eTL8FlUy6F7FaqGMWHj5OhDSBHMWoqc70eR3FGiXdzbg1rqtg==", + "requires": { + "@types/geojson": "7946.0.3" + } + }, + "leaflet": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz", + "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ==" + } + } } diff --git a/webapp/.angular-cli.json b/webapp/.angular-cli.json index 862071be9ffc02a136894ecaed8fe4050f4c44fe..572b319d6d5b7636c236c9e63c0ba2d73592c1eb 100644 --- a/webapp/.angular-cli.json +++ b/webapp/.angular-cli.json @@ -19,7 +19,8 @@ "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ - "styles.scss" + "styles.scss", + "../node_modules/leaflet/dist/leaflet.css" ], "scripts": [], "environmentSource": "environments/environment.ts", diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 676242a6aa2928556a7a34029fa3e23f7d4caf3f..30c09f31e875a3138f32fdf827a48d47f2c25f18 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -283,6 +283,11 @@ "semver-intersect": "1.3.1" } }, + "@types/geojson": { + "version": "7946.0.3", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.3.tgz", + "integrity": "sha512-BYHiG1vQJ7T93uswzuXZ0OBPWqj5tsAPtaMDQADV8sn2InllXarwg9llr6uaW22q1QCwBZ81gVajOpYWzjesug==" + }, "@types/jasmine": { "version": "2.8.6", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.6.tgz", @@ -298,6 +303,14 @@ "@types/jasmine": "2.8.6" } }, + "@types/leaflet": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.2.7.tgz", + "integrity": "sha512-y9KEOzVB1uIPVPOc8FBqQjBvFykb/WhNfHDN6eTL8FlUy6F7FaqGMWHj5OhDSBHMWoqc70eR3FGiXdzbg1rqtg==", + "requires": { + "@types/geojson": "7946.0.3" + } + }, "@types/node": { "version": "6.0.102", "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.102.tgz", @@ -6347,6 +6360,11 @@ "invert-kv": "1.0.0" } }, + "leaflet": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz", + "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ==" + }, "less": { "version": "2.7.3", "resolved": "https://registry.npmjs.org/less/-/less-2.7.3.tgz", diff --git a/webapp/package.json b/webapp/package.json index f0c416854b688153c9478a291bfd4a162b27904c..04895f12e525b32c38486eb96546a1ca6bbca8e1 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -30,9 +30,11 @@ "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", + "@types/leaflet": "^1.2.7", "bulma": "^0.7.1", "core-js": "^2.4.1", "font-awesome": "^4.7.0", + "leaflet": "^1.3.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html index 2db5ee2873c058ea7c7e2e0e45e3d35ec6ec4b76..c0c8e3ce8a67d4102c6b283834978d6bbbaf9117 100644 --- a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html @@ -1,3 +1,3 @@ -<p> - dataset-map works! -</p> +<div id="frugalmap"> + +</div> \ No newline at end of file diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..64d0b1d73c271bb580677f90e0e749709a236065 100644 --- a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.scss @@ -0,0 +1,4 @@ +#frugalmap { + height: 600px; + width: 80% +} diff --git a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts index d3947c74d48449128d7d5f06a4868198eb7cbe64..e31e8fb608d912165cc2e1f672757a84d48675da 100644 --- a/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts +++ b/webapp/src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts @@ -1,4 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import * as L from 'leaflet'; +import { ActivatedRoute, ParamMap } from '@angular/router'; +import { DatasetService } from '../../../services'; +import { Metadata, Data } from '../../../models'; @Component({ selector: 'app-dataset-map', @@ -6,10 +10,57 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./dataset-map.component.scss'] }) export class DatasetMapComponent implements OnInit { + metadata: Metadata; - constructor() { } + constructor( + private _route: ActivatedRoute, + private _datasetService: DatasetService, + ) { } ngOnInit() { + this._route.parent.paramMap + .switchMap((params: ParamMap) => this._datasetService.getMetadataById(params.get('id'))) + .subscribe((metadata: Metadata) => { + this._datasetService.getDataByMetadataById(metadata.dataset_index).subscribe(results => { + this.constructMap(results); + }); + + }); } + constructMap(results: Data[]) { + // Déclaration de la carte avec les coordonnées du centre et le niveau de zoom. + const dataGrandLyonMap = L.map('frugalmap', { minZoom: 9, maxZoom: 18 }).setView([45.75, 4.85], 12); + + L.tileLayer('https://openstreetmap.data.grandlyon.com/3857/tms/1.0.0/osm_grandlyon@GoogleMapsCompatible/{z}/{x}/{-y}.png', { + attribution: 'Data Grand Lyon Map' + }).addTo(dataGrandLyonMap); + + // Set icon marker + const myIcon = L.icon({ + iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png' + }); + + results.forEach(element => { + console.log(element); + switch (element.geometry.type) { + case 'Point': + L.marker([element.geometry.coordinates[1], element.geometry.coordinates[0]], { icon: myIcon }) + .bindPopup(element.properties.nom).addTo(dataGrandLyonMap); + break; + case 'Polygon': + // create a red polygon from an array of LatLng points + element.geometry.coordinates.forEach(coordinates => { + coordinates.forEach(coord => { + coord.reverse(); + }); + L.polygon(coordinates, { color: 'red' }).addTo(dataGrandLyonMap); + }); + + break; + } + }); + + L.control.scale().addTo(dataGrandLyonMap); + } } diff --git a/webapp/src/app/geosource/models/data.model.ts b/webapp/src/app/geosource/models/data.model.ts new file mode 100644 index 0000000000000000000000000000000000000000..50824a190234028648f9617e7cae796d420cfa5b --- /dev/null +++ b/webapp/src/app/geosource/models/data.model.ts @@ -0,0 +1,33 @@ +export interface IData { + geometry: IDataGeometry; + href: string; + properties: IDataProperties; +} + +interface IDataGeometry { + coordinates: any[]; + type: string; +} + +interface IDataProperties { + capacite: string; + gid: string; + horaires: string; + id: string; + last_update: string; + last_update_fme: string; + nom: string; + p_surv: string; + place_handi: string; +} + +export class Data implements IData { + geometry: IDataGeometry; + href: string; + properties: IDataProperties; + constructor(data: IData) { + Object.assign(this, data); + } +} + + diff --git a/webapp/src/app/geosource/models/index.ts b/webapp/src/app/geosource/models/index.ts index aae31257e39a6f9d94ed2d3a39759161dd9ec0b8..dc6769435620ac50bfaccbeae0a6729bf58a5620 100644 --- a/webapp/src/app/geosource/models/index.ts +++ b/webapp/src/app/geosource/models/index.ts @@ -8,3 +8,4 @@ export { IFilter } from './filter.model'; export { IHighlights, Highlights } from './highlights.model'; export { SearchCompletion } from './search-completion.model'; export { SearchSuggestion } from './suggestion.model'; +export { Data } from './data.model'; diff --git a/webapp/src/app/geosource/models/metadata.model.ts b/webapp/src/app/geosource/models/metadata.model.ts index ce575790b5ef9a223c71538f830b005b0630a684..836459bd8889bce6f815086d59296e4fc507f0cd 100644 --- a/webapp/src/app/geosource/models/metadata.model.ts +++ b/webapp/src/app/geosource/models/metadata.model.ts @@ -1,5 +1,6 @@ export interface IMetadata { 'dataset_id'?: string; + 'dataset_index'?: string; 'title': string; 'abstract': string; 'keyword': string[]; @@ -42,6 +43,7 @@ export interface IMetadataResolution { export class Metadata implements IMetadata { 'dataset_id'?: string; + 'dataset_index'?: string; 'title': string; 'abstract': string; 'keyword': string[]; diff --git a/webapp/src/app/geosource/services/dataset.service.ts b/webapp/src/app/geosource/services/dataset.service.ts index e62e4dbaa6c076a838ab034dd10bb65c62f43abf..507e751a944a2108f650489c99ae15537f65faf0 100644 --- a/webapp/src/app/geosource/services/dataset.service.ts +++ b/webapp/src/app/geosource/services/dataset.service.ts @@ -9,7 +9,8 @@ import { Subject } from 'rxjs/Subject'; import { IElasticsearchOptions, IElasticsearchResponse, IMetadata, - Metadata, IDataset, ISortOption, IFilter, ElasticsearchOptions, IElasticsearchHit, Dataset, Highlights + Metadata, IDataset, ISortOption, IFilter, ElasticsearchOptions, IElasticsearchHit, Dataset, Highlights, + Data } from '../models'; import { ElasticsearchService } from './elasticsearch.service'; @@ -48,7 +49,7 @@ export class DatasetService { aggregations[filter.field].buckets.forEach(element => { element.count_per_metadata = element.count_per_metadata.value; }); - filter.aggregations = aggregations[filter.field].buckets; + filter.aggregations = aggregations[filter.field].buckets; } }); // NOtify that data have been reloaded @@ -125,9 +126,7 @@ export class DatasetService { if (e.hits.hits.length > 0) { const metadata = new Metadata(e.hits.hits[0]._source['metadata-fr']); const coordinates = e.hits.hits[0]._source['metadata-fr']['bbox']['coordinates'][0]; - const test = coordinates.map(point => { - return point[0]; - }); + metadata.dataset_index = e.hits.hits[0]._index; metadata.max_west = Math.max.apply(Math, coordinates.map(point => { return point[0]; })); @@ -148,6 +147,16 @@ export class DatasetService { }); } + getDataByMetadataById(id: number | string): Observable<Data[]> { + return this._elasticsearchService.getAllDataByMetadataId(id).map(e => { + const dataList = []; + e.hits.hits.forEach(element => { + dataList.push(new Data(element._source['data-fr'])); + }); + return dataList; + }); + } + /* SEARCH */ addFilter(field, value): any { this._elasticsearchOptions.filters.forEach((element) => { @@ -209,7 +218,7 @@ export class DatasetService { sortChanged(value: string) { this._elasticsearchOptions.sortOptions.value = value; // If sorting by date the order by default is from the most recent to the oldest (desc) - if ( value === 'date') { + if (value === 'date') { this._elasticsearchOptions.sortOptions.order = 'desc'; } this._searchChangeSubject.next(); diff --git a/webapp/src/app/geosource/services/elasticsearch.service.ts b/webapp/src/app/geosource/services/elasticsearch.service.ts index 862804d38a748516eebda223dc15116d7a4937b7..36acfbc50f0d42dfbfb6557706a848a698749c99 100644 --- a/webapp/src/app/geosource/services/elasticsearch.service.ts +++ b/webapp/src/app/geosource/services/elasticsearch.service.ts @@ -7,6 +7,7 @@ import { Observable } from 'rxjs/Observable'; @Injectable() export class ElasticsearchService { + private url: string; constructor( @@ -34,6 +35,19 @@ export class ElasticsearchService { }); } + + getAllDataByMetadataId(index: number | string) { + return this._http.request<IElasticsearchResponse>('POST', this.url, { + body: { + 'query': { + 'term': { + '_index': index + } + } + } + }); + } + /* * This request will get the completion suggests of elasticsearch from one query text * We limit the size of options to 3. diff --git a/webapp/src/environments/environment.ts b/webapp/src/environments/environment.ts index 5fdd0d5eb7b5def3792aa7fb7cbe6b93bb851d91..45d82e1098bbd9e4a368d416ba00b326a28454d3 100644 --- a/webapp/src/environments/environment.ts +++ b/webapp/src/environments/environment.ts @@ -7,7 +7,7 @@ export const environment = { production: false, elasticsearchUrl: { - full: 'http://localhost:8081/elasticsearch/*.full.v3', + full: 'http://localhost:8081/elasticsearch/*.full', meta: 'http://localhost:8081/elasticsearch/*.meta' }, diff --git a/webapp/src/tsconfig.app.json b/webapp/src/tsconfig.app.json index 39ba8dbacbbe051fdd02481b07af43219296a075..1ca08cd034b14182be0bdaf3f1d4dced251a5b84 100644 --- a/webapp/src/tsconfig.app.json +++ b/webapp/src/tsconfig.app.json @@ -4,7 +4,9 @@ "outDir": "../out-tsc/app", "baseUrl": "./", "module": "es2015", - "types": [] + "types": [ + "leaflet" + ] }, "exclude": [ "test.ts",