Add Chandler layer
Also enable es2022 to allow top-level await (supported by 2021-era+ browsers)
This commit is contained in:
parent
be8cf4e5f0
commit
066315f36a
32
layers/chandler/layer.js
Normal file
32
layers/chandler/layer.js
Normal file
|
@ -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;
|
16
layers/chandler/pin.svg
Normal file
16
layers/chandler/pin.svg
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 384 512"
|
||||||
|
width="40px"
|
||||||
|
height="30px"
|
||||||
|
version="1.1"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
||||||
|
<path
|
||||||
|
d="m 384,192 c 0,87.4 -117,243 -168.3,307.2 -12.3,15.3 -35.1,15.3 -47.4,0 C 116.1,435 0,279.4 0,192 0,85.96 85.96,0 192,0 245.96029,0 294.73775,22.275796 329.62577,58.136607 363.27205,92.721042 384,139.94065 384,192 Z"
|
||||||
|
style="fill:#00f;fill-opacity:1" />
|
||||||
|
</svg>
|
After Width: | Height: | Size: 848 B |
|
@ -2,6 +2,7 @@ import TileLayer from 'ol/layer/Tile';
|
||||||
import OSM from 'ol/source/OSM';
|
import OSM from 'ol/source/OSM';
|
||||||
import Stamen from 'ol/source/Stamen.js';
|
import Stamen from 'ol/source/Stamen.js';
|
||||||
|
|
||||||
|
import chandlerLayer from './chandler/layer.js';
|
||||||
import amtrakLayer from './amtrak/layer.js';
|
import amtrakLayer from './amtrak/layer.js';
|
||||||
import arenasLayer from './nhl-arenas/layer.js';
|
import arenasLayer from './nhl-arenas/layer.js';
|
||||||
import menardsLayer from './menards/layer.js';
|
import menardsLayer from './menards/layer.js';
|
||||||
|
@ -53,6 +54,11 @@ const layerCategories = [
|
||||||
{
|
{
|
||||||
name: "Overlays",
|
name: "Overlays",
|
||||||
layers: [
|
layers: [
|
||||||
|
{
|
||||||
|
name: "Chandler",
|
||||||
|
enabled: true,
|
||||||
|
layer: chandlerLayer,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Amtrak Routes",
|
name: "Amtrak Routes",
|
||||||
layer: amtrakLayer,
|
layer: amtrakLayer,
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
export default {
|
export default {
|
||||||
build: {
|
build: {
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
|
target: 'es2022',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue