From 5f30b430ffab946740481ce9fc4d156be1348237 Mon Sep 17 00:00:00 2001 From: vanten-s Date: Sat, 2 Dec 2023 10:15:08 +0100 Subject: [PATCH] New Version For TreeHug --- src/treehug/fetch_places.js | 32 ++++++++++ src/treehug/index.html | 17 +++-- src/treehug/index.js | 120 +++++++----------------------------- src/treehug/index.ts | 105 +++++++------------------------ src/treehug/locations.json | 17 +++++ src/treehug/map.html | 42 +++++++++++++ src/treehug/style.css | 19 +++++- 7 files changed, 157 insertions(+), 195 deletions(-) create mode 100644 src/treehug/fetch_places.js create mode 100644 src/treehug/locations.json create mode 100644 src/treehug/map.html diff --git a/src/treehug/fetch_places.js b/src/treehug/fetch_places.js new file mode 100644 index 0000000..355baf7 --- /dev/null +++ b/src/treehug/fetch_places.js @@ -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"; + } + } +} diff --git a/src/treehug/index.html b/src/treehug/index.html index a7de5e4..f4ce79f 100644 --- a/src/treehug/index.html +++ b/src/treehug/index.html @@ -1,19 +1,16 @@ - TreeHug - - + TreeHug - Search - + + + -
- - - - + + + diff --git a/src/treehug/index.js b/src/treehug/index.js index eb1eefa..eb5f904 100644 --- a/src/treehug/index.js +++ b/src/treehug/index.js @@ -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); }); + }); }); diff --git a/src/treehug/index.ts b/src/treehug/index.ts index 1c2b153..5c24ff1 100644 --- a/src/treehug/index.ts +++ b/src/treehug/index.ts @@ -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)); + }); }); diff --git a/src/treehug/locations.json b/src/treehug/locations.json new file mode 100644 index 0000000..49970ae --- /dev/null +++ b/src/treehug/locations.json @@ -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" + } +} diff --git a/src/treehug/map.html b/src/treehug/map.html new file mode 100644 index 0000000..bcc694f --- /dev/null +++ b/src/treehug/map.html @@ -0,0 +1,42 @@ + + + + TreeHug - Map + + + + + + + + + + +
+ + + + + + + + + + diff --git a/src/treehug/style.css b/src/treehug/style.css index aacb4ff..bd18ec0 100644 --- a/src/treehug/style.css +++ b/src/treehug/style.css @@ -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 {