vanten-s/vanten-s.com
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

New Version For TreeHug

Browse source
This commit is contained in:
vanten-s 2023-12-02 10:15:08 +01:00
parent c5cec4ce39
commit 5f30b430ff
Signed by: vanten-s
GPG key ID: DE3060396884D3F2
7 changed files with 157 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/treehug/fetch_places.js Normal file
View file

@ -0,0 +1,32 @@
fetch("./locations.json").then((locations_unparsed) => {
locations_unparsed.json().then((places) => handle_response(places));
});
function handle_response(places) {
console.log(places);
Object.keys(places).forEach(name => {
let document_element = document.createElement("li");
document_element.className = "element";
let link_element = document.createElement("a");
link_element.href = "./map.html?" + name;
link_element.innerHTML = places[name].display_name;
document_element.appendChild(link_element);
document.getElementById("search_list").appendChild(document_element);
});
}
function eliminate_results() {
let input = document.getElementById("search_bar").value;
input = input.toLowerCase();
console.log("Typed a charachter");
let x = document.getElementsByClassName('element');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
}
else {
x[i].style.display = "list-item";
}
}
}

17
src/treehug/index.html
View file

@ -1,19 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>TreeHug</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="node_modules/@googlemaps/markerclusterer/dist/index.min.js"></script>
<title>TreeHug - Search</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css" />
<link rel="icon" type="image/x-icon" href="treehug.png">
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyCneCqjzobnZ-ksYh85eosk1whovucTjQE", v: "weekly"});</script>
<script type="module" src="./index.js"></script>
<input type="text" placeholder="Search..." id="search_bar" class="search_bar" onkeyup="eliminate_results()">
<ul id="search_list"></ul>
<script src="fetch_places.js"></script>
</body>
</html>

120
src/treehug/index.js
View file

@ -58,107 +58,29 @@ function initMap() {
});
});
}
function find_places(position) {
return __awaiter(this, void 0, void 0, function () {
var _a, AdvancedMarkerElement, PinElement, InfoWindow, response, locations, infoWindow, labels, markers;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, google.maps.importLibrary("marker")];
case 1:
_a = _b.sent(), AdvancedMarkerElement = _a.AdvancedMarkerElement, PinElement = _a.PinElement;
return [4 /*yield*/, google.maps.importLibrary("maps")];
case 2:
InfoWindow = (_b.sent()).InfoWindow;
return [4 /*yield*/, fetch("https://places.googleapis.com/v1/places:searchNearby", {
method: "POST",
headers: new Headers({
"Content-Type": "application/json",
"X-Goog-Api-Key": "AIzaSyCneCqjzobnZ-ksYh85eosk1whovucTjQE",
"X-Goog-FieldMask": "places.location,places.displayName",
}),
body: JSON.stringify({
includedTypes: INCLUDED_TYPES,
maxResultCount: MAX_RESULTS.toString(),
locationRestriction: {
circle: {
center: {
latitude: position.lat,
longitude: position.lng,
},
radius: RADIUS.toString(),
},
},
})
})];
case 3:
response = _b.sent();
return [4 /*yield*/, response.json()];
case 4:
locations = _b.sent();
infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
});
console.log(locations);
labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
markers = locations["places"].map(function (element, i) {
var place = element["location"];
var latitude = place["latitude"];
var longitude = place["longitude"];
var label = labels[i % labels.length];
var pinGlyph = new google.maps.marker.PinElement({
glyph: label,
glyphColor: "white"
});
var marker = new google.maps.marker.AdvancedMarkerElement({
position: {
lat: latitude,
lng: longitude,
},
content: pinGlyph.element,
});
marker.addListener("click", function () {
infoWindow.setContent(position.lat + ", " + position.lng);
infoWindow.open(map, marker);
});
return marker;
});
// @ts-ignore
new markerClusterer.MarkerClusterer({ markers: markers, map: map });
return [2 /*return*/];
}
});
function handle_response(places) {
var place_id = document.URL.split('?')[1];
var place = places[place_id];
var place_location = { lat: place.lat, lng: place.lng };
new google.maps.Marker({
position: place_location,
map: map,
title: place.display_name,
});
}
function handle_geolocation() {
return __awaiter(this, void 0, void 0, function () {
var AdvancedMarkerElement;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, google.maps.importLibrary("marker")];
case 1:
AdvancedMarkerElement = (_a.sent()).AdvancedMarkerElement;
navigator.geolocation.getCurrentPosition(function (position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
map.setCenter(pos);
map.setZoom(15);
find_places(pos);
new AdvancedMarkerElement({
map: map,
position: pos,
title: "You",
});
});
return [2 /*return*/];
}
});
map.setCenter(place_location);
Object.keys(places).forEach(function (name) {
var document_element = document.createElement("li");
document_element.className = "element";
var link_element = document.createElement("a");
link_element.href = "./map.html?" + name;
link_element.innerHTML = places[name].display_name;
document_element.appendChild(link_element);
// @ts-ignore
document.getElementById("search_list").appendChild(document_element);
});
}
initMap().then(function () {
if (navigator.geolocation) {
handle_geolocation();
}
fetch("./locations.json").then(function (locations_unparsed) {
locations_unparsed.json().then(function (places) { return handle_response(places); });
});
});

