Commit 52efa409 authored by ncastejon's avatar ncastejon
Browse files

Add the WMS layer for the style + the MVT layer for the interaction. Resize...

Add the WMS layer for the style + the MVT layer for the interaction. Resize the map on container size change
parent 26455174
......@@ -53,7 +53,6 @@ export class ReuseDetailComponent implements OnInit {
if (!(metadata.image && metadata.image.url)) {
this.setBackupImage(metadata);
}
console.log(metadata)
return metadata;
}
});
......
<app-map></app-map>
\ No newline at end of file
<div>
<ng-container *ngIf="metadata">
<app-map [metadata]="metadata"></app-map>
</ng-container>
</div>
\ No newline at end of file
@import "../../../../../scss/variables";
div {
height: 100%;
}
.mapboxgl-canvas {
height: 100%;
width: 100%;
}
// .restricted-access-container {
// margin-top: -2rem;
// margin-left: -1.25rem;
......
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { MapService } from '../../../../map/services/map.service';
import { DatasetDetailService } from '../../../services';
import { Subscription } from 'rxjs';
import { Metadata } from '../../../models';
import { MapComponent } from '../../../../map/components';
@Component({
selector: 'app-dataset-map',
......@@ -10,8 +13,12 @@ import { DatasetDetailService } from '../../../services';
export class DatasetMapComponent implements OnInit {
@ViewChild(MapComponent) mapComponent: MapComponent;
mapLoaded: boolean;
isSample = false;
datasetSub: Subscription; // Subscription to dataset change
metadata: Metadata;
constructor(
private _mapService: MapService,
......@@ -19,12 +26,24 @@ export class DatasetMapComponent implements OnInit {
) { }
ngOnInit() {
this.metadata = this._datasetDetailService.datasetMetadata;
// 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.isSample = this._datasetDetailService.dataset.editorialMetadata.isSample;
this._mapService.map$.subscribe(() => {
this.mapLoaded = true;
});
}
reDraw() {
this.mapComponent.reDraw();
}
// Generate the url with map options
// http://hostName#zoom/latitude/longitude/bearing/pitch
// getPermalinkUrl() {
......
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DatasetDetailService } from '../../../services';
import { linkFormats } from '../../../models/metadata.model';
import { DatasetMapComponent } from '../dataset-map/dataset-map.component';
@Component({
selector: 'app-dataset-table-map',
templateUrl: './dataset-table-map.component.html',
styleUrls: ['./dataset-table-map.component.scss']
styleUrls: ['./dataset-table-map.component.scss'],
})
export class DatasetTableMapComponent implements OnInit {
@ViewChild(DatasetMapComponent) datasetMapComponent: DatasetMapComponent;
// Component state
fullscreen = false;
displayColumnsMenu = false;
......@@ -29,18 +32,30 @@ export class DatasetTableMapComponent implements OnInit {
toogleFullscreen() {
this.fullscreen = !this.fullscreen;
// setTimeout(() => { this.map.resize(); }, 1);
// Redraw the map
setTimeout(() => {
this.datasetMapComponent.reDraw();
// tslint:disable-next-line: align
}, 1);
}
toogleMap() {
if (this.hasTable && this.tableIsEnabled) {
this.mapIsEnabled = !this.mapIsEnabled;
setTimeout(() => {
this.datasetMapComponent.reDraw();
// tslint:disable-next-line: align
}, 1);
}
}
toogleTable() {
if (this.hasMap && this.mapIsEnabled) {
this.tableIsEnabled = !this.tableIsEnabled;
setTimeout(() => {
this.datasetMapComponent.reDraw();
// tslint:disable-next-line: align
}, 1);
}
}
......
import { Component, OnInit, OnDestroy, Input, ViewEncapsulation } 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';
import { linkFormats } from '../../geosource/models/metadata.model';
import { FormControl } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { GeocoderService } from '../services/geocoder.service';
@Component({
......@@ -19,12 +16,12 @@ import { GeocoderService } from '../services/geocoder.service';
export class MapComponent implements OnInit, OnDestroy {
@Input() metadata: Metadata;
settings = settings;
linkFormats = linkFormats;
lang: string; // (fr or en)
metadata: Metadata;
sub: Subscription; // Subscription to dataset change
featuresToChange: Subscription;
map: mapboxgl.Map;
......@@ -45,6 +42,7 @@ export class MapComponent implements OnInit, OnDestroy {
previousDatasetId: string;
currentLayerType: string;
availableLayers: string[];
baseLayer3d = 1;
displayControls = false;
......@@ -54,22 +52,21 @@ export class MapComponent implements OnInit, OnDestroy {
searchLocationResult = [];
markerLocation: mapboxgl.Marker;
// markerLocation: HTMLDivElement;
constructor(
private _datasetDetailService: DatasetDetailService,
private _mapService: MapService,
private _geocoderService: GeocoderService,
) { }
ngOnInit() {
this.initilizeLanguage();
// Geolocation availability in the browser
if ('geolocation' in navigator) {
this.geolocation = true;
}
this.initilizeLanguage();
this.initAvailableLayers();
this.constructMap();
// Events received here contain a state (if the data-detail panel has to be displayed or not)
......@@ -81,41 +78,33 @@ export class MapComponent implements OnInit, OnDestroy {
}
});
// 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();
});
// Display the update button when the service tell us the need
// to update the features (after and zoom interaction)
this._mapService.featuresToUpdate$.subscribe(() => {
if (this._datasetDetailService.datasetDataNumber > this.settings.maxDisplayFeatures) {
this.displayUpdateFeatures = true;
}
this.displayMessageLimitedFeatures = false;
});
// When features have been loaded, we hide the update button
this._mapService.mapUpdated$.subscribe((totalData) => {
this.displayUpdateFeatures = false;
this.displaySpinner = false;
if (totalData > this.settings.maxDisplayFeatures && this._datasetDetailService.datasetDataNumber < 100000) {
this.displayMessageLimitedFeatures = true;
this.totalData = totalData;
}
});
}
reDraw() {
console.log('resize');
this.map.resize();
}
// 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;
}
}
searchAdress(value: string) {
// Subscribe to search location input
const item = this.searchLocationResult.find(e => e.caption === value);
......@@ -176,7 +165,6 @@ export class MapComponent implements OnInit, OnDestroy {
// 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) {
......@@ -233,20 +221,13 @@ 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);
// 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)
this.map = this._mapService.createMap(this.metadata, url, this.selectedBaseLayer, this.displayControls, options);
this.map.on('style.load', () => {
this._mapService.addLayers();
this.currentLayerType = this._mapService.currentLayerType;
// When we come from a copy link, we need to update the features with the new bounding box
if (parameters.length === 6) {
this.updateFeatures();
}
});
this._mapService.previousDatasetId = this.metadata.dataset_id;
this._mapService.previousDatasetId = this.metadata.dataset_id;
});
}
}
......@@ -255,11 +236,6 @@ export class MapComponent implements OnInit, OnDestroy {
this._mapService.switchLayer(baseLayer);
}
updateFeatures() {
this.displaySpinner = true;
this._mapService.updateFeatures();
}
// Looks for the language to be used, if not indicated in the url takes the navigator default language
initilizeLanguage() {
let language = window.location.pathname.split('/')[1];
......
......@@ -33,7 +33,7 @@ export class GeocoderService {
caption = `${name}, ${city} ${postalCode}`;
} else if (street) {
caption = `${street}, ${city} ${postalCode}`;
}
}
if (!caption) {
console.log("couldn't format caption");
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment