Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
@nobohan
nobohan committed Oct 18, 2021
1 parent 6086085 commit d73eb1d
Show file tree
Hide file tree
Showing 3 changed files with 128 additions and 6 deletions.
124 changes: 120 additions & 4 deletions frontend/src/app/programs/base/map/map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Output,
SimpleChanges,
ViewChild,
HostListener,
} from '@angular/core';
import { Feature, FeatureCollection, Point, Position } from 'geojson';
import { MAP_CONFIG } from '../../../../conf/map.config';
Expand All @@ -20,6 +21,13 @@ import 'leaflet.locatecontrol';
import 'leaflet-gesture-handling';
import { MapService } from './map.service';

// const slider =
// `<input id="slide" type="range" min="0" max="1" step="0.1" value="0" onchange="this.updateOpacity('foo', this.value)">`;

const makeSlider = (layerName: string): string =>
`<input id="slide" type="range" min="0" max="1" step="0.1" value="0" onchange="this.updateOpacity(${layerName}, this.value)">`;


export const conf = {
MAP_ID: 'obsMap',
GEOLOCATION_HIGH_ACCURACY: false,
Expand All @@ -38,7 +46,10 @@ export const conf = {
layerConf.subdomains = baseLayer['subdomains'];
}
if (baseLayer['wms']) {
acc[baseLayer['name']] = L.tileLayer.wms(baseLayer['layer'], layerConf);
// const legendName = `${baseLayer['name']} - ${slider}`;
// const legendName = `${baseLayer['name']} - ${makeSlider(baseLayer['name'])}`;
const legendName = baseLayer['name'];
acc[legendName] = L.tileLayer.wms(baseLayer['layer'], layerConf);
} else {
acc[baseLayer['name']] = L.tileLayer(baseLayer['layer'], layerConf);
}
Expand Down Expand Up @@ -104,6 +115,18 @@ export const conf = {
},
};

export const updateOpacity = (e): void => {
console.log(e);
//console.log(opacity);
//TODO find the layer and setOpacity
// this.observationMap.eachLayer((l) => {
// console.log(l);
// // if (l.name === layerName) {
// // l.setOpacity(opacity);
// // }
// });
}

