POC Current View x Map Zoom

by Sarah Godoshian

JavaScript

/**
 * Mixin: Mapbox Zoom Display Controler
 * 
 * For toggling visibility of components 
 * and changing the source of their contnet
 * based on the Mapbox Map's current zoom level.
 **/
 
const mapZoom1 = 3.5
const mapZoom2 = 5
const mapZoom3 = 8.93
const mapZoom4 = 16

let mapZoomViewDictionary = new Map([
	[0, 'national'],
  [5, 'market'],
  [7, 'submarket'],
  [11, 'zipcode'],
  [15, 'parcel'],
]);

let mapZoomLevels = [...mapZoomViewDictionary.keys()];

let currentZoomLevel;

mapZoomLevels.forEach((zoomLevel) => {
	if (mapZoom1 >= zoomLevel) currentZoomLevel = zoomLevel;
});
console.log(mapZoom1, mapZoomViewDictionary.get(currentZoomLevel));

mapZoomLevels.forEach((zoomLevel) => {
	if (mapZoom2 >= zoomLevel) currentZoomLevel = zoomLevel;
});
console.log(mapZoom2, mapZoomViewDictionary.get(currentZoomLevel));

mapZoomLevels.forEach((zoomLevel) => {
	if (mapZoom3 >= zoomLevel) currentZoomLevel = zoomLevel;
});
console.log(mapZoom3, mapZoomViewDictionary.get(currentZoomLevel));

mapZoomLevels.forEach((zoomLevel) => {
	if (mapZoom4 >= zoomLevel) currentZoomLevel = zoomLevel;
});
console.log(mapZoom4, mapZoomViewDictionary.get(currentZoomLevel));