add satellite basemap

ralfhauser · Aug 13, 2018 · 0e02f15 · 0e02f15
1 parent 8ab2bb6
commit 0e02f15
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 24 deletions.
diff --git a/code/src/app/map/map.component.css b/code/src/app/map/map.component.css
@@ -3,3 +3,10 @@
   height: 100%;
   width: 100%;
 }
+.map-bottom-right {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding-right: 10px;
+  padding-bottom: 30px;
+}
diff --git a/code/src/app/map/map.component.html b/code/src/app/map/map.component.html
@@ -1 +1,8 @@
 <div id="map"></div>
+<div class='map-bottom-right'>
+    <div class="mapboxgl-ctrl mapboxgl-ctrl-group">
+      <button title="change basemap" type="button" aria-label="Change basemap" (click)="toggleBasemap()"><i class="material-icons">
+        layers
+      </i></button>
+    </div>
+</div>
diff --git a/code/src/app/map/map.component.ts b/code/src/app/map/map.component.ts
@@ -15,6 +15,8 @@ import {EMPTY_LINESTRING} from '../../assets/defaultData';
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.css']
 })
+
+
 export class MapComponent implements OnInit {
   private map;
   private fountains = [];
@@ -24,9 +26,11 @@ export class MapComponent implements OnInit {
   private userMarker;
   private geolocator;
   private navControl;
+  private basemapControl;
   private lastZoomLocation:Array<number> = [];
   private navigationLine;
   private directionsGeoJson = EMPTY_LINESTRING;
+  private satelliteShown=false;
   @select() showList;
   @select() mode;
   @select() fountainId;
@@ -124,29 +128,30 @@ export class MapComponent implements OnInit {
       ))
       // .on('click',()=>this.deselectFountain())  // is it necessary to disable event bubbling on markers?
       .on('load',()=>{
-        // load fountains if available
-        let fountains = this.dataService.fountainsAll;
-        if(fountains){
-          this.loadData(fountains);
-        }
-      });
-      // Add navigation control to map
-      this.navControl = new M.NavigationControl({
-        showCompass: false
-      });
-      this.map.addControl(this.navControl, 'top-left');
+      // load fountains if available
+      let fountains = this.dataService.fountainsAll;
+      if(fountains){
+        this.loadData(fountains);
+      }
+    });
 
-      // Add geolocate control to the map.
-      this.geolocator = new M.GeolocateControl({
-        positionOptions: {
-          enableHighAccuracy: true
-        },
-        fitBoundsOptions: {
-          maxZoom: this.mc.map.maxZoom
-        },
-        trackUserLocation: true
-      });
-      this.map.addControl(this.geolocator);
+    // Add navigation control to map
+    this.navControl = new M.NavigationControl({
+      showCompass: false
+    });
+    this.map.addControl(this.navControl, 'top-left');
+
+    // Add geolocate control to the map.
+    this.geolocator = new M.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true
+      },
+      fitBoundsOptions: {
+        maxZoom: this.mc.map.maxZoom
+      },
+      trackUserLocation: true
+    });
+    this.map.addControl(this.geolocator);
 
     this.geolocator.on('geolocate',(position)=>{
       this.setUserLocation([position.coords.longitude, position.coords.latitude]);
@@ -388,7 +393,11 @@ showSelectedPopupOnMap(fountain:Feature<any>){
         "layout": {
           "icon-image": "drinking-water-15",
           "icon-padding": 0,
-          "icon-allow-overlap":true
+          // "icon-allow-overlap":true,
+          // "text-field": ["get", "name"],
+          // "text-size": 8,
+          // "text-optional": true,
+          // "text-offset": [0,2]
         },
         "paint":{
           "icon-opacity": [
@@ -442,4 +451,13 @@ showSelectedPopupOnMap(fountain:Feature<any>){
       //   }
       // })
   }
+
+  toggleBasemap(){
+    this.satelliteShown = !this.satelliteShown;
+    if (this.satelliteShown){
+      this.map.setLayoutProperty('mapbox-satellite', 'visibility', 'visible')
+    }else{
+      this.map.setLayoutProperty('mapbox-satellite', 'visibility', 'none')
+    }
+  }
 }
diff --git a/code/src/app/map/map.config.ts b/code/src/app/map/map.config.ts
@@ -11,7 +11,8 @@ export class MapConfig {
     minZoom:  11,
     maxZoom:  18,
     zoomAfterDetail:  15,
-    style: 'mapbox://styles/water-fountains/cjdfuslg5ftqo2squxk76q8pl',
+    style: 'mapbox://styles/water-fountains/cjkspc6ad1zh22sntedr63ivh',
+    style_gray: 'mapbox://styles/water-fountains/cjdfuslg5ftqo2squxk76q8pl',
     hash: false,
     pitchWithRotate: true,
   };