Chandler Swift
bacab31bbc
Most of this was stolen from prior work:
6c4c2aa9ae
The one thing that took me an unreasonably long time to figure out was
that SVGs without width/height don't work (correctly? at all?) in
OpenLayers. Possibly due to this issue?:
https://github.com/openlayers/openlayers/issues/14196
Anyway, it was fixed by adding a width and height attribute to the pin
SVG.
25 lines
680 B
JavaScript
25 lines
680 B
JavaScript
import VectorLayer from 'ol/layer/Vector';
|
|
import {Vector as VectorSource} from 'ol/source.js';
|
|
import GeoJSON from 'ol/format/GeoJSON.js';
|
|
|
|
import {Style, Stroke, Circle, Fill} from 'ol/style.js';
|
|
import Icon from 'ol/style/Icon.js';
|
|
|
|
import menardsURL from '/data/menards-data.geojson?url'; // TODO: remove `?url`?
|
|
import pinURL from '/layers/menards/pin.svg?url'; // TODO: remove `?url`?
|
|
|
|
const vectorLayer = new VectorLayer({
|
|
source: new VectorSource({
|
|
url: menardsURL,
|
|
format: new GeoJSON,
|
|
}),
|
|
style: new Style({
|
|
image: new Icon({
|
|
anchor: [0.5, 1],
|
|
src: pinURL,
|
|
}),
|
|
}),
|
|
});
|
|
|
|
export default vectorLayer;
|