Skip to content

Commit

Permalink
feat(geolocation): possibility to add a buffer to the geolocation (#394)
Browse files Browse the repository at this point in the history
  • Loading branch information
drekss authored and mbarbeau committed Sep 23, 2019
1 parent a83d091 commit 658f3d6
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 5 deletions.
8 changes: 8 additions & 0 deletions packages/geo/src/lib/map/shared/map.interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export interface MapViewOptions {
projection?: string;
center?: [number, number];
geolocate?: boolean;
buffer?: Buffer;

constrainRotation?: boolean | number;
enableRotation?: boolean;
Expand Down Expand Up @@ -46,3 +47,10 @@ export interface MapAttributionOptions {
html?: string;
collapsed: boolean;
}

export interface Buffer {
bufferRadius?: number;
bufferStroke?: [number, number, number, number];
bufferFill?: [number, number, number, number];
showBufferRadius?: boolean;
}
35 changes: 34 additions & 1 deletion packages/geo/src/lib/map/shared/map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import * as olproj from 'ol/proj';
import * as olproj4 from 'ol/proj/proj4';
import OlProjection from 'ol/proj/Projection';
import * as olinteraction from 'ol/interaction';
import olCircle from 'ol/geom/Circle';

import proj4 from 'proj4';
import { BehaviorSubject, Subject, Subscription } from 'rxjs';
Expand All @@ -26,6 +27,7 @@ import {
MapExtent
} from './map.interface';
import { MapViewController } from './controllers/view';
import { FeatureDataSource } from '../../datasource/shared/datasources/feature-datasource';

// TODO: This class is messy. Clearly define it's scope and the map browser's.
// Move some stuff into controllers.
Expand All @@ -35,9 +37,14 @@ export class IgoMap {
public status$: Subject<SubjectStatus>;
public geolocation$ = new BehaviorSubject<olGeolocation>(undefined);
public geolocationFeature: olFeature;
public bufferGeom: olCircle;
public bufferFeature: olFeature;
public buffer: Overlay;
public overlay: Overlay;
public viewController: MapViewController;

public bufferDataSource: FeatureDataSource;

private layerWatcher: LayerWatcher;
private geolocation: olGeolocation;
private geolocation$$: Subscription;
Expand Down Expand Up @@ -104,6 +111,7 @@ export class IgoMap {
});
this.viewController.setOlMap(this.ol);
this.overlay = new Overlay(this);
this.buffer = new Overlay(this);
}

setTarget(id: string) {
Expand Down Expand Up @@ -377,7 +385,29 @@ export class IgoMap {
}
this.geolocationFeature = new olFeature({ geometry });
this.geolocationFeature.setId('geolocationFeature');
this.overlay.addFeature(this.geolocationFeature);
this.overlay.addOlFeature(this.geolocationFeature);

if (this.ol.getView().options_.buffer) {
const bufferRadius = this.ol.getView().options_.buffer.bufferRadius;
const coordinates = geolocation.getPosition();
this.bufferGeom = new olCircle(coordinates, bufferRadius);
const bufferStroke = this.ol.getView().options_.buffer.bufferStroke;
const bufferFill = this.ol.getView().options_.buffer.bufferFill;

let bufferText;
if (this.ol.getView().options_.buffer.showBufferRadius) {
bufferText = bufferRadius.toString() + 'm';
} else {
bufferText = '';
}

this.bufferFeature = new olFeature(this.bufferGeom);
this.bufferFeature.setId('bufferFeature');
this.bufferFeature.set('bufferStroke', bufferStroke);
this.bufferFeature.set('bufferFill', bufferFill);
this.bufferFeature.set('bufferText', bufferText);
this.buffer.addOlFeature(this.bufferFeature);
}
if (first) {
this.viewController.zoomToExtent(extent);
}
Expand Down Expand Up @@ -405,6 +435,9 @@ export class IgoMap {
private startGeolocation() {
if (!this.geolocation) {
this.geolocation = new olGeolocation({
trackingOptions: {
enableHighAccuracy: true
},
projection: this.projection,
tracking: true
});
Expand Down
47 changes: 43 additions & 4 deletions packages/geo/src/lib/overlay/shared/overlay.utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,18 @@ export function createOverlayLayer(): VectorLayer {
function createOverlayLayerStyle(): (olFeature: OlFeature) => olstyle.Style {
const defaultStyle = createOverlayDefaultStyle();
const markerStyle = createOverlayMarkerStyle();
let style;

return (olFeature: OlFeature) => {
const geometryType = olFeature.getGeometry().getType();
const style = geometryType === 'Point' ? markerStyle : defaultStyle;
style.getText().setText(olFeature.get('_mapTitle'));
return style;
if (olFeature.getId() === 'bufferFeature') {
style = createBufferStyle(olFeature.get('bufferStroke'), 2, olFeature.get('bufferFill'), olFeature.get('bufferText'));
return style;
} else {
const geometryType = olFeature.getGeometry().getType();
style = geometryType === 'Point' ? markerStyle : defaultStyle;
style.getText().setText(olFeature.get('_mapTitle'));
return style;
}
};
}

Expand Down Expand Up @@ -98,3 +104,36 @@ export function createOverlayMarkerStyle(color = 'blue', text?): olstyle.Style {
})
});
}

function createBufferStyle(
strokeRGBA: [number, number, number, number] = [0, 161, 222, 1],
strokeWidth: number = 2,
fillRGBA: [number, number, number, number] = [0, 161, 222, 0.15],
bufferRadius?
): olstyle.Style {
const stroke = new olstyle.Stroke({
width: strokeWidth,
color: strokeRGBA
});

const fill = new olstyle.Stroke({
color: fillRGBA
});

return new olstyle.Style({
stroke,
fill,
image: new olstyle.Circle({
radius: 5,
stroke,
fill
}),
text: new olstyle.Text({
font: '12px Calibri,sans-serif',
text: bufferRadius,
fill: new olstyle.Fill({ color: '#000' }),
stroke: new olstyle.Stroke({ color: '#fff', width: 3 }),
overflow: true
})
});
}

0 comments on commit 658f3d6

Please sign in to comment.