Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: configurable drawing pointer style #84

Merged
merged 2 commits into from
Nov 19, 2021
Merged

feat: configurable drawing pointer style #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1b1bf7
grey snaps, configurable draw pointer
jessicamcinchak Nov 19, 2021
c95d8de
Merge branch 'main' of github.com:theopensystemslab/map into jess/sna…
jessicamcinchak Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
/>
</head>
<body>
<my-map zoom="18" maxZoom="23" drawMode />
<my-map zoom="18" maxZoom="23" drawMode drawPointer="dot" />

<script>
const map = document.querySelector("my-map");
Expand Down
55 changes: 32 additions & 23 deletions src/drawing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,12 @@ import MultiPoint from "ol/geom/MultiPoint";
import { Draw, Modify, Snap } from "ol/interaction";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import {
Fill,
RegularShape,
Stroke,
Style,
} from "ol/style";
import { Fill, RegularShape, Stroke, Style } from "ol/style";
import CircleStyle from "ol/style/Circle";
import { pointsSource } from "./snapping";

export type DrawPointerEnum = "crosshair" | "dot";

const redLineBase = {
color: "#ff0000",
width: 3,
Expand All @@ -26,16 +24,23 @@ const redLineFill = new Fill({
color: "rgba(255, 0, 0, 0.1)",
});

const drawingPointer = new RegularShape({
const crosshair = new RegularShape({
stroke: new Stroke({
color: 'red',
color: "red",
width: 2,
}),
points: 4, // crosshair aka star
radius1: 15, // outer radius
radius2: 1, // inner radius
});

const dot = new CircleStyle({
radius: 6,
fill: new Fill({
color: "#ff0000",
}),
});

const drawingVertices = new Style({
image: new RegularShape({
fill: new Fill({
Expand Down Expand Up @@ -69,24 +74,28 @@ export const drawingLayer = new VectorLayer({
],
});

export const draw = new Draw({
source: drawingSource,
type: "Polygon",
style: new Style({
stroke: redDashedStroke,
fill: redLineFill,
image: drawingPointer,
}),
});
export function configureDraw(pointerStyle: DrawPointerEnum) {
return new Draw({
source: drawingSource,
type: "Polygon",
style: new Style({
stroke: redDashedStroke,
fill: redLineFill,
image: pointerStyle === "crosshair" ? crosshair : dot,
}),
});
}

export const snap = new Snap({
source: pointsSource, // empty if OS VectorTile basemap is disabled & zoom > 20
pixelTolerance: 15,
});

export const modify = new Modify({
source: drawingSource,
style: new Style({
image: drawingPointer,
}),
});
export function configureModify(pointerStyle: DrawPointerEnum) {
return new Modify({
source: drawingSource,
style: new Style({
image: pointerStyle === "crosshair" ? crosshair : dot,
}),
});
}
17 changes: 16 additions & 1 deletion src/my-map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,15 @@ import { Vector as VectorSource } from "ol/source";
import { Fill, Stroke, Style } from "ol/style";
import View from "ol/View";
import { last } from "rambda";
import { draw, drawingLayer, drawingSource, modify, snap } from "./drawing";

import {
configureDraw,
configureModify,
drawingLayer,
drawingSource,
DrawPointerEnum,
snap,
} from "./drawing";
import {
getFeaturesAtPoint,
makeFeatureLayer,
Expand Down Expand Up @@ -92,6 +100,9 @@ export class MyMap extends LitElement {
@property({ type: Number })
drawGeojsonDataBuffer = 100;

@property({ type: String })
drawPointer: DrawPointerEnum = "crosshair";

@property({ type: Boolean })
showFeaturesAtPoint = false;

Expand Down Expand Up @@ -189,6 +200,10 @@ export class MyMap extends LitElement {
}),
});

// make configurable interactions available
const draw = configureDraw(this.drawPointer);
const modify = configureModify(this.drawPointer);

// add a custom 'reset' control below zoom
const button = document.createElement("button");
button.innerHTML = "↻";
Expand Down
2 changes: 1 addition & 1 deletion src/snapping.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const pointsLayer = new VectorLayer({
image: new CircleStyle({
radius: 3,
fill: new Fill({
color: "black",
color: "grey",
}),
}),
}),
Expand Down