Commit 91ef6365 authored by Alexander's avatar Alexander

the radius of the umkreisfilter can now be controlled by a range input

parent 4a76a7bf
......@@ -2,17 +2,20 @@ import {defaults as defaultControls, Control} from 'ol/control.js'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import { isContentQueryHost } from '@angular/core/src/render3/util';
import { MapService } from 'src/app/services/map.service';
export class RadiusFilterControl extends Control{
isCollapsed:boolean;
basicStyle :string = ' width: 3em; height:3em; background-color:white; border-radius:20px; ';
collapsedStyle : string = ' margin-right:-1em; margin-left:-1em; ';
filterButtons : HTMLElement[]=[];
constructor(opt_options){
constructor(opt_options, private mapService:MapService){
super({});
let rowContainer = document.createElement('div');
......@@ -30,12 +33,30 @@ export class RadiusFilterControl extends Control{
//element.setAttribute("style","position: absolute; bottom:80px; left:20px;");
let expandToggle = document.createElement('div');
expandToggle.setAttribute('style','border-radius:20px;');
expandToggle.className='btn btn-primary m-3';
const expandToggle = document.createElement('form');
//concerning radius range input
//expandToggle.setAttribute('style','border-radius:20px;');
//expandToggle.className='btn btn-primary m-3';
let div1 = document.createElement('div');
div1.className=('form-group p-2 btn');
div1.setAttribute('style','background-color: white');
const input1 = document.createElement('input');
input1.type='range';
input1.id='radius-control-input';
input1.className='form-control-range'
input1.min='50'; //50 m
input1.max='50000';//50 km
div1.appendChild(input1);
expandToggle.innerText='(TODO) something something radius filter';
expandToggle.appendChild(div1);
//expandToggle.innerText='(TODO) something something radius filter';
expandToggle.addEventListener('click',()=>this.clickToggleRadiusFilter(this));
expandToggle.addEventListener('change',()=>this.clickToggleRadiusFilter(this));
element.appendChild(expandToggle);
rowContainer.appendChild(element);
......@@ -51,5 +72,17 @@ export class RadiusFilterControl extends Control{
clickToggleRadiusFilter = (instance : RadiusFilterControl) => {
console.log('click toggle radius filter');
let myrangeinput:HTMLElement = document.getElementById('radius-control-input');
let myrangeinput1:HTMLInputElement = <HTMLInputElement>myrangeinput;
//propagate this value to set the radius
//myrangeinput1.value;
this.mapService.radius_meters=parseInt(myrangeinput1.value);
this.mapService.updateUmkreisRadiusFeature();
//rerender() with the changed radius
this.mapService.rerender();
}
}
......@@ -64,9 +64,12 @@ export class MapService {
//@Alexander
//regarding the radius filter feature for the BLI nodes
umkreisFeature: OlFeature = new OlFeature(); //may be null
umkreisRadiusFeature: OlFeature = new OlFeature(); //may be null
umkreisLayer: OlTileLayer;
lastClickNotOnFeature:number[]; //may be null
radius_meters:number=50; //may be null
//@@Alexander
......@@ -550,7 +553,8 @@ export class MapService {
{
source:this.source,
target:'map'
}
},
this
)
]
)
......@@ -616,49 +620,62 @@ export class MapService {
//transform coordinates from weird format to [lat,lon]
const latlon = transform(ev.coordinate,'EPSG:3857','EPSG:4326');
console.log(latlon);
this.lastClickNotOnFeature=latlon;
// @Alexander
console.log("try to place the umkreissuche marker");
// TODO
// maybe place a marker here for the radius search
console.log("clicked at coordinates: "+latlon);
console.log("clicked at coordinates: "+this.lastClickNotOnFeature);
this.umkreisFeature = new OlFeature(new OlPoint(fromLonLat(latlon)));
this.umkreisFeature = new OlFeature(new OlPoint(fromLonLat(this.lastClickNotOnFeature)));
this.umkreisFeature.setStyle(this.createStyle('assets/img/map-marker.png', undefined));
console.log(this.umkreisFeature);
this.umkreisRadiusFeature= new OlFeature(new OlCircle(fromLonLat(latlon),50));
this.umkreisRadiusFeature.setStyle(
new OlStyle(
{
fill: new OlFill({color: 'rgba(148, 193, 31,0.3)'}),
stroke: new OlStroke({
width: 3,
color: 'rgba(148, 193, 31,0.8)'
}),
image: new CircleStyle({
fill: new Fill({
color: 'rgba(148, 193, 31,0.4)'
}),
stroke: new Stroke({
width: 1,
color: 'rgba(148, 193, 31,0.8)'
}),
radius: 7
}),
}
)
);
const radius_meters = 50;
this.updateUmkreisRadiusFeature();
console.log(this.umkreisRadiusFeature);
this.rerender();
//@@Alexander
}
}
updateUmkreisRadiusFeature():void{
this.umkreisRadiusFeature=this.makeUmkreisRadiusFeature();
}
makeUmkreisRadiusFeature():OlFeature{
const x:OlFeature = new OlFeature(new OlCircle(fromLonLat(this.lastClickNotOnFeature),this.radius_meters));
x.setStyle(
new OlStyle(
{
fill: new OlFill({color: 'rgba(148, 193, 31,0.3)'}),
stroke: new OlStroke({
width: 3,
color: 'rgba(148, 193, 31,0.8)'
}),
image: new CircleStyle({
fill: new Fill({
color: 'rgba(148, 193, 31,0.4)'
}),
stroke: new Stroke({
width: 1,
color: 'rgba(148, 193, 31,0.8)'
}),
radius: 7
}),
}
)
);
return x;
}
getCenter(){
let bbox=new Rectangle(this.getBoundingBox(null));
......
Markdown is supported
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