Merge pull request #931 from mapbox/as/add-3d-buildings-toggle

Add 3d buildings toggle

Author: AndrewSepic

src/constants.js

@@ -3,5 +3,6 @@ module.exports = {
   DEFAULT_STYLE: 'Standard',
   DEFAULT_DARK_FEATURE_COLOR: '#555',
   DEFAULT_LIGHT_FEATURE_COLOR: '#e8e8e8',
-  DEFAULT_SATELLITE_FEATURE_COLOR: '#00f900'
+  DEFAULT_SATELLITE_FEATURE_COLOR: '#00f900',
+  DEFAULT_3D_BUILDINGS: true
 };

src/css/site.css

@@ -105,11 +105,17 @@ button {
 
 .top button.active,
 .layer-switch button.active,
-.projection-switch button.active {
+.projection-switch button.active,
+.toggle-3D button.active {
   background: #34495e;
   color: #fff;
 }
 
+.toggle-3D.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
 button.major {
   padding: 5px;
   border-radius: 3px;

src/ui.js

@@ -3,7 +3,8 @@ const buttons = require('./ui/mode_buttons'),
   dnd = require('./ui/dnd'),
   // userUi = require('./ui/user'),
   layer_switch = require('./ui/layer_switch'),
-  projection_switch = require('./ui/projection_switch');
+  projection_switch = require('./ui/projection_switch'),
+  toggle_3d = require('./ui/3d-buildings-toggle');
 
 module.exports = ui;
 
@@ -24,7 +25,18 @@ function ui(context) {
         'map grow shrink-0 top-0 bottom-0 left-0 basis-0 transition-all duration-300'
       )
       .call(layer_switch(context))
-      .call(projection_switch(context));
+      .call(projection_switch(context))
+      .call(toggle_3d(context));
+
+    // After context.map() is created and available, add the 3D toggle UI
+    // setTimeout(() => {
+    //   const mapInstance = typeof context.map === 'function' ? context.map() : context.map;
+    //   if (mapInstance && typeof mapInstance.on === 'function') {
+    //     mapInstance.on('load', () => {
+    //       d3.select('#map').call(toggle_3d(context));
+    //     });
+    //   }
+    // }, 0);
 
     // sidebar handle
     map

src/ui/3d-buildings-toggle.js

@@ -0,0 +1,51 @@
+module.exports = function (context) {
+  return function (selection) {
+    const Buildings3D = [
+      {
+        label: 'Show',
+        value: true
+      },
+      {
+        label: 'Hide',
+        value: false
+      }
+    ];
+
+    const container3D = selection
+      .append('div')
+      .attr(
+        'class',
+        'toggle-3D absolute left-0 bottom-0 mb-16 text-xs transition-all duration-200 z-10'
+      );
+
+    container3D
+      .append('span')
+      .attr('class', 'bg-white p-[4px]')
+      .text('3D Buildings');
+
+    const buttons3D = container3D.selectAll('button').data(Buildings3D);
+
+    const set3DBuildings = function () {
+      const clicked = this instanceof d3.selection ? this.node() : this;
+
+      buttons3D.classed('active', function () {
+        return clicked === this;
+      });
+
+      if (context.map._loaded) {
+        const { value } = d3.select(clicked).datum();
+        context.map.setConfigProperty('basemap', 'show3dObjects', value);
+        context.storage.set('3DBuildings', value);
+      }
+    };
+
+    buttons3D
+      .enter()
+      .append('button')
+      .attr('class', 'pad0x')
+      .on('click', set3DBuildings)
+      .text((d) => {
+        return d.label;
+      });
+  };
+};

src/ui/layer_switch.js

@@ -32,6 +32,16 @@ module.exports = function (context) {
         context.data.set({
           mapStyleLoaded: true
         });
+
+        // Update toggle visibility based on new style
+        setTimeout(() => {
+          const toggle3D = d3.select('.toggle-3D');
+          const shouldHide3DForStyle =
+            title === 'OSM' ||
+            title === 'Outdoors' ||
+            title === 'Standard Satellite';
+          toggle3D.classed('hidden', shouldHide3DForStyle);
+        }, 100);
       }
     };
 

src/ui/map/index.js

@@ -18,7 +18,8 @@ const {
   DEFAULT_PROJECTION,
   DEFAULT_DARK_FEATURE_COLOR,
   DEFAULT_LIGHT_FEATURE_COLOR,
-  DEFAULT_SATELLITE_FEATURE_COLOR
+  DEFAULT_SATELLITE_FEATURE_COLOR,
+  DEFAULT_3D_BUILDINGS
 } = require('../../constants');
 const drawStyles = require('../draw/styles');
 
@@ -362,21 +363,58 @@ module.exports = function (context, readonly) {
 
         geojsonToLayer(context, writable);
 
+        // Initialize 3D buildings state from localStorage after style is loaded
+        // This can't live in `ui/3d-buildings-toggle.js because we have to wait for the map style to be loaded
+        const hasKey = context.storage.get('3DBuildings') !== undefined;
+        const active3DBuildings = hasKey
+          ? context.storage.get('3DBuildings')
+          : DEFAULT_3D_BUILDINGS;
+        if (context.map.getConfigProperty) {
+          context.map.setConfigProperty(
+            'basemap',
+            'show3dObjects',
+            active3DBuildings
+          );
+        }
+        // Update the UI to reflect the active state
+        d3.selectAll('.toggle-3D button').classed('active', function () {
+          const { value } = d3.select(this).datum();
+          return value === active3DBuildings;
+        });
+
         context.data.set({
           mapStyleLoaded: false
         });
       }
     });
 
     // only show projection toggle on zoom < 6
-    context.map.on('zoomend', () => {
+    // only show 3d Buildings toggle on Zoom > 14
+    function updateTogglesByZoom() {
       const zoom = context.map.getZoom();
+      const projectionSwitch = d3.select('.projection-switch');
+      const toggle3D = d3.select('.toggle-3D');
+
+      // Get current style to check if 3D buildings should be hidden
+      const currentStyle = context.storage.get('style') || DEFAULT_STYLE;
+      const shouldHide3DForStyle =
+        currentStyle === 'OSM' ||
+        currentStyle === 'Outdoors' ||
+        currentStyle === 'Standard Satellite';
+
       if (zoom < 6) {
-        d3.select('.projection-switch').style('opacity', 1);
+        projectionSwitch.style('opacity', 1);
+        toggle3D.classed('hidden', true);
+      } else if (zoom > 6 && zoom < 14) {
+        projectionSwitch.style('opacity', 0);
+        toggle3D.classed('hidden', true);
       } else {
-        d3.select('.projection-switch').style('opacity', 0);
+        // Hide 3D toggle for OSM and Outdoors styles, regardless of zoom
+        toggle3D.classed('hidden', shouldHide3DForStyle);
       }
-    });
+    }
+    context.map.on('load', () => updateTogglesByZoom());
+    context.map.on('zoomend', () => updateTogglesByZoom());
 
     const maybeSetCursorToPointer = () => {
       if (context.Draw.getMode() === 'simple_select') {

src/ui/map/styles.js

@@ -1,12 +1,7 @@
 module.exports = [
   {
     title: 'Standard',
-    style: 'mapbox://styles/mapbox/standard',
-    config: {
-      basemap: {
-        show3dObjects: false
-      }
-    }
+    style: 'mapbox://styles/mapbox/standard'
   },
   {
     title: 'Standard Satellite',
@@ -17,7 +12,6 @@ module.exports = [
     style: 'mapbox://styles/mapbox/standard',
     config: {
       basemap: {
-        show3dObjects: false,
         theme: 'monochrome'
       }
     }
@@ -27,7 +21,6 @@ module.exports = [
     style: 'mapbox://styles/mapbox/standard',
     config: {
       basemap: {
-        show3dObjects: false,
         theme: 'monochrome',
         lightPreset: 'night'
       }