Skip to content

Commit a503dff

Browse files
mcakesmcakes
committed
Init freedom sixty six
1 parent 5cd3f69 commit a503dff

File tree

3 files changed

+206
-0
lines changed

3 files changed

+206
-0
lines changed

‎freedomsixtysix/index.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<html>
2+
<head>
3+
<title>Freedom 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+
<script
11+
src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
12+
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
13+
crossorigin=""
14+
></script>
15+
16+
<style>
17+
html,
18+
body {
19+
height: 100%;
20+
margin: 0;
21+
}
22+
.leaflet-container {
23+
height: 800px;
24+
width: 1000px;
25+
max-width: 100%;
26+
max-height: 100%;
27+
}
28+
</style>
29+
</head>
30+
31+
<body>
32+
<div id="map" style="width: 100%; height: 100%"></div>
33+
<!-- <script src="./trip.js" ></script> -->
34+
<script src="./trip.js" type="module"></script>
35+
<!-- <script>
36+
var map = L.map("map").setView([, -79.96510], 13);
37+
38+
var tiles = L.tileLayer(
39+
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
40+
{
41+
maxZoom: 18,
42+
attribution:
43+
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
44+
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
45+
id: "mapbox/streets-v11",
46+
tileSize: 512,
47+
zoomOffset: -1,
48+
}
49+
).addTo(map);
50+
51+
var marker = L.marker([47.22797, -79.96510])
52+
.addTo(map)
53+
.bindPopup("2022-05-15")
54+
.openPopup();
55+
56+
// var circle = L.circle([51.508, -0.11], {
57+
// color: "red",
58+
// fillColor: "#f03",
59+
// fillOpacity: 0.5,
60+
// radius: 500,
61+
// })
62+
// .addTo(map)
63+
// .bindPopup("I am a circle.");
64+
65+
// var polygon = L.polygon([
66+
// [51.509, -0.08],
67+
// [51.503, -0.06],
68+
// [51.51, -0.047],
69+
// ])
70+
// .addTo(map)
71+
// .bindPopup("I am a polygon.");
72+
73+
// var popup = L.popup()
74+
// .setLatLng([51.513, -0.09])
75+
// .setContent("I am a standalone popup.")
76+
// .openOn(map);
77+
78+
function onMapClick(e) {
79+
popup
80+
.setLatLng(e.latlng)
81+
.setContent("You clicked the map at " + e.latlng.toString())
82+
.openOn(map);
83+
}
84+
85+
map.on("click", onMapClick);
86+
</script> -->
87+
</body>
88+
</html>

‎freedomsixtysix/locations.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const locations = [
2+
{ timestamp: new Date(2022, 5, 15), lat: 47.22797, lng: -79.9651 },
3+
{ timestamp: new Date(2022, 5, 15), lat: 48.22797, lng: -79.9651 },
4+
{ timestamp: new Date(2022, 5, 15), lat: 47.22797, lng: -80.9651 },
5+
];

‎freedomsixtysix/trip.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
// const locations = [
2+
// { timestamp: new Date(2022, 5, 15), lat: 47.22797, lng: -79.9651 },
3+
// { timestamp: new Date(2022, 5, 15), lat: 48.22797, lng: -79.9651 },
4+
// { timestamp: new Date(2022, 5, 15), lat: 47.22797, lng: -80.9651 },
5+
// ];
6+
7+
import { locations } from "./locations.js";
8+
9+
function createGeoJsonTripPoints(locations) {
10+
return {
11+
type: "FeatureCollection",
12+
features: locations.map((location) => ({
13+
type: "Feature",
14+
properties: {
15+
date: location.timestamp,
16+
},
17+
geometry: {
18+
type: "Point",
19+
coordinates: [location.lng, location.lat],
20+
},
21+
})),
22+
};
23+
}
24+
25+
const map = L.map("map").setView([47.22797, -79.9651], 13);
26+
27+
const tiles = L.tileLayer(
28+
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
29+
{
30+
maxZoom: 18,
31+
attribution:
32+
'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
33+
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
34+
id: "mapbox/streets-v11",
35+
tileSize: 512,
36+
zoomOffset: -1,
37+
}
38+
).addTo(map);
39+
40+
const points = createGeoJsonTripPoints(locations)
41+
42+
L.geoJSON(points).addTo(map);
43+
// var marker = L.marker([47.22797, -79.9651])
44+
// var marker = L.marker([locations[0].lat, locations[0].lng])
45+
// .addTo(map)
46+
// .bindPopup("2022-05-15")
47+
// .openPopup();
48+
49+
// var circle = L.circle([51.508, -0.11], {
50+
// color: "red",
51+
// fillColor: "#f03",
52+
// fillOpacity: 0.5,
53+
// radius: 500,
54+
// })
55+
// .addTo(map)
56+
// .bindPopup("I am a circle.");
57+
58+
// var polygon = L.polygon([
59+
// [51.509, -0.08],
60+
// [51.503, -0.06],
61+
// [51.51, -0.047],
62+
// ])
63+
// .addTo(map)
64+
// .bindPopup("I am a polygon.");
65+
66+
// var popup = L.popup()
67+
// .setLatLng([51.513, -0.09])
68+
// .setContent("I am a standalone popup.")
69+
// .openOn(map);
70+
71+
// function onMapClick(e) {
72+
// popup
73+
// .setLatLng(e.latlng)
74+
// .setContent("You clicked the map at " + e.latlng.toString())
75+
// .openOn(map);
76+
// }
77+
78+
79+
// function createGeoJsonTripLines(locations) {
80+
// return {
81+
// “type”: “FeatureCollection”,
82+
// “features”: locations.map((stop = {}, index) => {
83+
// const prevStop = locations[index - 1];
84+
85+
// if ( !prevStop ) return [];
86+
87+
// const { placename, location = {}, date, todo = [] } = stop;
88+
// const { lat, lng } = location;
89+
// const properties = {
90+
// placename,
91+
// todo,
92+
// date
93+
// };
94+
95+
// const { location: prevLocation = {} } = prevStop;
96+
// const { lat: prevLat, lng: prevLng } = prevLocation;
97+
98+
// return {
99+
// type: ‘Feature’,
100+
// properties,
101+
// geometry: {
102+
// type: ‘LineString’,
103+
// coordinates: [
104+
// [ prevLng, prevLat ],
105+
// [ lng, lat ]
106+
// ]
107+
// }
108+
// }
109+
// })
110+
// }
111+
// }
112+
113+
// map.on("click", onMapClick);

0 commit comments

Comments
 (0)