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 {