Add Lantäteriet map layers, move map out of global scope.

ewels · Oct 15, 2020 · fcf70d9 · fcf70d9
1 parent 9c0d870
commit fcf70d9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/app/api/_common_api.php b/app/api/_common_api.php
@@ -51,3 +51,6 @@
 $postdata = json_decode(file_get_contents("php://input"), true);
 if(is_null($postdata)) $postdata = [];
 $postdata = array_merge($_GET, $postdata);
+
+// Set a browser cookie with the lantmateriet API key
+setcookie("hc_lantmateriet_api_key", $ini_array['lantmateriet_api_key'], time()+365*24*60*60, '/');
diff --git a/app/app.js b/app/app.js
@@ -25,6 +25,7 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
   if ($cookies.get('hc_hemnet_api_key')) {
     $scope.hemnet_api_key = $cookies.get('hc_hemnet_api_key');
   }
+  $scope.lantmateriet_api_key = $cookies.get('hc_lantmateriet_api_key');
 
   // Filters
   $scope.filters = {
@@ -245,7 +246,7 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
 
 
   // Set up the map
-  angular.extend($scope, {
+  $scope.map = {
     center: {
       lat: 59.325199,
       lng: 18.071480,
@@ -258,7 +259,25 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
           name: 'OpenStreetMap',
           url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
           type: 'xyz'
-        }
+        },
+        lmtTopowebb: {
+          name: 'Lantmäteriet',
+          url: 'https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/' + $scope.lantmateriet_api_key + '/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=topowebb&STYLE=default&TILEMATRIXSET=3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fpng',
+          layerOptions: {
+            maxZoom: 15,
+            minZoom: 0
+          },
+          type: 'xyz'
+        },
+        lmtTopowebbNedtonad: {
+          name: 'Lantmäteriet - muted',
+          url: 'https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/' + $scope.lantmateriet_api_key + '/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=topowebb_nedtonad&STYLE=default&TILEMATRIXSET=3857&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fpng',
+          layerOptions: {
+            maxZoom: 15,
+            minZoom: 0
+          },
+          type: 'xyz'
+        },
       },
       overlays: {}
     },
@@ -290,7 +309,7 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
         }),
       ]
     }
-  });
+  }
 
   // Make sure that the map has the right height on the 100% height div
   // https://stackoverflow.com/a/44132780/713980
@@ -551,10 +570,8 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
       }
 
       // Update the map
-      angular.extend($scope, {
-        bounds: bounds,
-        markers: markers
-      });
+      $scope.map.bounds = bounds;
+      $scope.map.markers = markers;
 
       // Allow function to call again in 1 second
       $timeout(function () {
@@ -637,7 +654,7 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
     $scope.update_markers();
   }
   $scope.update_markers = function () {
-    angular.extend($scope, { markers: $scope.plot_markers() });
+    $scope.map.markers = $scope.plot_markers();
   }
 
   // Get the map markers
@@ -657,7 +674,7 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
       }
 
       // Wipe any existing layers
-      $scope.layers.overlays = {};
+      $scope.map.layers.overlays = {};
 
       // Plot each shape separately
       var colours = ['#3388FF', '#e7298a', '#66a61e', '#d95f02', '#7570b3'];
@@ -686,7 +703,7 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
           };
         }
         // Add to map as new layer
-        angular.extend($scope.layers.overlays, {
+        angular.extend($scope.map.layers.overlays, {
           ["commute_map_" + id]: {
             name: layer_name,
             type: 'geoJSONShape',
@@ -1032,7 +1049,7 @@ app.controller("hemnetCommuterController", ['$scope', '$compile', '$http', '$tim
   $scope.recent_ratings_click = function (house_id) {
     $scope.active_id = house_id;
     $scope.active_house = $scope.results[house_id];
-    $scope.markers[house_id].focus = true;
+    $scope.map.markers[house_id].focus = true;
   }
 
   // Sign in to Hemnet

diff --git a/app/config_defaults.ini b/app/config_defaults.ini
@@ -4,6 +4,7 @@
 traveltime_api_id = 'EXAMPLE';
 traveltime_api_key = 'EXAMPLE';
 gmap_api_key = 'EXAMPLE';
+lantmateriet_api_key = 'EXAMPLE';
 translate_target_language = 'en'; # See https://cloud.google.com/translate/docs/languages
 
 #############

diff --git a/app/index.html b/app/index.html
@@ -41,8 +41,7 @@
 
   <div class="row mr-0 h-100" style="position:relative;">
     <div ng-class="!sidebar ? 'col-md-8' : 'col-md-4'" class="px-0 h-100 order-2">
-      <leaflet bounds="bounds" lf-center="center" event-broadcast="events" markers="markers" layers="layers"
-        controls="controls" style="position: absolute; top: 0; bottom: 0; width: 100%;"></leaflet>
+      <leaflet bounds="map.bounds" lf-center="map.center" event-broadcast="map.events" markers="map.markers" layers="map.layers" controls="map.controls" style="position: absolute; top: 0; bottom: 0; width: 100%;"></leaflet>
     </div>
     <div class="col-md-4 pr-0 order-1 h-100 overflow-auto">
       <div class="container pt-3">
@@ -263,7 +262,7 @@ <h5 class="my-2"><span class="badge badge-secondary">{{ users[rating.user_id] }}
               <h6>{{ results[rating.house_id].address }}</h6>
               <div class="row">
                 <div class="col-4">
-                  <img src="{{ results[rating.house_id].image_url }}" class="w-100 mb-2">
+                  <img ng-src="{{ results[rating.house_id].image_url }}" class="w-100 mb-2">
                 </div>
                 <div class="col-8">
                   <p class="small mb-0" ng-show="results[rating.house_id].comments[rating.user_id].length">