",
- class_name: "target-pin"
- }
- }]
- end
end
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 0bf4b717..0777ea25 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -18,7 +18,8 @@ import 'bootstrap';
// Fontawesome: https://fontawesome.com/
import "@fortawesome/fontawesome-free/js/all";
-import * as L from "leaflet"
+import * as L from "leaflet";
+import "leaflet/dist/leaflet.css";
Rails.start()
Turbolinks.start()
diff --git a/app/javascript/packs/building_map.js b/app/javascript/packs/building_map.js
new file mode 100644
index 00000000..e19c30aa
--- /dev/null
+++ b/app/javascript/packs/building_map.js
@@ -0,0 +1,73 @@
+import { displayRoute, setupMap } from './leafletMap.js';
+
+let currentLocation;
+const YOUR_LOCATION_MAGIC_STRING = "Your location" // This will be changed when the page supports multiple languages
+
+setupMap();
+
+const start_input_field = $("#start_input")[0];
+start_input_field.addEventListener("change", () => {
+ request_location();
+ if (validate_place_input("start_input", "startOptions")) {
+ start_input_field.setCustomValidity("");
+ } else {
+ start_input_field.setCustomValidity(
+ "Please select a valid starting place."
+ );
+ }
+});
+start_input_field.dispatchEvent(new Event("change"));
+
+const dest_input_field = $("#dest_input")[0];
+dest_input_field.addEventListener("change", () => {
+ if (validate_place_input("dest_input", "destOptions")) {
+ dest_input_field.setCustomValidity("");
+ } else {
+ dest_input_field.setCustomValidity(
+ "Please select a valid destination place."
+ );
+ }
+});
+dest_input_field.dispatchEvent(new Event("change"));
+
+$("#navigation_form")[0]
+ .addEventListener("submit", (event) => {
+ event.preventDefault();
+ if (start_input_field.value === YOUR_LOCATION_MAGIC_STRING) {
+ start_input_field.value = currentLocation;
+ }
+ const start = start_input_field.value;
+ const dest = dest_input_field.value;
+ displayRoute(start, dest);
+ });
+
+function validate_place_input(inputId, optionsId) {
+ const input = $(`#${inputId}`)[0];
+ const options = $(`#${optionsId}`)[0].options;
+ return Array.from(options).some((o) => o.value === input.value);
+}
+
+function request_location() {
+ if (start_input_field.value !== YOUR_LOCATION_MAGIC_STRING) return;
+ navigator.geolocation.getCurrentPosition(
+ (pos) => {
+ currentLocation =
+ String(pos.coords.latitude) +
+ "," +
+ String(pos.coords.longitude);
+ start_input_field.setCustomValidity("");
+ },
+ (error) => {
+ console.warn(`ERROR(${error.code}): ${error.message}`);
+ if (error.code === GeolocationPositionError.PERMISSION_DENIED) {
+ start_input_field.setCustomValidity(
+ "You have to grant your browser the permission to access your location if you want to use this feature."
+ );
+ } else {
+ start_input_field.setCustomValidity(
+ "Your browser could not determine your position. Please choose a different starting place."
+ );
+ }
+ }
+ );
+}
diff --git a/app/javascript/packs/leafletMap.js b/app/javascript/packs/leafletMap.js
new file mode 100644
index 00000000..3b306889
--- /dev/null
+++ b/app/javascript/packs/leafletMap.js
@@ -0,0 +1,151 @@
+let map;
+let routeLayer;
+
+export async function setupMap() {
+ map = L.map("map");
+ L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+ attribution:
+ '© OpenStreetMap',
+ maxZoom: 19,
+ }).addTo(map);
+
+ const [view, buildingPolygons, buildingMarkers] = await Promise.all([
+ getView(),
+ getBuildings(),
+ getBuildingMarkers(),
+ ]);
+
+ setView(view);
+ addTargetMarker();
+ addPolygons(buildingPolygons);
+ addMarkers(buildingMarkers);
+
+ // Add indoor labels
+ loadGeoJsonFile("assets/lecture-hall-building.geojson");
+ map.on("zoomend", recalculateTooltipVisibility);
+}
+
+function addTargetMarker() {
+ const params = new URLSearchParams(window.location.search);
+ if (!params.has("target")) return
+ const target = params.get("target");
+ const coordinates = target.split(",");
+
+ const marker = {
+ latlng: coordinates,
+ divIcon: {
+ html: "",
+ className: "target-pin",
+ },
+ };
+ addMarker(marker, map);
+ setView({latlng: coordinates, zoom: 19});
+}
+
+export function setView(view) {
+ map.setView(view["latlng"], view["zoom"]);
+}
+
+export function addPolygons(polygons) {
+ polygons.forEach((polygon) => {
+ L.polygon(polygon["latlngs"], polygon["options"]).addTo(map);
+ });
+}
+
+export function addMarkers(markers, layer = map) {
+ markers.forEach((marker) => {
+ addMarker(marker, layer);
+ });
+}
+
+export function addMarker(marker, layer = map) {
+ marker["divIcon"]["iconSize"] = [];
+ marker["divIcon"]["iconAnchor"] = [0, 0];
+ marker["divIcon"]["popupAnchor"] = [0, 0];
+ const icon = L.divIcon(marker["divIcon"]);
+ L.marker(marker["latlng"], { icon: icon }).addTo(layer);
+}
+
+export function addPolylines(polylines, layer = map) {
+ polylines.forEach((polyline) => {
+ addPolyline(polyline, layer);
+ });
+}
+
+export function addPolyline(polyline, layer = map) {
+ L.polyline(polyline["latlngs"], polyline["options"]).addTo(layer);
+}
+
+export async function displayRoute(start, dest) {
+ const route = await $.ajax({
+ type: "GET",
+ url: "/building_map/route",
+ data: `start=${start}&dest=${dest}`,
+ dataType: "json",
+ });
+ if (routeLayer) routeLayer.clearLayers();
+ else routeLayer = L.layerGroup();
+ addPolyline(route["polyline"], routeLayer);
+ addMarkers([route["marker"]], routeLayer);
+ routeLayer.addTo(map);
+}
+
+async function getBuildings() {
+ return $.ajax({
+ type: "GET",
+ url: "/building_map/buildings",
+ dataType: "json",
+ });
+}
+
+async function getBuildingMarkers() {
+ return $.ajax({
+ type: "GET",
+ url: "/building_map/markers",
+ dataType: "json",
+ });
+}
+
+async function getView() {
+ return $.ajax({
+ type: "GET",
+ url: "/building_map/view",
+ dataType: "json",
+ });
+}
+
+function addIndoorLabel(feature, layer) {
+ layer.bindTooltip(feature.properties.name, {
+ permanent: true,
+ direction: "center",
+ className: "indoor-label",
+ });
+}
+
+function loadGeoJsonFile(filename) {
+ fetch(filename)
+ .then((response) => response.json())
+ .then((geojsonFeatureCollection) => {
+ // Manually add indoor labels to map
+ const rooms = L.geoJSON(geojsonFeatureCollection, {
+ onEachFeature: addIndoorLabel,
+ }).addTo(map);
+ rooms.eachLayer((layer) => {
+ layer.getTooltip().setLatLng(layer.getBounds().getCenter());
+ });
+ recalculateTooltipVisibility();
+ });
+}
+
+function recalculateTooltipVisibility() {
+ const zoomLevel = map.getZoom();
+ map.eachLayer((layer) => {
+ if (layer.getTooltip()) {
+ if (zoomLevel == 19 /* nearest zoom */) {
+ layer.openTooltip(layer.getBounds().getCenter());
+ } else {
+ layer.closeTooltip();
+ }
+ }
+ });
+}
diff --git a/app/views/building_map/index.html.erb b/app/views/building_map/index.html.erb
index a51cf344..5a8edd6f 100644
--- a/app/views/building_map/index.html.erb
+++ b/app/views/building_map/index.html.erb
@@ -15,12 +15,12 @@
Opening Times:
diff --git a/config/initializers/leaflet.rb b/config/initializers/leaflet.rb
deleted file mode 100644
index 45363466..00000000
--- a/config/initializers/leaflet.rb
+++ /dev/null
@@ -1,3 +0,0 @@
-Leaflet.tile_layer = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-Leaflet.attribution = '© OpenStreetMap'
-Leaflet.max_zoom = 19
diff --git a/config/routes.rb b/config/routes.rb
index a92fcf46..cea10897 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -18,6 +18,10 @@
get '/login', to: 'welcome#login'
get '/building_map', to: 'building_map#index'
+ get '/building_map/route', to: 'building_map#route'
+ get '/building_map/markers', to: 'building_map#markers'
+ get '/building_map/buildings', to: 'building_map#buildings'
+ get '/building_map/view', to: 'building_map#view'
# '/search_results'
get '/search_results', to: 'search_results#index'
diff --git a/spec/features/building_map_spec.rb b/spec/features/building_map_spec.rb
index 4862fb7e..a54033de 100644
--- a/spec/features/building_map_spec.rb
+++ b/spec/features/building_map_spec.rb
@@ -28,18 +28,21 @@
it "highlights buildings on the map", js: true do
visit building_map_path
+ page.assert_selector('path.building', count: 15, wait: 5)
expect(page).to have_css(".leaflet-interactive")
expect(page).to have_selector("path.building", count: 15)
end
- it "separates HPI and Uni-Potsdam buildings" do
+ it "separates HPI and Uni-Potsdam buildings", js: true do
visit building_map_path
+ page.assert_selector('path.hpi-building', minimum: 1, wait: 5)
expect(page).to have_selector("path.hpi-building", count: 13)
expect(page).to have_selector("path.uni-potsdam-building", count: 2)
end
it "shows the name of the HPI buildings", js: true do
visit building_map_path
+ page.assert_selector("div.building-icon", minimum: 13, wait: 5)
expect(page).to have_css(".leaflet-marker-pane")
expect(page).to have_css(".leaflet-marker-icon")
expect(page).to have_selector("div.building-icon", minimum: 13)
@@ -47,31 +50,56 @@
it "shows the pin of a target point", js: true do
visit building_map_path(target: "52.393913,13.133082")
- expect(page).to have_css('.target-pin')
+ find(".target-pin", wait: 5)
+ expect(page).to have_css(".target-pin")
end
- context "with route" do
- it "shows a calculated route", js: true do
- visit building_map_path(start: "52.393913,13.133082", dest: "52.393861,13.129606")
- expect(page).to have_css(".routing-path")
- end
+ it "shows no route, if it's not requested", js: true do
+ visit building_map_path
+ expect(page).not_to have_css(".routing-path")
+ expect(page).not_to have_css(".time-icon")
+ end
+
+ it "renders the map with all special features", js: true do
+ visit building_map_path
+ expect(page).to have_css("#map")
+ expect(page).to have_css(".leaflet-container")
+ page.assert_selector("path.building", count: 15, wait: 5)
+ expect(page).to have_selector("path.hpi-building", count: 13)
+ expect(page).to have_selector("div.building-icon", minimum: 13)
+ expect(page).to have_selector("path.uni-potsdam-building", count: 2)
+ end
- it "shows no route, if it's not requested", js: true do
+ # Following tests might be inconsistent when run on GitHub Actions.
+ context "with route", inconsistent: true, local_only: true do
+ before do
visit building_map_path
- expect(page).not_to have_css(".routing-path")
- expect(page).not_to have_css(".time-icon")
+ find("#nav-link-navigation").click
+ fill_in 'start', with: 'Haus A'
+ fill_in 'dest', with: 'Haus L'
+ click_on 'Go'
end
- it "shows no route, if not all necessary parameters are provided", js: true do
- visit building_map_path(start: "52.393913,13.133082")
- expect(page).not_to have_css(".routing-path")
- expect(page).not_to have_css(".time-icon")
+ it "shows a calculated route", js: true do
+ find(".routing-path", wait: 15)
+ expect(page).to have_css(".routing-path")
end
it "shows the time of a calculated route", js: true do
- visit building_map_path(start: "52.393913,13.133082", dest: "52.393861,13.129606")
+ find(".time-icon", wait: 15)
expect(page).to have_css(".time-icon")
end
+
+ it "only shows one route at the time", js: true do
+ find(".routing-path", wait: 15)
+ expect(page).to have_css(".routing-path", count: 1)
+ fill_in 'start', with: 'Haus A'
+ fill_in 'dest', with: 'Haus L'
+ click_on 'Go'
+ find(".routing-path", wait: 5)
+ expect(page).to have_css(".routing-path", count: 1)
+ end
+
end
end
end