Skip to content

Commit f2262a4

Browse files
mcakesmcakes
committed
Update fantasy sixty six
1 parent a503dff commit f2262a4

File tree

16 files changed

+1873
-206
lines changed

16 files changed

+1873
-206
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_Store
2+
node_modules/

‎fantasysixtysix/index.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<html>
2+
<head>
3+
<title>Fantasy Sixty-Six</title>
4+
<link
5+
rel="stylesheet"
6+
href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
7+
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
8+
crossorigin
9+
/>
10+
<link rel="preconnect" href="https://fonts.googleapis.com" />
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
14+
rel="stylesheet"
15+
/>
16+
<link rel="stylesheet" href="./style.css" crossorigin />
17+
<script
18+
src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
19+
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
20+
crossorigin
21+
></script>
22+
23+
<!-- <style>
24+
html,
25+
body {
26+
height: 100%;
27+
margin: 0;
28+
}
29+
.leaflet-container {
30+
height: 800px;
31+
width: 1000px;
32+
max-width: 100%;
33+
max-height: 100%;
34+
}
35+
</style> -->
36+
</head>
37+
38+
<body>
39+
<!-- <header class="toolbar">
40+
<label for="tile-selector">Tileset</label>
41+
<select id="tile-selector" onchange="updateTile(this.value)">
42+
<option value="street">Street</option>
43+
<option value="terrain">Terrain</option>
44+
<option value="satellite">Satellite</option>
45+
</select>
46+
</header> -->
47+
<!-- <div class="slidecontainer">
48+
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
49+
</div> -->
50+
<div id="map-container"></div>
51+
<script src="./trip.js" type="module"></script>
52+
</body>
53+
</html>

‎fantasysixtysix/locations.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export const locations = [
2+
{ timestamp: "2022-05-14", lat: 47.22797, lng: -79.9651 },
3+
{ timestamp: "2022-05-15", lat: 47.22788, lng: -79.96519 },
4+
{ timestamp: "2022-05-16", lat: 47.22794, lng: -79.96509 },
5+
{ timestamp: "2022-05-17", lat: 47.22773, lng: -79.96554 },
6+
{ timestamp: "2022-05-18", lat: 47.228, lng: -79.96514 },
7+
{ timestamp: "2022-05-19", lat: 46.31801, lng: -79.46781 },
8+
{ timestamp: "2022-05-23", lat: 47.39419, lng: -80.68654 },
9+
{ timestamp: "2022-05-24", lat: 47.39456, lng: -80.6644 },
10+
{ timestamp: "2022-05-25", lat: 47.39461, lng: -80.66455 },
11+
{ timestamp: "2022-05-26", lat: 47.39467, lng: -80.6646 },
12+
];

‎fantasysixtysix/package-lock.json

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fantasysixtysix/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "fantasysixtysix",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"leaflet": "^1.8.0"
13+
}
14+
}

‎fantasysixtysix/slider.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/// <reference path="typings/index.d.ts" />
2+
3+
import { buildPath } from "./utils.js";
4+
5+
L.Control.Slider = L.Control.extend({
6+
options: {
7+
position: 'topleft',
8+
min: 0,
9+
max: 0,
10+
value: 0,
11+
},
12+
13+
onAdd: function (map) {
14+
const div = L.DomUtil.create("div");
15+
const input = L.DomUtil.create("input", "slider", div);
16+
input.type = "range";
17+
input.min = this.options.min;
18+
input.max = this.options.max;
19+
input.value = this.options.max;
20+
21+
const locations = this.options.locations;
22+
23+
this.markers = this.options.markers;
24+
this.path = this.options.path;
25+
26+
input.addEventListener("input", () => {
27+
this.markers.map(marker => map.removeLayer(marker));
28+
map.removeLayer(this.path)
29+
const [markers, path] = buildPath(locations.slice(0, input.value))
30+
this.markers = markers;
31+
this.path = path;
32+
markers.map(marker => marker.addTo(map));
33+
path.addTo(map);
34+
})
35+
36+
L.DomEvent.disableClickPropagation(div);
37+
return div;
38+
},
39+
40+
onRemove: function (map) {
41+
// Nothing to do here
42+
},
43+
});
44+
45+
L.control.slider = function (opts) {
46+
return new L.Control.Slider(opts);
47+
};

‎fantasysixtysix/style.css

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
html,
2+
body {
3+
height: 100%;
4+
margin: 0;
5+
/* font-family: Roboto; */
6+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
7+
}
8+
.toolbar {
9+
display: flex;
10+
position: absolute;
11+
12+
width: 100%;
13+
height: 1.5rem;
14+
z-index: 999;
15+
padding-left: 0.5rem;
16+
background-color: rgba(255, 255, 255, 0.2);
17+
}
18+
19+
#map-container {
20+
width: 100%;
21+
height: 100vh;
22+
/* height: calc(100% - 1rem); */
23+
}
24+
/*
25+
.toolbar select {
26+
border: none;
27+
background-color: rgba(255, 255, 255, 0.5);
28+
inset: 0 0 0 0;
29+
height: 1rem;
30+
}
31+
32+
.toolbar * {
33+
margin-top: auto;
34+
margin-bottom: auto;
35+
}
36+
37+
.toolbar label {
38+
color: rgba(0, 0, 0, 0.6)
39+
}
40+
41+
42+
43+
44+
.toolbar select option {
45+
background-color: transparent !important;
46+
border: 1px solid #e4e4e4;
47+
color: #000;
48+
-webkit-appearance: none;
49+
-moz-appearance: none;
50+
} */
51+
52+
.slider {
53+
-webkit-appearance: none;
54+
width: 100%;
55+
height: 5px;
56+
border-radius: 4px;
57+
background: #787878;
58+
outline: none;
59+
opacity: 0.5;
60+
-webkit-transition: .2s;
61+
transition: opacity .2s;
62+
}
63+
64+
.slider:hover {
65+
opacity: 0.8;
66+
}
67+
68+
.slider::-webkit-slider-thumb {
69+
-webkit-appearance: none;
70+
appearance: none;
71+
width: 15;
72+
height: 15px;
73+
border-radius: 50%;
74+
border: 1px solid black;
75+
background: #d3d3d3;
76+
cursor: pointer;
77+
78+
}
79+
80+
.slider::-moz-range-thumb {
81+
width: 15px;
82+
height: 15px;
83+
border-radius: 50%;
84+
border: 1px solid black;
85+
background: #d3d3d3;
86+
cursor: pointer;
87+
}

‎fantasysixtysix/trip.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/// <reference path="typings/index.d.ts" />
2+
3+
import "./slider.js";
4+
import { locations } from "./locations.js";
5+
import { getTilesets, buildPath } from "./utils.js";
6+
7+
const tilesets = getTilesets();
8+
9+
const map = L.map("map-container", {
10+
zoomControl: false,
11+
layers: Object.values(tilesets),
12+
}).setView([47.22797, -79.9651], 13);
13+
14+
const [markers, path] = buildPath(locations);
15+
markers.map((marker) => marker.addTo(map));
16+
path.addTo(map);
17+
18+
L.control.zoom({ position: "bottomright" }).addTo(map);
19+
L.control.layers(tilesets).addTo(map);
20+
L.control
21+
.slider({
22+
position: "topleft",
23+
min: 0,
24+
max: locations.length,
25+
locations,
26+
markers,
27+
path,
28+
map,
29+
})
30+
.addTo(map);

‎fantasysixtysix/typings.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"globalDependencies": {
3+
"leaflet": "registry:dt/leaflet#1.0.0+20170324151803"
4+
}
5+
}

0 commit comments

Comments
 (0)