diff --git a/layers/chandler/layer.js b/layers/chandler/layer.js new file mode 100644 index 0000000..a2ad7d7 --- /dev/null +++ b/layers/chandler/layer.js @@ -0,0 +1,32 @@ +import VectorLayer from 'ol/layer/Vector'; +import {Vector as VectorSource} from 'ol/source.js'; + +import {Style} from 'ol/style.js'; +import Icon from 'ol/style/Icon.js'; + +import pinURL from '/layers/chandler/pin.svg?url'; // TODO: remove `?url`? +import { Feature } from 'ol'; +import { Point } from 'ol/geom'; +import { fromLonLat } from 'ol/proj'; + +const res = await fetch("https://whereis.chandlerswift.com/api/0/last"); +const locs = await res.json(); +const loc = locs[0]; + +const vectorLayer = new VectorLayer({ + source: new VectorSource({ + features: [ + new Feature({ + geometry: new Point(fromLonLat([loc.lon, loc.lat])), + }) + ] + }), + style: new Style({ + image: new Icon({ + anchor: [0.5, 1], + src: pinURL, + }), + }), +}); + +export default vectorLayer; diff --git a/layers/chandler/pin.svg b/layers/chandler/pin.svg new file mode 100644 index 0000000..9d1a97d --- /dev/null +++ b/layers/chandler/pin.svg @@ -0,0 +1,16 @@ + + + + + diff --git a/layers/index.js b/layers/index.js index 329b63d..4a88746 100644 --- a/layers/index.js +++ b/layers/index.js @@ -2,6 +2,7 @@ import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import Stamen from 'ol/source/Stamen.js'; +import chandlerLayer from './chandler/layer.js'; import amtrakLayer from './amtrak/layer.js'; import arenasLayer from './nhl-arenas/layer.js'; import menardsLayer from './menards/layer.js'; @@ -53,6 +54,11 @@ const layerCategories = [ { name: "Overlays", layers: [ + { + name: "Chandler", + enabled: true, + layer: chandlerLayer, + }, { name: "Amtrak Routes", layer: amtrakLayer, diff --git a/vite.config.js b/vite.config.js index 791013e..b7aa047 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,6 @@ export default { build: { sourcemap: true, + target: 'es2022', } }