diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts index 6999567..80ddcf2 100644 --- a/src/components/my-map/index.ts +++ b/src/components/my-map/index.ts @@ -2,6 +2,7 @@ import { html, LitElement, unsafeCSS } from "lit"; import { customElement, property } from "lit/decorators.js"; import apply from "ol-mapbox-style"; import { defaults as defaultControls, ScaleLine } from "ol/control"; +import { FeatureLike } from "ol/Feature"; import { GeoJSON } from "ol/format"; import { GeoJSONFeature } from "ol/format/GeoJSON"; import { Point } from "ol/geom"; @@ -53,8 +54,8 @@ import { import styles from "./styles.scss?inline"; import { AreaUnitEnum, - fitToData, calculateArea, + fitToData, hexToRgba, makeGeoJSON, } from "./utils"; @@ -475,7 +476,7 @@ export class MyMap extends LitElement { const geojsonLayer = new VectorLayer({ source: geojsonSource, - style: function (this: MyMap, feature: any) { + style: function (this: MyMap, feature: FeatureLike) { // Read color from geojson feature `properties` if set or fallback to prop let featureColor = feature.get("color") || this.geojsonColor; return new Style({ @@ -488,6 +489,10 @@ export class MyMap extends LitElement { ? hexToRgba(featureColor, 0.2) : hexToRgba(featureColor, 0), }), + image: new Circle({ + radius: 9, + fill: new Fill({ color: featureColor }), + }), }); }.bind(this), });