Skip to content

fix: add prop to set unique id on element & clear the featureSource unless clickFeatures is enabled #110

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

Merged
jessicamcinchak merged 5 commits into from
Jan 14, 2022
Merged

fix: add prop to set unique id on element & clear the featureSource unless clickFeatures is enabled #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f9e0960
add prop to set unique id
jessicamcinchak Jan 13, 2022
3467df9
only features are duplicated? color & drawMode arenot synced
jessicamcinchak Jan 13, 2022
bcdf80e
temp console.logs for debugging
jessicamcinchak Jan 13, 2022
9a08bb0
featureSource.clear(), cleanup
jessicamcinchak Jan 13, 2022
bc793a2
tweak order of drawingSource.clear() too
jessicamcinchak Jan 14, 2022
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 drawPointer="dot" />
<my-map zoom="18" maxZoom="23" drawMode drawPointer="dot" id="example-map" />

<script>
const map = document.querySelector("my-map");
Expand Down
25 changes: 15 additions & 10 deletions src/my-map.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ export class MyMap extends LitElement {
height: 800px;
position: relative;
}
#map {
.map {
height: 100%;
opacity: 0;
transition: opacity 0.25s;
overflow: hidden;
}
#map:focus {
.map:focus {
outline: #d3d3d3 solid 0.15em;
}
.ol-control button {
Expand Down Expand Up @@ -77,6 +77,9 @@ export class MyMap extends LitElement {
`;

// configurable component properties
@property({ type: String })
id = "map";

@property({ type: Number })
latitude = 51.507351;

Expand Down Expand Up @@ -174,7 +177,7 @@ export class MyMap extends LitElement {

// runs after the initial render
firstUpdated() {
const target = this.renderRoot.querySelector("#map") as HTMLElement;
const target = this.renderRoot.querySelector(`#${this.id}`) as HTMLElement;

const useVectorTiles =
!this.disableVectorTiles && Boolean(this.osVectorTilesApiKey);
Expand Down Expand Up @@ -326,18 +329,19 @@ export class MyMap extends LitElement {

// draw interactions
if (this.drawMode) {
// check if single polygon feature was provided to load as the initial drawing
// make sure drawingSource is cleared upfront, even if drawGeojsonData is provided
drawingSource.clear();

// load an initial polygon into the drawing source if provided, or start from an empty drawing source
const loadInitialDrawing =
Object.keys(this.drawGeojsonData.geometry).length > 0;

if (loadInitialDrawing) {
let feature = new GeoJSON().readFeature(this.drawGeojsonData, {
featureProjection: "EPSG:3857",
});
drawingSource.addFeature(feature);
// fit map to extent of intial feature, overriding zoom & lat/lng center
fitToData(map, drawingSource, this.drawGeojsonDataBuffer);
} else {
drawingSource.clear();
}

map.addLayer(drawingLayer);
Expand Down Expand Up @@ -406,12 +410,13 @@ export class MyMap extends LitElement {
if (this.showFeaturesAtPoint && Boolean(this.osFeaturesApiKey)) {
getFeaturesAtPoint(
fromLonLat([this.longitude, this.latitude]),
this.osFeaturesApiKey
this.osFeaturesApiKey,
false
);

if (this.clickFeatures) {
map.on("singleclick", (e) => {
getFeaturesAtPoint(e.coordinate, this.osFeaturesApiKey);
getFeaturesAtPoint(e.coordinate, this.osFeaturesApiKey, true);
});
}

Expand Down Expand Up @@ -462,7 +467,7 @@ export class MyMap extends LitElement {
render() {
return html`<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<link rel="stylesheet" href="https://cdn.skypack.dev/ol@^6.6.1/ol.css" />
<div id="map" tabindex="0" />`;
<div id="${this.id}" class="map" tabindex="0" />`;
}

// unmount the map
Expand Down
36 changes: 26 additions & 10 deletions src/os-features.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,13 @@ export function makeFeatureLayer(color: string, featureFill: boolean) {
* features containing the coordinates of the provided point
* @param coord - xy coordinate
* @param apiKey - Ordnance Survey Features API key, sign up here: https://osdatahub.os.uk/plans
* @param supportClickFeatures - whether the featureSource should support `clickFeatures` mode or be cleared upfront
*/
export function getFeaturesAtPoint(coord: Array<number>, apiKey: any) {
export function getFeaturesAtPoint(
coord: Array<number>,
apiKey: any,
supportClickFeatures: boolean
) {
const xml = `
<ogc:Filter>
<ogc:Contains>
Expand Down Expand Up @@ -82,17 +87,28 @@ export function getFeaturesAtPoint(coord: Array<number>, apiKey: any) {
featureProjection: "EPSG:3857",
});

features.forEach((feature) => {
const id = feature.getProperties().TOID;
const existingFeature = featureSource.getFeatureById(id);

if (existingFeature) {
featureSource.removeFeature(existingFeature);
} else {
if (supportClickFeatures) {
// Allows for many features to be selected/deselected when `showFeaturesAtPoint` && `clickFeatures` are enabled
features.forEach((feature) => {
const id = feature.getProperties().TOID;
const existingFeature = featureSource.getFeatureById(id);

if (existingFeature) {
featureSource.removeFeature(existingFeature);
} else {
feature.setId(id);
featureSource.addFeature(feature);
}
});
} else {
// Clears the source upfront to prevent previously fetched results from persisting when only `showFeaturesAtPoint` is enabled
featureSource.clear();
features.forEach((feature) => {
const id = feature.getProperties().TOID;
feature.setId(id);
featureSource.addFeature(feature);
}
});
});
}

outlineSource.clear();
outlineSource.addFeature(
Expand Down