Commit 4a76a7bf authored by Alexander's avatar Alexander

position the general location of the radius filter radius control

parent eb054171
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';
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){
super({});
let rowContainer = document.createElement('div');
rowContainer.className='row justify-content-center';
rowContainer.setAttribute('style','position:absolute; top:80px; width:100%;');
let element = document.createElement('div');
element.classList.add('col-md-10');
element.classList.add('row');
element.classList.add('justify-content-center');
//we do not set the control class because it gives a background color
//which is unwanted
//element.className='ol-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';
expandToggle.innerText='(TODO) something something radius filter';
expandToggle.addEventListener('click',()=>this.clickToggleRadiusFilter(this));
element.appendChild(expandToggle);
rowContainer.appendChild(element);
Control.call(this,{
element:rowContainer,
target: opt_options.target
});
this.isCollapsed=false;
}
clickToggleRadiusFilter = (instance : RadiusFilterControl) => {
console.log('click toggle radius filter');
}
}
......@@ -33,6 +33,7 @@ import OlCircle from 'ol/geom/Circle';
import { featureloader } from 'openlayers';
import CircleStyle from 'ol/style/Circle';
import {Fill,Stroke} from 'ol/style';
import { RadiusFilterControl } from 'src/alexander/RadiusFilterControl';
//OlTransforms.transformExtent(extent,'EPSG:3857','EPSG:4326');
......@@ -541,7 +542,18 @@ export class MapService {
target: 'map',
layers: this.layers,
view: this.view,
controls: new defaultControls({attribution: false}).extend([this.attribution])
controls: new defaultControls({attribution: false})
.extend(
[
this.attribution,
new RadiusFilterControl(
{
source:this.source,
target:'map'
}
)
]
)
});
let handler = this.clickHandler;
......
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