Skip to content

Commit

Permalink
account for FeatureCollection and Feature geojson types (#34)
Browse files Browse the repository at this point in the history
  • Loading branch information
jessicamcinchak authored Aug 12, 2021
1 parent 11d962a commit aab48c6
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 11 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ geojsonColor = "#ff0000";
geojsonBuffer = 15;
```

`geojsonData` is required. The default is an empty geojson object so that we can initialize a VectorLayer & VectorSource regardless. This is currently optimized for geojson containing a single polygon feature.
`geojsonData` is required, and should be of type "FeatureCollection" or "Feature". The default is an empty geojson object so that we can initialize a VectorLayer & VectorSource regardless. This is currently optimized for geojson containing a single polygon feature.

`geojsonColor` & `geojsonBuffer` are optional style properties. Color sets the stroke of the displayed data and buffer is used to fit the map view to the extent of the geojson features. `geojsonBuffer` corresponds to "value" param in OL documentation [here](https://openlayers.org/en/latest/apidoc/module-ol_extent.html).

Expand Down
35 changes: 25 additions & 10 deletions src/my-map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@ import View from "ol/View";
import { last } from "rambda";

import { draw, drawingLayer, drawingSource, modify, snap } from "./draw";
import { makeFeatureLayer, featureSource, getFeaturesAtPoint } from "./os-features";
import {
makeFeatureLayer,
featureSource,
getFeaturesAtPoint,
} from "./os-features";
import { makeOsVectorTileBaseMap, makeRasterBaseMap } from "./os-layers";
import { formatArea } from "./utils";

Expand Down Expand Up @@ -98,10 +102,13 @@ export class MyMap extends LitElement {
firstUpdated() {
const target = this.shadowRoot?.querySelector("#map") as HTMLElement;

const useVectorTiles = this.renderVectorTiles && Boolean(this.osVectorTilesApiKey);
const useVectorTiles =
this.renderVectorTiles && Boolean(this.osVectorTilesApiKey);

const rasterBaseMap = makeRasterBaseMap(this.osVectorTilesApiKey);
const osVectorTileBaseMap = makeOsVectorTileBaseMap(this.osVectorTilesApiKey);
const osVectorTileBaseMap = makeOsVectorTileBaseMap(
this.osVectorTilesApiKey
);

const map = new Map({
target,
Expand Down Expand Up @@ -165,11 +172,19 @@ export class MyMap extends LitElement {
});

// add a vector layer to display static geojson if features are provided
const outlineSource = new VectorSource({
features: new GeoJSON().readFeatures(this.geojsonData, {
const outlineSource = new VectorSource();

if (this.geojsonData.type === "FeatureCollection") {
let features = new GeoJSON().readFeatures(this.geojsonData, {
featureProjection: "EPSG:3857",
}),
});
});
outlineSource.addFeatures(features);
} else if (this.geojsonData.type === "Feature") {
let feature = new GeoJSON().readFeature(this.geojsonData, {
featureProjection: "EPSG:3857",
});
outlineSource.addFeature(feature);
}

const outlineLayer = new VectorLayer({
source: outlineSource,
Expand All @@ -183,12 +198,12 @@ export class MyMap extends LitElement {

map.addLayer(outlineLayer);

if (this.geojsonData.features.length > 0) {
// fit map to extent of features, overriding default zoom & center
if (outlineSource.getFeatures().length > 0) {
// fit map to extent of geojson features, overriding default zoom & center
const extent = outlineSource.getExtent();
map.getView().fit(buffer(extent, this.geojsonBuffer));

// log total area of feature (assumes geojson is a single polygon)
// log total area of first feature (assumes geojson is a single polygon for now)
const data = outlineSource.getFeatures()[0].getGeometry();
console.log("geojsonData total area:", formatArea(data));
}
Expand Down

0 comments on commit aab48c6

Please sign in to comment.