105
src/treehug/index.ts
View file

@ -15,95 +15,32 @@ async function initMap() {
});
}
async function find_places(position: google.maps.LatLngLiteral) {
// @ts-ignore
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
let response = await fetch("https://places.googleapis.com/v1/places:searchNearby", {
method: "POST",
headers: new Headers({
"Content-Type": "application/json",
"X-Goog-Api-Key": "AIzaSyCneCqjzobnZ-ksYh85eosk1whovucTjQE",
"X-Goog-FieldMask": "places.location,places.displayName",
}),
body: JSON.stringify({
includedTypes: INCLUDED_TYPES,
maxResultCount: MAX_RESULTS.toString(),
locationRestriction: {
circle: {
center: {
latitude: position.lat,
longitude: position.lng,
},
radius: RADIUS.toString(),
},
},
})
function handle_response(places: {[index: string]: {lat: number, lng: number, display_name: string}}) {
let place_id = document.URL.split('?')[1];
let place = places[place_id];
let place_location: google.maps.LatLngLiteral = { lat: place.lat, lng: place.lng};
new google.maps.Marker({
position: place_location,
map,
title: place.display_name,
});
let locations: {places: [{location: {latitude: number, longitude: number}, displayName: {text: string}}]} = await response.json();
map.setCenter(place_location);
const infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: true,
Object.keys(places).forEach(name => {
let document_element = document.createElement("li");
document_element.className = "element";
let link_element = document.createElement("a");
link_element.href = "./map.html?" + name;
link_element.innerHTML = places[name].display_name;
document_element.appendChild(link_element);
// @ts-ignore
document.getElementById("search_list").appendChild(document_element);
});
console.log(locations);
const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let markers = locations["places"].map((element, i) => {
let place = element["location"];
let latitude = place["latitude"];
let longitude = place["longitude"];
let label = labels[i % labels.length];
const pinGlyph = new google.maps.marker.PinElement({
glyph: label,
glyphColor: "white"
});
const marker = new google.maps.marker.AdvancedMarkerElement({
position: {
lat: latitude,
lng: longitude,
},
content: pinGlyph.element,
});
marker.addListener("click", () => {
infoWindow.setContent(position.lat + ", " + position.lng);
infoWindow.open(map, marker);
});
return marker;
});
// @ts-ignore
new markerClusterer.MarkerClusterer({ markers, map });
}
async function handle_geolocation() {
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
navigator.geolocation.getCurrentPosition(
(position: GeolocationPosition) => {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
map.setCenter(pos)
map.setZoom(15);
find_places(pos);
new AdvancedMarkerElement({
map: map,
position: pos,
title: "You",
})
}
);
}
initMap().then(() => {
if (navigator.geolocation) {
handle_geolocation();
}
fetch("./locations.json").then((locations_unparsed) => {
locations_unparsed.json().then((places) => handle_response(places));
});
});

17
src/treehug/locations.json Normal file
View file

@ -0,0 +1,17 @@
{
"rana_bibliotek": {
"lat": 66.31144686667197,
"lng": 14.138761809521128,
"display_name": "Rana Bibliotek"
},
"nordland_fylkesbibliotek": {
"lat": 66.31132186276196,
"lng": 14.138815453697577,
"display_name": "Nordland Fylkesbibliotek"
},
"storhauge_start": {
"lat": 66.32937944214652,
"lng": 14.2029277866417,
"display_name": "Storhauge Start"
}
}

42
src/treehug/map.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>TreeHug - Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="node_modules/@googlemaps/markerclusterer/dist/index.min.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="icon" type="image/x-icon" href="treehug.png">
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyCneCqjzobnZ-ksYh85eosk1whovucTjQE", v: "weekly"});</script>
<script type="module" src="./index.js"></script>
<input type="text" placeholder="Search..." id="search_bar" class="search_bar" onkeyup="eliminate_results()">
<ul id="search_list"></ul>
<script>
function eliminate_results() {
let input = document.getElementById("search_bar").value;
input = input.toLowerCase();
console.log("Typed a charachter");
let x = document.getElementsByClassName('element');
for (let i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display = "none";
}
else {
x[i].style.display = "list-item";
}
}
}
</script>
</body>
</html>

19
src/treehug/style.css
View file

@ -3,8 +3,16 @@
* that contains the map.
*/
#map {
height: 100%;
width: 100%;
margin-bottom: 1em;
height: 80%;
width: 30em;
max-width: 30em;
}
.search_bar {
background-color: #313244;
border: none;
color: #cdd6f4;
}
/*
@ -13,7 +21,14 @@
body {
margin: 0;
padding: 2%;
padding-top: 1em;
height: 90%;
background-color: #1e1e2e;
color: #cdd6f4;
}
a {
color: #89dceb;
}
html {