Skip to content
GitLab
Commit ac05a1a2 authored by ncastejon's avatar ncastejon
Browse files

Try with WMS

parent faa52597
Expand all Hide whitespace changes
Inline Side-by-side
.jsbeautifyrc 0 → 100644
View file @ ac05a1a2
{
"css": {
"space_around_selector_separator": true,
"indent_size": 2,
"newline_between_rules": true,
"end_with_newline": true
},
"html": {
"indent_size": 2,
"wrap_line_length": 120
},
"js": {
"indent_size": 2,
"wrap_line_length": 120
}
}
\ No newline at end of file
.stylelintrc deleted 100644 → 0
View file @ faa52597
{
"extends": "stylelint-config-standard",
"rules": {
"selector-pseudo-class-no-unknown": [ true, {
ignorePseudoClasses: ["ng-deep"],
} ]
}
}
\ No newline at end of file
.stylelintrc.json 0 → 100644
View file @ ac05a1a2
{
"extends": "stylelint-config-standard",
"rules": {
"rule-empty-line-before": null,
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["ng-deep"]
}
]
}
}
\ No newline at end of file
package-lock.json
View file @ ac05a1a2
This diff is collapsed.
src/app/core/components/contact/contact.component.html
View file @ ac05a1a2
......@@ -211,7 +211,8 @@
January 6, 1978, you have the right to access and rectify information that
concerns you. To exercise this right and be transfered the information concerning
you, please contact: Lyon Métropole - Direction des
Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal mail
Affaires Juridiques et de la Commande Publique - 20 Rue du Lac - BP 33569 - 69505 Lyon Cedex 03, by postal
mail
or using the appropriate form on this portal. You may also oppose processing of
your personal data for a legitimate reason. In this case, we will not be able to
process the request submitted using this form.
......@@ -238,4 +239,4 @@
</div>
</div>
</form>
</div>
</div>
\ No newline at end of file
src/app/core/components/contact/contact.component.scss
View file @ ac05a1a2
@import '../../../../scss/variables.scss';
@import "../../../../scss/variables.scss";
@import "../../../../../node_modules/bulma/sass/utilities/_all";
h1 {
......@@ -78,6 +78,7 @@ h3 {
}
.title-label.is-danger {
&:hover,
&:focus {
background-color: white;
......
src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.html
View file @ ac05a1a2
<div>
<app-map></app-map>
<input type="text" (keyup)="keyUpChanged($event.target.value)" />
<button (click)="showByGenre()">Colorer par genre</button>
<div *ngIf="metadata">
<app-map [metadata]="metadata" [filterSearch]="filterSearch" [aggregationsFilter]="aggregationsFilter"></app-map>
</div>
src/app/geosource/components/dataset-detail/dataset-map/dataset-map.component.ts
View file @ ac05a1a2
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MapService } from '../../../../map/services/map.service';
import { DatasetDetailService, ElasticsearchService } from '../../../services';
import { Subscription, Subject } from 'rxjs';
import { Metadata } from '../../../models';
import { debounceTime } from 'rxjs/operators';
@Component({
selector: 'app-dataset-map',
......@@ -10,17 +14,48 @@ import { MapService } from '../../../../map/services/map.service';
export class DatasetMapComponent implements OnInit {
mapLoaded: boolean;
datasetSub: Subscription; // Subscription to dataset change
metadata: Metadata;
aggregationsFilter: any[];
filterSearch: string;
keyUpSubject: Subject<string> = new Subject<string>();
constructor(
private _mapService: MapService,
private _datasetDetailService: DatasetDetailService,
private _elasticSearchService: ElasticsearchService,
) { }
ngOnInit() {
this.metadata = this._datasetDetailService.datasetMetadata;
this.keyUpSubject.pipe(debounceTime(500)).subscribe((key) => {
this.filterSearch = key;
});
// Subcribe to the dataset changes in the service. When the dataset is loaded
// (with the metadata), we construct the map and display the features
this.datasetSub = this._datasetDetailService.dataset$.subscribe(() => {
this.metadata = this._datasetDetailService.datasetMetadata;
});
this._mapService.map$.subscribe(() => {
this.mapLoaded = true;
});
}
keyUpChanged(key: string) {
this.keyUpSubject.next(key);
}
showByGenre() {
this._elasticSearchService.getDataAggregations(this.metadata.dataset_id, 'data-fr.properties.genre')
.subscribe((aggregations) => {
this.aggregationsFilter = aggregations;
});
}
// Generate the url with map options
// http://hostName#zoom/latitude/longitude/bearing/pitch
getPermalinkUrl() {
......
src/app/geosource/components/results/results.component.html
View file @ ac05a1a2
......@@ -2,19 +2,22 @@
<div class="filter-button-touch column is-hidden-desktop has-text-centered">
<a (click)="toggleFilters()" i18n="@@global.filter">Filter</a>
</div>
<div class="column is-3-desktop is-12-touch is-hidden-touch filter-column" [ngClass]="{'is-hidden-touch': displayFilters === false}">
<div class="column is-3-desktop is-12-touch is-hidden-touch filter-column"
[ngClass]="{'is-hidden-touch': displayFilters === false}">
<app-filter-list></app-filter-list>
</div>
<div class="column is-9-desktop is-12-touch results-column" *ngIf="results">
<div class="tab-results">
<app-results-tab-scope [countResults]="countResults" [selectedScope]="selectedScope" (scopeChanged)="scopeChanged($event)">
<app-results-tab-scope [countResults]="countResults" [selectedScope]="selectedScope"
(scopeChanged)="scopeChanged($event)">
</app-results-tab-scope>
</div>
<!-- If we have results, display the pagination and count results
If not, display one message indicating no result was found -->
<div class="columns is-multiline is-vcentered is-marginless header-results" *ngIf="countResults[selectedScope.key]; else noResult">
<div class="columns is-multiline is-vcentered is-marginless header-results"
*ngIf="countResults[selectedScope.key]; else noResult">
<div class="column is-12-touch" *ngIf="paginator.length">
<span>{{ fromResultNumber }} - {{ toResultNumber }} </span>
<span i18n="@@global.resultsFound">to {{ paginator.length }} results found</span>
......@@ -78,4 +81,4 @@
</app-paginator>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/geosource/services/elasticsearch.service.ts
View file @ ac05a1a2
......@@ -1128,4 +1128,60 @@ export class ElasticsearchService {
),
);
}
getDataAggregations(datasetId: string, field: string) {
const request = {
body: {
size: 0,
from: 10,
query: {
bool: {
must: [
{
query_string: {
query: 'c1b069ca-181d-4265-9838-8d182f207bd3',
default_field: 'data_and_metadata',
},
},
],
},
},
aggregations: {
'data-fr.properties.genre': {
terms: {
field: `${field}.keyword`,
order: {
_key: 'asc',
},
size: 500,
},
aggs: {
count: {
cardinality: {
field: `${field}.keyword`,
},
},
},
},
},
},
};
return this._http.request<IElasticsearchResponse>('POST', this.elasticSearchUrl, request).pipe(
map((e) => {
const dataAggregations = [];
if (e.aggregations[field].buckets) {
e.aggregations[field].buckets.forEach((e) => {
dataAggregations.push(e.key);
});
}
return dataAggregations;
}),
catchError(
(err) => {
throw this._errorService.handleError(err, { message: notificationMessages.geosource.getResults });
},
),
);
}
}
src/app/map/components/map.component.html
View file @ ac05a1a2
<div>
<div id="map" class="mapbox-map" [ngClass]="{'fullscreen': fullscreen===true, 'display-details': selectedData !== null && displayDataDetails === true, 'hide-details': displayDataDetails === false && selectedData !== null}">
<div id="map" class="mapbox-map"
[ngClass]="{'fullscreen': fullscreen===true, 'display-details': selectedData !== null && displayDataDetails === true, 'hide-details': displayDataDetails === false && selectedData !== null}">
<div id="menu" *ngIf="displayControls">
<div class="columns is-mobile is-marginless">
<div class="column is-narrow">
<div class="buttons has-addons column-content">
<ng-container *ngFor="let l of settings.baseLayers">
<button class="button" [disabled]="l.id === selectedBaseLayer.id" [ngClass]="{'is-selected': l.id === selectedBaseLayer.id, 'is-danger': l.id === selectedBaseLayer.id}"
<button class="button" [disabled]="l.id === selectedBaseLayer.id"
[ngClass]="{'is-selected': l.id === selectedBaseLayer.id, 'is-danger': l.id === selectedBaseLayer.id}"
(click)="switchLayer(l)" type="button">
{{ l.labels[lang] }}
</button>
......@@ -14,10 +16,29 @@
</div>
</div>
<div class="columns is-mobile is-marginless">
<div class="column is-narrow">
<div class="buttons has-addons column-content">
<button class="button" [disabled]="'WFS' === currentLayerType" *ngIf="availableLayers.includes('WFS')"
[ngClass]="{'is-selected': 'WFS' === currentLayerType,
'is-danger': 'WFS' === currentLayerType}" (click)="switchSourceLayer('WFS')" type="button">
WFS
</button>
<button class="button" [disabled]="'WMS' === currentLayerType" *ngIf="availableLayers.includes('WMS')"
[ngClass]="{'is-selected':'WMS' === currentLayerType,
'is-danger': 'WMS' === currentLayerType}" (click)="switchSourceLayer('WMS')" type="button">
WMS
</button>
</div>
</div>
</div>
<div class="columns is-mobile is-marginless">
<div class="column">
<div class="mapboxgl-ctrl-group column-content">
<button class="mapboxgl-ctrl-icon" [ngClass]="{'btn-exit-fullscreen': fullscreen === true, 'btn-fullscreen': fullscreen === false}"
<button class="mapboxgl-ctrl-icon"
[ngClass]="{'btn-exit-fullscreen': fullscreen === true, 'btn-fullscreen': fullscreen === false}"
type="button" (click)="toogleFullscreen()">
</button>
</div>
......@@ -40,20 +61,25 @@
</div>
<div class="copy-map">
<input type="text" class="input" id="mapUrlCopy"
[value]="mapUrl()" #mapUrlElement>
<input type="text" class="input" id="mapUrlCopy" [value]="mapUrl()" #mapUrlElement>
<button type="button" (click)="copyMaplink(mapUrlElement)" class="button is-medium">
{{zoom()}}
<svg xmlns="http://www.w3.org/2000/svg" id="copy" viewBox="0 0 18 18">
<path d="M11.1 7.1c.6.6 1 1.3 1.2 2.2s.2 1.6 0 2.4-.6 1.5-1.2 2.1L8.9 16c-.6.6-1.3 1-2.1 1.2-.8.2-1.6.2-2.4 0-.8-.2-1.5-.6-2.2-1.3-.6-.6-1-1.3-1.2-2.1-.2-.8-.2-1.6 0-2.4.2-.8.6-1.5 1.2-2.1l1.2-1.2c.2-.2.3-.2.5-.1s.3.2.3.4c0 .6.1 1.1.3 1.7.1.2 0 .4-.1.5L4 11c-.4.4-.7 1-.7 1.6 0 .6.2 1.1.7 1.6.4.4 1 .7 1.6.7s1.2-.2 1.6-.7l2.1-2.1c.4-.4.7-1 .7-1.6s-.3-1.1-.7-1.6c-.1-.1-.2-.2-.4-.3s-.1-.2-.1-.3c0-.4.1-.7.3-.9l.7-.7c.1-.1.2-.1.3-.1.1 0 .2 0 .3.1.2.1.5.2.7.4zm4.4-4.4c-.6-.6-1.3-1-2.2-1.2-.8-.2-1.6-.2-2.4 0-.8.2-1.5.6-2.1 1.2L6.6 4.9c-.6.6-1 1.3-1.2 2.1s-.2 1.6 0 2.4.6 1.5 1.2 2.2c.2.2.4.4.7.5.1.1.2.1.3.1.1 0 .2-.1.3-.2l.7-.7c.2-.2.4-.6.3-.9 0-.2-.1-.3-.2-.4s-.2-.1-.3-.2c-.4-.4-.6-1-.6-1.6S8 7 8.4 6.6l2.1-2.1c.4-.4 1-.7 1.6-.7s1.2.2 1.6.7c.4.4.6 1 .6 1.6 0 .6-.2 1.1-.7 1.6l-.4.4c-.1.1-.2.3-.1.5.2.5.3 1.1.3 1.7 0 .2.1.4.3.4.2.1.4.1.5-.1l1.2-1.2c.6-.6 1-1.3 1.2-2.1.2-.8.2-1.6 0-2.4-.1-.8-.5-1.5-1.1-2.2z" class="grey"/>
<path d="M11.1 7.1c.6.6 1 1.3 1.2 2.2s.2 1.6 0 2.4-.6 1.5-1.2 2.1L8.9 16c-.6.6-1.3 1-2.1 1.2-.8.2-1.6.2-2.4 0-.8-.2-1.5-.6-2.2-1.3-.6-.6-1-1.3-1.2-2.1-.2-.8-.2-1.6 0-2.4.2-.8.6-1.5 1.2-2.1l1.2-1.2c.2-.2.3-.2.5-.1s.3.2.3.4c0 .6.1 1.1.3 1.7.1.2 0 .4-.1.5L4 11c-.4.4-.7 1-.7 1.6 0 .6.2 1.1.7 1.6.4.4 1 .7 1.6.7s1.2-.2 1.6-.7l2.1-2.1c.4-.4.7-1 .7-1.6s-.3-1.1-.7-1.6c-.1-.1-.2-.2-.4-.3s-.1-.2-.1-.3c0-.4.1-.7.3-.9l.7-.7c.1-.1.2-.1.3-.1.1 0 .2 0 .3.1.2.1.5.2.7.4zm4.4-4.4c-.6-.6-1.3-1-2.2-1.2-.8-.2-1.6-.2-2.4 0-.8.2-1.5.6-2.1 1.2L6.6 4.9c-.6.6-1 1.3-1.2 2.1s-.2 1.6 0 2.4.6 1.5 1.2 2.2c.2.2.4.4.7.5.1.1.2.1.3.1.1 0 .2-.1.3-.2l.7-.7c.2-.2.4-.6.3-.9 0-.2-.1-.3-.2-.4s-.2-.1-.3-.2c-.4-.4-.6-1-.6-1.6S8 7 8.4 6.6l2.1-2.1c.4-.4 1-.7 1.6-.7s1.2.2 1.6.7c.4.4.6 1 .6 1.6 0 .6-.2 1.1-.7 1.6l-.4.4c-.1.1-.2.3-.1.5.2.5.3 1.1.3 1.7 0 .2.1.4.3.4.2.1.4.1.5-.1l1.2-1.2c.6-.6 1-1.3 1.2-2.1.2-.8.2-1.6 0-2.4-.1-.8-.5-1.5-1.1-2.2z" class="grey"/>
</svg>
{{zoom()}}
<svg xmlns="http://www.w3.org/2000/svg" id="copy" viewBox="0 0 18 18">
<path
d="M11.1 7.1c.6.6 1 1.3 1.2 2.2s.2 1.6 0 2.4-.6 1.5-1.2 2.1L8.9 16c-.6.6-1.3 1-2.1 1.2-.8.2-1.6.2-2.4 0-.8-.2-1.5-.6-2.2-1.3-.6-.6-1-1.3-1.2-2.1-.2-.8-.2-1.6 0-2.4.2-.8.6-1.5 1.2-2.1l1.2-1.2c.2-.2.3-.2.5-.1s.3.2.3.4c0 .6.1 1.1.3 1.7.1.2 0 .4-.1.5L4 11c-.4.4-.7 1-.7 1.6 0 .6.2 1.1.7 1.6.4.4 1 .7 1.6.7s1.2-.2 1.6-.7l2.1-2.1c.4-.4.7-1 .7-1.6s-.3-1.1-.7-1.6c-.1-.1-.2-.2-.4-.3s-.1-.2-.1-.3c0-.4.1-.7.3-.9l.7-.7c.1-.1.2-.1.3-.1.1 0 .2 0 .3.1.2.1.5.2.7.4zm4.4-4.4c-.6-.6-1.3-1-2.2-1.2-.8-.2-1.6-.2-2.4 0-.8.2-1.5.6-2.1 1.2L6.6 4.9c-.6.6-1 1.3-1.2 2.1s-.2 1.6 0 2.4.6 1.5 1.2 2.2c.2.2.4.4.7.5.1.1.2.1.3.1.1 0 .2-.1.3-.2l.7-.7c.2-.2.4-.6.3-.9 0-.2-.1-.3-.2-.4s-.2-.1-.3-.2c-.4-.4-.6-1-.6-1.6S8 7 8.4 6.6l2.1-2.1c.4-.4 1-.7 1.6-.7s1.2.2 1.6.7c.4.4.6 1 .6 1.6 0 .6-.2 1.1-.7 1.6l-.4.4c-.1.1-.2.3-.1.5.2.5.3 1.1.3 1.7 0 .2.1.4.3.4.2.1.4.1.5-.1l1.2-1.2c.6-.6 1-1.3 1.2-2.1.2-.8.2-1.6 0-2.4-.1-.8-.5-1.5-1.1-2.2z"
class="grey" />
<path
d="M11.1 7.1c.6.6 1 1.3 1.2 2.2s.2 1.6 0 2.4-.6 1.5-1.2 2.1L8.9 16c-.6.6-1.3 1-2.1 1.2-.8.2-1.6.2-2.4 0-.8-.2-1.5-.6-2.2-1.3-.6-.6-1-1.3-1.2-2.1-.2-.8-.2-1.6 0-2.4.2-.8.6-1.5 1.2-2.1l1.2-1.2c.2-.2.3-.2.5-.1s.3.2.3.4c0 .6.1 1.1.3 1.7.1.2 0 .4-.1.5L4 11c-.4.4-.7 1-.7 1.6 0 .6.2 1.1.7 1.6.4.4 1 .7 1.6.7s1.2-.2 1.6-.7l2.1-2.1c.4-.4.7-1 .7-1.6s-.3-1.1-.7-1.6c-.1-.1-.2-.2-.4-.3s-.1-.2-.1-.3c0-.4.1-.7.3-.9l.7-.7c.1-.1.2-.1.3-.1.1 0 .2 0 .3.1.2.1.5.2.7.4zm4.4-4.4c-.6-.6-1.3-1-2.2-1.2-.8-.2-1.6-.2-2.4 0-.8.2-1.5.6-2.1 1.2L6.6 4.9c-.6.6-1 1.3-1.2 2.1s-.2 1.6 0 2.4.6 1.5 1.2 2.2c.2.2.4.4.7.5.1.1.2.1.3.1.1 0 .2-.1.3-.2l.7-.7c.2-.2.4-.6.3-.9 0-.2-.1-.3-.2-.4s-.2-.1-.3-.2c-.4-.4-.6-1-.6-1.6S8 7 8.4 6.6l2.1-2.1c.4-.4 1-.7 1.6-.7s1.2.2 1.6.7c.4.4.6 1 .6 1.6 0 .6-.2 1.1-.7 1.6l-.4.4c-.1.1-.2.3-.1.5.2.5.3 1.1.3 1.7 0 .2.1.4.3.4.2.1.4.1.5-.1l1.2-1.2c.6-.6 1-1.3 1.2-2.1.2-.8.2-1.6 0-2.4-.1-.8-.5-1.5-1.1-2.2z"
class="grey" />
</svg>
<span class="is-hidden-touch">{{ shareMessage }}</span>
</button>
</div>
<div class="data-details-wrapper" *ngIf="selectedData !== null" [ngClass]="{'data-details-opened': selectedData !== null && displayDataDetails === true, 'data-details-closed': displayDataDetails === false}">
<app-data-details (close)="closeDataDetails()" [properties]="selectedData" class="app-data-details"></app-data-details>
<div class="data-details-wrapper" *ngIf="selectedData !== null"
[ngClass]="{'data-details-opened': selectedData !== null && displayDataDetails === true, 'data-details-closed': displayDataDetails === false}">
<app-data-details (close)="closeDataDetails()" [properties]="selectedData" class="app-data-details">
</app-data-details>
</div>
</div>
</div>
</div>
\ No newline at end of file
src/app/map/components/map.component.ts
View file @ ac05a1a2
import { Component, OnInit, OnDestroy, EventEmitter, Output } from '@angular/core';
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import { Subscription } from 'rxjs';
import { Metadata } from '../../geosource/models';
import { DatasetDetailService } from '../../geosource/services';
import { MapService } from '../services/map.service';
import { settings } from '../settings';
import { geosource } from '../../../i18n/traductions';
......@@ -16,13 +14,14 @@ import { linkFormats } from '../../geosource/models/metadata.model';
export class MapComponent implements OnInit, OnDestroy {
@Input() metadata: Metadata;
@Input() aggregationsFilter: string[];
@Input() filterSearch: string;
settings = settings;
linkFormats = linkFormats;
lang: string; // (fr or en)
metadata: Metadata;
sub: Subscription; // Subscription to dataset change
map: mapboxgl.Map;
shareMessage: string = geosource.mapMessages.share;
......@@ -35,6 +34,7 @@ export class MapComponent implements OnInit, OnDestroy {
previousDatasetId: string;
currentLayerType: string;
availableLayers: string[];
baseLayer3d = 1;
displayControls = false;
......@@ -43,13 +43,12 @@ export class MapComponent implements OnInit, OnDestroy {
fullscreen = false;
constructor(
private _datasetDetailService: DatasetDetailService,
private _mapService: MapService,
) { }
ngOnInit() {
this.initilizeLanguage();
this.initAvailableLayers();
this.constructMap();
// Events received here contain a state (if the data-detail panel has to be displayed or not)
......@@ -60,33 +59,48 @@ export class MapComponent implements OnInit, OnDestroy {
this.selectedData = dataDetails.properties;
}
});
}
// Subcribe to the dataset changes in the service. When the dataset is loaded
// (with the metadata), we construct the map and display the features
this.sub = this._datasetDetailService.dataset$.subscribe(() => {
this.constructMap();
});
ngOnChanges() {
if (this.filterSearch) {
// this._mapService.updateFilter(this.filterSearch);
}
if (this.aggregationsFilter) {
this._mapService.updateAggregationFilter(this.aggregationsFilter);
}
}
// To avoid call the constructMap when we left the component
// (because this is a custom observable, this is not automatically unsubscribed
// when the component is destroyed)
ngOnDestroy() {
this.sub.unsubscribe();
this._mapService.destroyMap();
}
initAvailableLayers() {
this.availableLayers = [];
this.metadata.link.forEach((link) => {
this.availableLayers.push(link.service);
});
if (this.availableLayers.includes(linkFormats.wfs)) {
this.currentLayerType = linkFormats.wfs;
} else {
this.currentLayerType = linkFormats.wms;
}
}
// When we get a metadata, we display the following:
// - load Mapbox style file to get the styles and the base layers (vector, plan, satellite)
constructMap() {
this.metadata = this._datasetDetailService.datasetMetadata;
if (this.metadata) {
// Set the basic and default options
const options = {
container: 'map',
center: [4.85, 45.75],
center: [4.85, 45.75] as mapboxgl.LngLatLike,
zoom: 12,
maxZoom: 21,
};
......@@ -130,7 +144,7 @@ export class MapComponent implements OnInit, OnDestroy {
// Create the map with the associated style Mapbox file
this.displayControls = true;
this.map = this._mapService.createMap(url, this.selectedBaseLayer, this.displayControls, options);
this.map = this._mapService.createMap(this.metadata, url, this.selectedBaseLayer, this.displayControls, options);
// We create and add the layers (WMS/WFS) when the base layer is loaded
// (and not on map loaded, because when the style is refreshed, it removes all the sources associated)
......@@ -148,6 +162,11 @@ export class MapComponent implements OnInit, OnDestroy {
this._mapService.switchLayer(baseLayer);
}
switchSourceLayer(newLayerSource) {
this.currentLayerType = newLayerSource;
this._mapService.switchSourceLayer(newLayerSource);
}
zoom() {
return this.map.getZoom();
}
......@@ -190,7 +209,9 @@ export class MapComponent implements OnInit, OnDestroy {
this.shareMessage = geosource.mapMessages.copied;
setTimeout(() => {
this.shareMessage = geosource.mapMessages.share;
}, 2000);
},
// tslint:disable-next-line:align
2000);
}
mapUrl() {
......
src/app/map/components/minimap-control.ts
View file @ ac05a1a2
......@@ -26,7 +26,7 @@ export class Minimap {
width: '300px',
height: '170px',
style: '',
center: [0, 0],
center: [0, 0] as mapboxgl.LngLatLike,
zoom: 6,
bounds: 'parent',
classes: '',
......
src/app/map/services/map.service.ts
View file @ ac05a1a2
......@@ -3,6 +3,7 @@ import { Observable, Subject, BehaviorSubject, of, fromEvent, Subscription } fro
import { Metadata, IMetadataLink } from '../../geosource/models';
import { Notification } from '../../core/models';
import * as mapboxgl from 'mapbox-gl';
import * as palette from 'google-palette';
import { map, catchError, debounceTime } from 'rxjs/operators';
import { ElasticsearchService } from '../../geosource/services/elasticsearch.service';
import { NotificationService } from '../../core/services';
......@@ -24,6 +25,8 @@ export class MapService {
metadata: Metadata;
uriWFS: IMetadataLink;
uriWMS: IMetadataLink;
filterSearch: string;
eventPopupAdded = false;
minimap: Minimap;
......@@ -66,10 +69,13 @@ export class MapService {
private _datasetDetailService: DatasetDetailService,
) { }
createMap(url: string, baseLayer: any, addControls: boolean, options?: mapboxgl.MapboxOptions): mapboxgl.Map {
this.metadata = this._datasetDetailService.datasetMetadata;
console.log(this.metadata.total_documents);
createMap(metadata: Metadata, url: string, baseLayer: any, addControls: boolean,
// tslint:disable-next-line:align
options?: mapboxgl.MapboxOptions): mapboxgl.Map {
this.filterSearch = '';
this.metadata = metadata;
this.uriWFS = this.metadata.link.find((e) => { return e.service === linkFormats.wfs; });
this.uriWMS = this.metadata.link.find((e) => { return e.service === linkFormats.wms; });
// Reset to false in ordre to set event listener
this.eventPopupAdded = false;
......@@ -135,56 +141,43 @@ export class MapService {
addLayers() {
// Check if the metadata has WFS data format.
this._currentLayerType = linkFormats.wfs;
this.addMVTLayers();
// this.getMVTFeatures(
// this.metadata,
// settings.maxDisplayFeatures).subscribe((geojson) => {
// this.geojson = geojson;
// this.addMVTLayers();
// });
// this._map
// .on('zoomend', () => {
// this._mapToUpdate.next();
// })
// .on('moveend', () => {
// this._mapToUpdate.next();
// });
// if (this.uriWFS && this._datasetDetailService.datasetDataNumber < 100000) {
// this._currentLayerType = linkFormats.wfs;
// this.getMVTFeatures(
// this.metadata,
// settings.maxDisplayFeatures).subscribe((geojson) => {
// this.geojson = geojson;
// this.addMVTLayers();
// });
// this._map
// .on('zoomend', () => {
// this._mapToUpdate.next();
// })
// .on('moveend', () => {
// this._mapToUpdate.next();
// });
// } else {
// this._currentLayerType = linkFormats.wms;
// const uriWMS = this.metadata.link.find((e) => { return e.service === linkFormats.wms; });
// this.addWMSLayer(uriWMS);
// }
const url = 'https://download.recette.data.grandlyon.com/mvt/grandlyon?LAYERS' +
`=${this.uriWFS.name}&map.imagetype=mvt&tilemode=gmap&tile={x}+{y}+{z}&mode=tile`;
if (this.uriWFS) {
this._map.addSource('vector-source', {
type: 'vector',
tiles: [url],
});
this.addMVTLayers();
// this._currentLayerType = linkFormats.wfs;
// this.getMVTFeatures(
// this.metadata,
// settings.maxDisplayFeatures).subscribe((geojson) => {
// this.geojson = geojson;
// this.addMVTLayers();
// });
// this._map
// .on('zoomend', () => {
// this._mapToUpdate.next();
// })
// .on('moveend', () => {