Merge pull request #43 from historic-map-stack/notermap2

Noter frontend integration with map
kartta-labs · Dec 15, 2020 · e8b9bf1 · e8b9bf1
2 parents 6422db5 + 44c41ed
commit e8b9bf1
Show file tree

Hide file tree

Showing 4 changed files with 503 additions and 2 deletions.
diff --git a/mbgl-index.html b/mbgl-index.html
@@ -13,6 +13,7 @@
 
   <script src='./kartta-slider.js'></script>
   <link href='./kartta-slider.css' rel='stylesheet' />
+  <script src='./mbgl-photomap.js'></script>
   <script src='./mbgl-timefilter.js'></script>
   <script src="./mbgl-map.js"></script>
   <link rel="stylesheet" type="text/css" href="./mbgl-map.css" />

diff --git a/mbgl-map.css b/mbgl-map.css
@@ -108,6 +108,24 @@ canvas.mapboxgl-canvas.crosshair-cursor {
   cursor: crosshair !important;
 }
 
+.button-photo {
+  border: 1px solid #aaa;
+  padding: 5px;
+  font-weight: bold;
+  font-size: 14px;
+  border-radius: 5px;
+  background-color: white;
+}
+
+.button-photo-active {
+  background-color: grey;
+}
+
+.button-photo:hover {
+  background-color: #eeeeee;
+  cursor: pointer;
+}
+
 
 #map-wrapper {
   position: absolute;
@@ -159,14 +177,20 @@ canvas.mapboxgl-canvas.crosshair-cursor {
 
 #sidebar {
   position: absolute;
-  width: 350px;
+  width: 370px;
   top: 0;
   left: 0;
-  background-color: white;
+  background-color: #eeeeee;
   padding: 0;
   margin: 0;
 }
 
+#map-wrapper.sidebar-open #sidebar {
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
+}
+
 #search-box {
   padding-top: 8px;
   background-color: #eeeeee;
@@ -236,6 +260,21 @@ canvas.mapboxgl-canvas.crosshair-cursor {
   margin-left: 10px;
 }
 
+#search-results .photodiv {
+  margin-bottom: 1em;
+}
+
+#search-results .helpdiv {
+  margin-bottom: 100px;
+}
+#search-results .helpdiv p {
+  padding-top: 10px;
+}
+
+#search-results img {
+  border-radius: 10px;
+}
+
 #kartta-attribution {
   z-index: 100001;
   position: absolute;
@@ -246,3 +285,8 @@ canvas.mapboxgl-canvas.crosshair-cursor {
   margin-right: 5px;
   margin-bottom: 5px;
 }
+
+#search-results-results ul.unstyled {
+  list-style: none;
+  padding-inline-start: 0px ;
+}
diff --git a/mbgl-map.js b/mbgl-map.js
@@ -136,6 +136,15 @@ document.addEventListener("DOMContentLoaded", function(){
     }
   }));
 
+  map.addControl(new PhotoMapControl({
+    layer: "buildings",
+    outlineLayer: "buildings_outline",
+    editorUrl:   "https://re.city/e",
+    noterUrl: "https://re.city/nf",
+    noterApiUrl: "https://re.city/nb"
+  }));
+
+
   const layersToFilter = [
       "water",
       "buildings",
@@ -195,9 +204,11 @@ document.addEventListener("DOMContentLoaded", function(){
   searchResultsList = document.getElementById("search-results-list");
   searchResultsCloseButton = document.getElementById("search-results-close-button");
   searchResultsLoading = document.getElementById("search-results-loading");
+  sideBarContainer = document.getElementById("map-wrapper");
 
   function hideSearchResults() {
     searchResults.classList.add('kartta-hidden');
+    sideBarContainer.classList.remove("sidebar-open");
   }
 
   searchResultsCloseButton.addEventListener("click", hideSearchResults);
@@ -244,6 +255,7 @@ document.addEventListener("DOMContentLoaded", function(){
               + '&accept-language=en-US,en';
     searchResults.classList.remove('kartta-hidden');
     searchResultsLoading.classList.remove("kartta-hidden");
+    sideBarContainer.classList.add("sidebar-open")
     while (searchResultsList.firstChild) {
       searchResultsList.removeChild(searchResultsList.firstChild);
     }