- {{'igo.geo.draw.stroke' | translate}}
+ {{ 'igo.geo.draw.stroke' | translate }}
- {{strokeColor}}
-
+ {{ strokeColor }}
@@ -108,20 +107,20 @@
- {{'igo.geo.draw.icon' | translate}}
+ {{ 'igo.geo.draw.icon' | translate }}
-
+
-
+
-
+
+
+ {{ 'igo.geo.draw.fontSize' | translate }}
+
+ px
+
+
+ {{ 'igo.geo.draw.fontStyle' | translate }}
+
+
+ {{ fontSelect }}
+
+
+
+
+
+
-
diff --git a/packages/geo/src/lib/draw/draw/draw.component.scss b/packages/geo/src/lib/draw/draw/draw.component.scss
index f74e427d10..eff37d048b 100644
--- a/packages/geo/src/lib/draw/draw/draw.component.scss
+++ b/packages/geo/src/lib/draw/draw/draw.component.scss
@@ -67,3 +67,16 @@ img {
.deleteBtn {
margin-left: 12px;
}
+
+.igo-form-font .mat-form-field + .mat-form-field{
+ margin-left: 18px;
+}
+
+.igo-form-fontSize{
+ left: 10px !important;
+ width: 150px;
+}
+.igo-form-fontStyle{
+ width: 150px;
+}
+
diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts
index e25a6e2298..8f91a9d48b 100644
--- a/packages/geo/src/lib/draw/draw/draw.component.ts
+++ b/packages/geo/src/lib/draw/draw/draw.component.ts
@@ -8,19 +8,20 @@ import {
} from '@angular/core';
import {
- FEATURE,
- FeatureStore,
- FeatureStoreSelectionStrategy,
- tryBindStoreLayer,
- tryAddLoadingStrategy,
- tryAddSelectionStrategy,
- FeatureMotion,
- FeatureStoreLoadingStrategy
- } from '../../feature';
+ FEATURE,
+ FeatureStore,
+ FeatureStoreSelectionStrategy,
+ tryBindStoreLayer,
+ tryAddLoadingStrategy,
+ tryAddSelectionStrategy,
+ FeatureMotion,
+ FeatureStoreLoadingStrategy,
+ featureToOl
+} from '../../feature';
import { LanguageService } from '@igo2/core';
import { MatDialog } from '@angular/material/dialog';
-import { GeometryType } from '../shared/draw.enum';
+import { FontType, GeometryType } from '../shared/draw.enum';
import { IgoMap } from '../../map/shared/map';
import { BehaviorSubject, Subscription } from 'rxjs';
import { Draw, FeatureWithDraw } from '../shared/draw.interface';
@@ -39,7 +40,7 @@ import OlFeature from 'ol/Feature';
import OlGeoJSON from 'ol/format/GeoJSON';
import OlOverlay from 'ol/Overlay';
import type { default as OlGeometryType } from 'ol/geom/GeometryType';
-import type { default as OlGeometry } from 'ol/geom/Geometry';
+import { default as OlGeometry } from 'ol/geom/Geometry';
import { getDistance } from 'ol/sphere';
import { DrawStyleService } from '../shared/draw-style.service';
import { skip } from 'rxjs/operators';
@@ -50,13 +51,12 @@ import { createInteractionStyle } from '../shared/draw.utils';
import { transform } from 'ol/proj';
import { DrawIconService } from '../shared/draw-icon.service';
-@Component ({
+@Component({
selector: 'igo-draw',
templateUrl: './draw.component.html',
styleUrls: ['./draw.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
-
export class DrawComponent implements OnInit, OnDestroy {
/**
* Table template
@@ -68,12 +68,12 @@ export class DrawComponent implements OnInit, OnDestroy {
selectionCheckbox: true,
sort: true,
columns: [{
- name: 'Drawing',
- title: this.languageService.translate.instant('igo.geo.draw.labels'),
- valueAccessor: (feature: FeatureWithDraw) => {
- return feature.properties.draw;
- }
- }]
+ name: 'Drawing',
+ title: this.languageService.translate.instant('igo.geo.draw.labels'),
+ valueAccessor: (feature: FeatureWithDraw) => {
+ return feature.properties.draw;
+ }
+ }]
};
public geometryType = GeometryType; // Reference to the GeometryType enum
@@ -82,6 +82,10 @@ export class DrawComponent implements OnInit, OnDestroy {
@Output() strokeColor: string;
@Output() strokeWidth: number;
+ @Output() fontSize: string;
+ @Output() fontStyle: string;
+ @Input() fontType: FontType;
+
@Input() map: IgoMap; // Map to draw on
@Input() store: FeatureStore
; // Drawing store
@@ -93,7 +97,8 @@ export class DrawComponent implements OnInit, OnDestroy {
private drawEnd$$: Subscription;
private drawSelect$$: Subscription;
private olDrawingLayer: VectorLayer;
- public selectedFeatures$: BehaviorSubject = new BehaviorSubject([]);
+ public selectedFeatures$: BehaviorSubject =
+ new BehaviorSubject([]);
public fillForm: string;
public strokeForm: string;
public drawControlIsDisabled: boolean = true;
@@ -101,6 +106,8 @@ export class DrawComponent implements OnInit, OnDestroy {
public labelsAreShown: boolean;
private subscriptions$$: Subscription[] = [];
+ public fontSizeForm: string;
+ public fontStyleForm: string;
public position: string = 'bottom';
public form: FormGroup;
public icons: Array;
@@ -120,12 +127,19 @@ export class DrawComponent implements OnInit, OnDestroy {
this.labelsAreShown = this.drawStyleService.getLabelsAreShown();
this.icons = this.drawIconService.getIcons();
this.icon = this.drawStyleService.getIcon();
+
+ this.fontSize = this.drawStyleService.getFontSize();
+ this.fontStyle = this.drawStyleService.getFontStyle();
}
// Initialize the store that will contain the entities and create the Draw control
ngOnInit() {
this.initStore();
- this.drawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
+ this.drawControl = this.createDrawControl(
+ this.fillColor,
+ this.strokeColor,
+ this.strokeWidth
+ );
this.drawControl.setGeometryType(this.geometryType.Point as any);
this.toggleDrawControl();
}
@@ -136,7 +150,7 @@ export class DrawComponent implements OnInit, OnDestroy {
*/
ngOnDestroy() {
this.drawControl.setOlMap(undefined);
- this.subscriptions$$.map(s => s.unsubscribe());
+ this.subscriptions$$.map((s) => s.unsubscribe());
}
/**
@@ -146,14 +160,21 @@ export class DrawComponent implements OnInit, OnDestroy {
* @param strokeWidth the stroke width
* @returns a Draw Control
*/
- createDrawControl(fillColor?: string, strokeColor?: string, strokeWidth?: number) {
+ createDrawControl(
+ fillColor?: string,
+ strokeColor?: string,
+ strokeWidth?: number
+ ) {
const drawControl = new DrawControl({
geometryType: undefined,
drawingLayerSource: this.olDrawingLayerSource,
drawingLayerStyle: new OlStyle.Style({}),
- interactionStyle: createInteractionStyle(fillColor, strokeColor, strokeWidth),
+ interactionStyle: createInteractionStyle(
+ fillColor,
+ strokeColor,
+ strokeWidth
+ )
});
-
return drawControl;
}
@@ -171,7 +192,6 @@ export class DrawComponent implements OnInit, OnDestroy {
*/
private initStore() {
this.map.removeLayer(this.olDrawingLayer);
-
this.olDrawingLayer = new VectorLayer({
isIgoInternalLayer: true,
id: 'igo-draw-layer',
@@ -179,43 +199,62 @@ export class DrawComponent implements OnInit, OnDestroy {
zIndex: 200,
source: new FeatureDataSource(),
style: (feature, resolution) => {
- return this.drawStyleService.createDrawingLayerStyle(feature, resolution, this.labelsAreShown, this.icon);
+ return this.drawStyleService.createDrawingLayerStyle(
+ feature,
+ resolution,
+ this.labelsAreShown,
+ this.icon
+ );
},
showInLayerList: true,
exportable: true,
browsable: false,
workspace: {
enabled: false
- },
+ }
});
tryBindStoreLayer(this.store, this.olDrawingLayer);
-
- tryAddLoadingStrategy(this.store, new FeatureStoreLoadingStrategy({
- motion: FeatureMotion.None
- }));
-
- tryAddSelectionStrategy(this.store, new FeatureStoreSelectionStrategy({
- map: this.map,
- motion: FeatureMotion.None,
- many: true
- }));
+ tryAddLoadingStrategy(
+ this.store,
+ new FeatureStoreLoadingStrategy({
+ motion: FeatureMotion.None
+ })
+ );
+ tryAddSelectionStrategy(
+ this.store,
+ new FeatureStoreSelectionStrategy({
+ map: this.map,
+ motion: FeatureMotion.None,
+ many: true
+ })
+ );
this.store.layer.visible = true;
- this.store.source.ol.on('removefeature', (event: OlVectorSourceEvent) => {
- const olGeometry = event.feature.getGeometry();
- this.clearLabelsOfOlGeometry(olGeometry);
- });
-
- this.subscriptions$$.push(this.store.stateView.manyBy$((record: EntityRecord) => {
- return record.state.selected === true;
- }).pipe(
- skip(1) // Skip initial emission
- ).subscribe((records: EntityRecord[]) => {
- this.selectedFeatures$.next(records.map(record => record.entity));
- }));
-
- this.subscriptions$$.push(this.store.count$.subscribe(cnt => {
- cnt >= 1 ? this.store.layer.options.showInLayerList = true : this.store.layer.options.showInLayerList = false;
- }));
+ this.store.source.ol.on(
+ 'removefeature',
+ (event: OlVectorSourceEvent) => {
+ const olGeometry = event.feature.getGeometry();
+ this.clearLabelsOfOlGeometry(olGeometry);
+ }
+ );
+ this.subscriptions$$.push(
+ this.store.stateView
+ .manyBy$((record: EntityRecord) => {
+ return record.state.selected === true;
+ })
+ .pipe(
+ skip(1) // Skip initial emission
+ )
+ .subscribe((records: EntityRecord[]) => {
+ this.selectedFeatures$.next(records.map((record) => record.entity));
+ })
+ );
+ this.subscriptions$$.push(
+ this.store.count$.subscribe((cnt) => {
+ cnt >= 1
+ ? (this.store.layer.options.showInLayerList = true)
+ : (this.store.layer.options.showInLayerList = false);
+ })
+ );
}
/**
@@ -231,13 +270,21 @@ export class DrawComponent implements OnInit, OnDestroy {
if (isAnIcon) {
this.store.layer.ol.setStyle((feature, resolution) => {
- return this.drawStyleService.createDrawingLayerStyle(feature, resolution, labelsAreShown, this.icon);
+ return this.drawStyleService.createDrawingLayerStyle(
+ feature,
+ resolution,
+ labelsAreShown,
+ this.icon
+ );
});
this.icon = undefined;
-
} else {
this.store.layer.ol.setStyle((feature, resolution) => {
- return this.drawStyleService.createDrawingLayerStyle(feature, resolution, labelsAreShown);
+ return this.drawStyleService.createDrawingLayerStyle(
+ feature,
+ resolution,
+ labelsAreShown
+ );
});
}
this.createDrawControl();
@@ -269,20 +316,32 @@ export class DrawComponent implements OnInit, OnDestroy {
// open the dialog box used to enter label
const dialogRef = this.dialog.open(DrawPopupComponent, {
disableClose: false,
- data: {currentLabel: olGeometryFeature.get('draw')}
+ data: { currentLabel: olGeometryFeature.get('draw') }
});
// when dialog box is closed, get label and set it to geometry
dialogRef.afterClosed().subscribe((label: string) => {
- this.updateLabelOfOlGeometry(olGeometryFeature, label);
-
- // if event was fired at draw end
- if (isDrawEnd) {
- this.onDrawEnd(olGeometryFeature);
-
- // if event was fired at select
- } else {
- this.onSelectDraw(olGeometryFeature, label);
+ // checks if the user clicked ok
+ if (dialogRef.componentInstance.confirmFlag) {
+ this.updateLabelOfOlGeometry(olGeometryFeature, label);
+ // if event was fired at draw end
+ if (isDrawEnd) {
+ this.onDrawEnd(olGeometryFeature);
+ // if event was fired at select
+ } else {
+ this.onSelectDraw(olGeometryFeature, label);
+ }
+ }
+ // deletes the feature
+ else {
+ this.olDrawingLayerSource
+ .getFeatures()
+ .forEach((drawingLayerFeature) => {
+ const geometry = drawingLayerFeature.getGeometry() as any;
+ if (olGeometryFeature === geometry) {
+ this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
+ }
+ });
}
});
}, 250);
@@ -294,18 +353,22 @@ export class DrawComponent implements OnInit, OnDestroy {
private activateDrawControl() {
this.drawControlIsDisabled = false;
this.drawControlIsActive = true;
- this.drawEnd$$ = this.drawControl.end$.subscribe((olGeometry: OlGeometry) => {
- this.openDialog(olGeometry, true);
- });
+ this.drawEnd$$ = this.drawControl.end$.subscribe(
+ (olGeometry: OlGeometry) => {
+ this.openDialog(olGeometry, true);
+ }
+ );
this.drawControl.modify$.subscribe((olGeometry: OlGeometry) => {
this.onModifyDraw(olGeometry);
});
if (!this.drawSelect$$) {
- this.drawSelect$$ = this.drawControl.select$.subscribe((olFeature: OlFeature) => {
- this.openDialog(olFeature, false);
- });
+ this.drawSelect$$ = this.drawControl.select$.subscribe(
+ (olFeature: OlFeature) => {
+ this.openDialog(olFeature, false);
+ }
+ );
}
this.drawControl.setOlMap(this.map.ol, true);
@@ -340,7 +403,7 @@ export class DrawComponent implements OnInit, OnDestroy {
private onModifyDraw(olGeometry) {
const entities = this.store.all();
- entities.forEach(entity => {
+ entities.forEach((entity) => {
const entityId = entity.properties.id;
const olGeometryId = olGeometry.ol_uid;
@@ -358,14 +421,17 @@ export class DrawComponent implements OnInit, OnDestroy {
const olGeometry = olFeature.getGeometry() as any;
olGeometry.ol_uid = olFeature.get('id');
- const olGeometryCoordinates = JSON.stringify(olGeometry.getCoordinates()[0]);
+ const olGeometryCoordinates = JSON.stringify(
+ olGeometry.getCoordinates()[0]
+ );
- entities.forEach(entity => {
+ entities.forEach((entity) => {
const entityCoordinates = JSON.stringify(entity.geometry.coordinates[0]);
if (olGeometryCoordinates === entityCoordinates) {
- const rad: number = entity.properties.rad ? entity.properties.rad : undefined;
-
+ const rad: number = entity.properties.rad
+ ? entity.properties.rad
+ : undefined;
this.updateLabelOfOlGeometry(olGeometry, label);
this.replaceFeatureInStore(entity, olGeometry, rad);
}
@@ -377,7 +443,11 @@ export class DrawComponent implements OnInit, OnDestroy {
* will trigger and add the feature to the map.
* @internal
*/
- private addFeatureToStore(olGeometry, radius?: number, feature?: FeatureWithDraw) {
+ private addFeatureToStore(
+ olGeometry,
+ radius?: number,
+ feature?: FeatureWithDraw
+ ) {
let rad: number;
let center4326: Array;
let point4326: Array;
@@ -397,8 +467,22 @@ export class DrawComponent implements OnInit, OnDestroy {
} else {
geometry.type = 'Point';
geometry.coordinates = olGeometry.getCenter();
- const extent4326 = transform([olGeometry.getFlatCoordinates()[2], olGeometry.getFlatCoordinates()[3]], projection, 'EPSG:4326');
- center4326 = transform([olGeometry.getFlatCoordinates()[0], olGeometry.getFlatCoordinates()[1]], projection, 'EPSG:4326');
+ const extent4326 = transform(
+ [
+ olGeometry.getFlatCoordinates()[2],
+ olGeometry.getFlatCoordinates()[3]
+ ],
+ projection,
+ 'EPSG:4326'
+ );
+ center4326 = transform(
+ [
+ olGeometry.getFlatCoordinates()[0],
+ olGeometry.getFlatCoordinates()[1]
+ ],
+ projection,
+ 'EPSG:4326'
+ );
lon4326 = center4326[0];
lat4326 = center4326[1];
rad = getDistance(center4326, extent4326);
@@ -406,7 +490,11 @@ export class DrawComponent implements OnInit, OnDestroy {
}
if (olGeometry instanceof OlPoint) {
- point4326 = transform(olGeometry.getFlatCoordinates(), projection, 'EPSG:4326');
+ point4326 = transform(
+ olGeometry.getFlatCoordinates(),
+ projection,
+ 'EPSG:4326'
+ );
lon4326 = point4326[0];
lat4326 = point4326[1];
}
@@ -423,7 +511,7 @@ export class DrawComponent implements OnInit, OnDestroy {
rad: rad ? rad : null
},
meta: {
- id: featureId
+ id: featureId
}
});
}
@@ -433,7 +521,11 @@ export class DrawComponent implements OnInit, OnDestroy {
* @param entity the entity to replace
* @param olGeometry the new geometry to insert in the store
*/
- private replaceFeatureInStore(entity, olGeometry: OlGeometry, radius?: number) {
+ private replaceFeatureInStore(
+ entity,
+ olGeometry: OlGeometry,
+ radius?: number
+ ) {
this.store.delete(entity);
this.onDrawEnd(olGeometry, radius);
}
@@ -447,8 +539,8 @@ export class DrawComponent implements OnInit, OnDestroy {
deleteDrawings() {
this.store.deleteMany(this.selectedFeatures$.value);
- this.selectedFeatures$.value.forEach(selectedFeature => {
- this.olDrawingLayerSource.getFeatures().forEach(drawingLayerFeature => {
+ this.selectedFeatures$.value.forEach((selectedFeature) => {
+ this.olDrawingLayerSource.getFeatures().forEach((drawingLayerFeature) => {
const geometry = drawingLayerFeature.getGeometry() as any;
if (selectedFeature.properties.id === geometry.ol_uid) {
this.olDrawingLayerSource.removeFeature(drawingLayerFeature);
@@ -462,11 +554,13 @@ export class DrawComponent implements OnInit, OnDestroy {
* @param olGeometry OL geometry with tooltips
*/
private clearLabelsOfOlGeometry(olGeometry) {
- getTooltipsOfOlGeometry(olGeometry).forEach((olTooltip: OlOverlay | undefined) => {
- if (olTooltip && olTooltip.getMap()) {
- this.map.ol.removeOverlay(olTooltip);
+ getTooltipsOfOlGeometry(olGeometry).forEach(
+ (olTooltip: OlOverlay | undefined) => {
+ if (olTooltip && olTooltip.getMap()) {
+ this.map.ol.removeOverlay(olTooltip);
+ }
}
- });
+ );
}
/**
@@ -475,8 +569,10 @@ export class DrawComponent implements OnInit, OnDestroy {
onToggleLabels() {
this.drawStyleService.toggleLabelsAreShown();
this.labelsAreShown = !this.labelsAreShown;
- this.icon ? this.onColorChange(this.labelsAreShown, true) : this.onColorChange(this.labelsAreShown, false);
- }
+ this.icon
+ ? this.onColorChange(this.labelsAreShown, true)
+ : this.onColorChange(this.labelsAreShown, false);
+ }
/**
* Update the label of a geometry when a label is entered in a dialog box
@@ -484,20 +580,64 @@ export class DrawComponent implements OnInit, OnDestroy {
* @param label the label
*/
private updateLabelOfOlGeometry(olGeometry: OlGeometry, label: string) {
- olGeometry.setProperties({
- _label: label
- }, true);
+ olGeometry.setProperties(
+ {
+ _label: label
+ },
+ true
+ );
}
onIconChange(event?) {
this.icon = event;
this.drawStyleService.setIcon(this.icon);
this.store.layer.ol.setStyle((feature, resolution) => {
- return this.drawStyleService.createDrawingLayerStyle(feature, resolution, true, this.icon);
+ return this.drawStyleService.createDrawingLayerStyle(
+ feature,
+ resolution,
+ true,
+ this.icon
+ );
});
}
openShorcutsDialog() {
this.dialog.open(DrawShorcutsComponent);
}
+
+ /**
+ * Called when the user double-clicks the selected drawing
+ */
+ editLabelDrawing() {
+ const olGeometry = featureToOl(
+ this.selectedFeatures$.value[0],
+ this.map.ol.getView().getProjection().getCode()
+ );
+ this.openDialog(olGeometry, false);
+ }
+
+ /**
+ * Called when the user changes the font size or/and style
+ * @param labelsAreShown wheter the labels are shown or not
+ * @param size the size of the font
+ * @param style the style of the font
+ */
+
+ onFontChange(labelsAreShown: boolean, size: string, style: FontType) {
+ this.drawStyleService.setFontSize(size);
+ this.drawStyleService.setFontStyle(style);
+
+ this.store.layer.ol.setStyle((feature, resolution) => {
+ return this.drawStyleService.createDrawingLayerStyle(
+ feature,
+ resolution,
+ labelsAreShown
+ );
+ });
+ this.createDrawControl();
+ }
+
+ get allFontStyles(): string[] {
+ return Object.values(FontType);
+ }
}
diff --git a/packages/geo/src/lib/draw/shared/draw-style.service.ts b/packages/geo/src/lib/draw/shared/draw-style.service.ts
index e20b56195a..c97d803c0d 100644
--- a/packages/geo/src/lib/draw/shared/draw-style.service.ts
+++ b/packages/geo/src/lib/draw/shared/draw-style.service.ts
@@ -4,21 +4,21 @@ import * as OlStyle from 'ol/style';
import OlPoint from 'ol/geom/Point';
import { transform } from 'ol/proj';
import { MapService } from '../../map/shared/map.service';
+import { FontType } from './draw.enum';
@Injectable({
- providedIn: 'root'
- })
+ providedIn: 'root'
+})
export class DrawStyleService {
-
private fillColor = 'rgba(255,255,255,0.4)';
private strokeColor = 'rgba(143,7,7,1)';
private strokeWidth: number = 1;
private labelsAreShown = true;
private icon: string;
+ private fontSize: string = '20';
+ private fontStyle: string = FontType.Arial.toString();
- constructor(
- private mapService: MapService
- ) {}
+ constructor(private mapService: MapService) {}
getFillColor(): string {
return this.fillColor;
@@ -56,11 +56,34 @@ export class DrawStyleService {
return this.icon;
}
- createDrawingLayerStyle(feature, resolution, labelsAreShown?: boolean, icon?: string): OlStyle.Style {
+ // To edit the label of drawing
+ getFontSize() {
+ return this.fontSize;
+ }
+
+ setFontSize(fontSize: string) {
+ this.fontSize = fontSize;
+ }
+
+ getFontStyle() {
+ return this.fontStyle;
+ }
+
+ setFontStyle(fontStyle: string) {
+ this.fontStyle = fontStyle;
+ }
+
+ createDrawingLayerStyle(
+ feature,
+ resolution,
+ labelsAreShown?: boolean,
+ icon?: string
+ ): OlStyle.Style {
let style;
let labelsAreOffset: boolean = false;
const proj = this.mapService.getMap().projection;
const geom = feature.getGeometry();
+ const fontSizeAndStyle = `${this.fontSize}px ${this.fontStyle}`;
if (geom instanceof OlPoint) {
labelsAreOffset = !labelsAreOffset;
@@ -68,8 +91,11 @@ export class DrawStyleService {
// if feature is a circle
if (feature.get('rad')) {
- const coordinates = transform(feature.getGeometry().flatCoordinates, proj, 'EPSG:4326');
-
+ const coordinates = transform(
+ feature.getGeometry().flatCoordinates,
+ proj,
+ 'EPSG:4326'
+ );
style = new OlStyle.Style({
text: new OlStyle.Text({
text: labelsAreShown ? feature.get('draw') : '',
@@ -80,12 +106,14 @@ export class DrawStyleService {
fill: new OlStyle.Fill({
color: 'black'
}),
- font: '20px sans-serif',
+ font: fontSizeAndStyle,
overflow: true
}),
-
image: new OlStyle.Circle({
- radius: feature.get('rad') / Math.cos((Math.PI / 180) * coordinates[1]) / resolution,
+ radius:
+ feature.get('rad') /
+ Math.cos((Math.PI / 180) * coordinates[1]) /
+ resolution,
stroke: new OlStyle.Stroke({
color: this.strokeColor,
width: this.strokeWidth
@@ -96,8 +124,7 @@ export class DrawStyleService {
})
});
return style;
-
- // if feature is an icon
+ // if feature is an icon
} else if (icon) {
style = new OlStyle.Style({
text: new OlStyle.Text({
@@ -110,26 +137,22 @@ export class DrawStyleService {
fill: new OlStyle.Fill({
color: 'black'
}),
- font: '20px sans-serif',
+ font: fontSizeAndStyle,
overflow: true
}),
-
stroke: new OlStyle.Stroke({
color: this.strokeColor,
width: this.strokeWidth
}),
-
- fill: new OlStyle.Fill({
+ fill: new OlStyle.Fill({
color: this.fillColor
}),
-
image: new OlStyle.Icon({
src: icon
})
});
return style;
-
- // if feature is a point, a linestring or a polygon
+ // if feature is a point, a linestring or a polygon
} else {
style = new OlStyle.Style({
text: new OlStyle.Text({
@@ -141,7 +164,7 @@ export class DrawStyleService {
fill: new OlStyle.Fill({
color: 'black'
}),
- font: '20px sans-serif',
+ font: fontSizeAndStyle,
overflow: true,
offsetY: labelsAreOffset ? -15 : 0
}),
diff --git a/packages/geo/src/lib/draw/shared/draw.enum.ts b/packages/geo/src/lib/draw/shared/draw.enum.ts
index cea7c8f95a..8796cf0cc7 100644
--- a/packages/geo/src/lib/draw/shared/draw.enum.ts
+++ b/packages/geo/src/lib/draw/shared/draw.enum.ts
@@ -4,3 +4,19 @@ export enum GeometryType {
Polygon = 'Polygon',
Circle = 'Circle'
}
+
+export enum FontType {
+ Arial = 'Arial',
+ ArialBlack = 'Arial Black',
+ Verdana = 'Verdana',
+ Tahoma = 'Tahoma',
+ TrebuchetMS = 'Trebuchet MS',
+ Impact = 'Impact',
+ TimesNewRoman = 'Times New Roman',
+ Georgia = 'Georgia',
+ AmericanTypewriter = 'American Typewriter',
+ Courier = 'Courier',
+ LucidaConsole = 'Lucida Console',
+ BrushScriptMT = 'Brush Script MT',
+ ComicSansMS = 'Comic Sans MS'
+}
diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json
index 00e7f976f4..79b484d50c 100644
--- a/packages/geo/src/locale/en.geo.json
+++ b/packages/geo/src/locale/en.geo.json
@@ -672,7 +672,7 @@
},
"draw": {
"abort": "Abort current drawing",
- "cancelColorPicker": "Cancel",
+ "cancel": "Cancel",
"Circle": "Circle",
"colorPicker": "Click to open the color picker",
"dialogInstruction": "Enter your draw's label",
@@ -694,7 +694,9 @@
"stroke": "Stroke",
"styleSelect": "Select style",
"toggleMapTooltips": "Show map tooltips",
- "undo": "Remove last vertex"
+ "undo": "Remove last vertex",
+ "fontSize": "Font size",
+ "fontStyle": "Font style"
},
"network": {
"online": {
diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json
index ed0a856ae6..3c4b0ff7e7 100644
--- a/packages/geo/src/locale/fr.geo.json
+++ b/packages/geo/src/locale/fr.geo.json
@@ -672,7 +672,7 @@
},
"draw": {
"abort": "Annuler le dessin en cours",
- "cancelColorPicker": "Annuler",
+ "cancel": "Annuler",
"Circle": "Cercle",
"colorPicker": "Cliquer pour ouvrir le sélecteur de couleurs",
"dialogInstruction": "Veuillez entrer l'étiquette de votre dessin",
@@ -694,7 +694,9 @@
"stroke": "Contour",
"styleSelect": "Sélectionner le style",
"toggleMapTooltips": "Afficher les étiquettes",
- "undo": "Retirer le dernier sommet"
+ "undo": "Retirer le dernier sommet",
+ "fontSize": "Taille de police",
+ "fontStyle": "Style de police"
},
"network": {
"online": {