export abstract class BaseMapComponent implements OnChanges {
@ViewChild('map', { static: true }) map: ElementRef;
@Input('features') features: FeatureCollection;
Expand All @@ -127,18 +150,21 @@ export abstract class BaseMapComponent implements OnChanges {
resolver: ComponentFactoryResolver;
injector: Injector;
mapService: MapService;
elementRef: ElementRef;
abstract localeId: string;
abstract feature_id_key: string;
abstract getPopupComponentFactory(): any;

constructor(
resolver: ComponentFactoryResolver,
injector: Injector,
mapService: MapService
mapService: MapService,
elementRef: ElementRef,
) {
this.resolver = resolver;
this.injector = injector;
this.mapService = mapService;
this.elementRef = elementRef;
}

ngOnChanges(changes: SimpleChanges) {
Expand All @@ -165,6 +191,35 @@ export abstract class BaseMapComponent implements OnChanges {
}
}

makeSlider(layerName: string): string {
const updateOpacity = (layerName: string, opacity: number): void => {
console.log(layerName);
console.log(opacity);
//TODO find the layer and setOpacity
this.observationMap.eachLayer((l) => {
console.log(l);
// if (l.name === layerName) {
// l.setOpacity(opacity);
// }
});
}
//return `<input id="slide" type="range" min="0" max="1" step="0.1" value="0" onchange="updateOpacity('${layerName}', this.value)">`;
//return `<input id="${layerName}" type="range" min="0" max="1" step="0.1" value="0">`;
//return `<input id="9999" type="range" min="0" max="1" step="0.1" value="0">`;
return `<input id="slide" type="range" min="0" max="1" step="0.1" value="0" onchange="updateOpacity">`;
}

prepareOverlays(options: any): L.LayerGroup {
const overlays = {};
for (let l in options.BASE_LAYERS) {
const overlayName = `${l} --- ${this.makeSlider(l)}`;
overlays[overlayName] = options.BASE_LAYERS[l];
}
console.log(overlays);

return overlays;
}

initMap(options: any, LeafletOptions: any = {}): void {
this.options = options;

Expand All @@ -182,13 +237,44 @@ export abstract class BaseMapComponent implements OnChanges {
.scale({ position: this.options.SCALE_CONTROL_POSITION })
.addTo(this.observationMap);

console.log(this.options.DEFAULT_BASE_MAP());
console.log(this.options.BASE_LAYERS);

//const overlays = this.options.BASE_LAYERS;
const overlays = this.prepareOverlays(this.options);

L.control
.layers(this.options.BASE_LAYERS, null, {
.layers( { "OpenStreetMap": this.options.DEFAULT_BASE_MAP() }, overlays, {
collapsed: this.options.BASE_LAYER_CONTROL_INIT_COLLAPSED,
position: this.options.BASE_LAYER_CONTROL_POSITION,
})
.addTo(this.observationMap);

const truc = this.elementRef.nativeElement.querySelector('input [type="range"]');
console.log('truc', truc)
if (truc) {
truc.addEventListener('click', console.log('change!'));
}

const truc2 = document.querySelector('input [type="range"]');
console.log('truc2', truc2)

// const slider = document.getElementById('Hydrographie').addEventListener('click', (e) => {
// console.log(e);
// this.updateOpacity(e);
// });
// console.log(slider);
// if (slider) {
// slider.addEventListener('click', (e) => {
// console.log(e);
// this.updateOpacity(e);
// });
// }

document.addEventListener('keyup', function() {
console.log('keys pressed');
});

L.control
.locate({
icon: 'fa fa-compass',
Expand Down Expand Up @@ -409,6 +495,7 @@ export abstract class BaseMapComponent implements OnChanges {
this.observationMap.setZoom(Math.min(this.observationMap.getZoom(), 17)); // limit zoom (eg single feature)
}
}
this.initSliders();
}

loadFeatures(): void {
Expand Down Expand Up @@ -541,4 +628,33 @@ export abstract class BaseMapComponent implements OnChanges {
);
return distancePixel < SNAP_DISTANCE;
}
}

updateOpacity(e): void {
console.log(e);
//console.log(opacity);
//TODO find the layer and setOpacity
// this.observationMap.eachLayer((l) => {
// console.log(l);
// // if (l.name === layerName) {
// // l.setOpacity(opacity);
// // }
// });
}

initSliders(): void {
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
const updateOpacity = (layerName: string, opacity: number): void => {
console.log(layerName);
console.log(opacity);
//TODO find the layer and setOpacity
this.observationMap.eachLayer((l) => {
console.log(l);
// if (l.name === layerName) {
// l.setOpacity(opacity);
// }
});
}
});
}
}
4 changes: 4 additions & 0 deletions frontend/src/app/programs/base/map/map.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,8 @@ export class MapService {
changePolygon(polygon: L.Polygon): void {
this.polygonChange.next(polygon);
}

// updOpacity(name:string, opacity: number): void{
// console.log(name)
// }
}
6 changes: 4 additions & 2 deletions frontend/src/app/programs/sites/map/map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ViewEncapsulation,
Inject,
LOCALE_ID,
ElementRef,
} from '@angular/core';
import { BaseMapComponent } from '../../base/map/map.component';
import { MapService } from '../../base/map/map.service';
Expand All @@ -33,9 +34,10 @@ export class SitesMapComponent extends BaseMapComponent {
@Inject(LOCALE_ID) readonly localeId: string,
resolver: ComponentFactoryResolver,
injector: Injector,
mapService: MapService
mapService: MapService,
elementRef: ElementRef,
) {
super(resolver, injector, mapService);
super(resolver, injector, mapService, elementRef);
}

getPopupComponentFactory(): any {
Expand Down

0 comments on commit d73eb1d

Please sign in to comment.