Fixed import statement, implemented suggestions

package.json

@@ -61,7 +61,8 @@
     "moduleNameMapper": {
       "react-azure-maps": "<rootDir>/src/common/mocks/react-azure-maps.js",
       "azure-maps-control": "<rootDir>/src/common/mocks/azure-maps-control.js",
-      "azure-maps-indoor": "<rootDir>/src/common/mocks/azure-maps-indoor.js"
+      "azure-maps-indoor": "<rootDir>/src/common/mocks/azure-maps-indoor.js",
+      "azure-maps-drawing-tools": "<rootDir>/src/common/mocks/azure-maps-drawing-tools.js"
     }
   },
   "scripts": {

src/common/mocks/azure-maps-drawing-tools.js

@@ -0,0 +1,11 @@
+export const control = {
+    DrawingToolbar: function (options) {
+        return options;
+    }
+};
+
+export const drawing = {
+    DrawingManager: function (map, options) {
+        return [map, options];
+    }
+};

src/pages/conversion/places-preview-map/imdf-model-helpers/index.js

@@ -1,8 +1,5 @@
 import { getFeatureLabel } from '../utils';
 
-import 'azure-maps-drawing-tools/dist/atlas-drawing.min.css';
-import 'azure-maps-control/dist/atlas.min.css';
-
 // Sets polygon, line, and symbol layers to invisible
 function drawingModeChanged(allLayers) {
     allLayers.forEach(layer => {

src/pages/conversion/places-preview-map/indes.style.js

@@ -2,18 +2,18 @@ import { css } from '@emotion/css';
 
 export const mapTextWrapper = css `
   display: flex;
-  gap: 10px;
+  gap: 2rem;
 `
 
 export const imdfPreviewMapWrapper = css`
   position: relative;
   width: 100%;
-  flex: 5 1 70px;                              
+  flex: 5 1 4rem;                              
 `;
 
 export const imdfPreviewMap = css`
   width: 100%;
-  height: 500px;
+  height: 30rem;
 `;
 
 export const layerSelect = css `
@@ -22,7 +22,7 @@ export const layerSelect = css `
 `;
 
 export const textWrapper = css `
-  flex: 1 1 70px; 
+  flex: 1 1 4rem; 
   position: relative;
   display: inline;
   margin-top: 1%;

src/pages/conversion/places-preview-map/index.js

@@ -1,5 +1,5 @@
 import { Map, layer, source, control } from 'azure-maps-control';
-import * as azdraw from 'azure-maps-drawing-tools';
+import { control as draw_control, drawing } from 'azure-maps-drawing-tools';
 import { getDomain, useConversionStore, useLevelsStore, useUserStore } from 'common/store';
 import { useEffect, useMemo, useState } from 'react';
 import { DefaultButton } from '@fluentui/react';
@@ -69,35 +69,22 @@ const PlacesPreviewMap = ({ style }) => {
     });
 
     map.events.add('ready', () => {
-      var drawingToolbar = new azdraw.control.DrawingToolbar({ 
+      var drawingToolbar = new draw_control.DrawingToolbar({ 
         position: 'bottom-right', 
         style: 'light', 
         buttons: ['edit-geometry', 'erase-geometry', 'draw-polygon'] 
       });    
 
       if(selectedLayerId === 'unitButton') {
-        drawingManager = new azdraw.drawing.DrawingManager(map, {
+        drawingManager = new drawing.DrawingManager(map, {
           toolbar: drawingToolbar
         });
         unitInteractions(units, drawingManager, map);
       } else if(selectedLayerId === 'levelButton') {
-        // Retrieve information about the level currently chosen by user
-        const selectedLevelDetails = levels.features.filter(item => item.id === selectedLevel.id);
-
-        const dataSource = new source.DataSource();
-        map.sources.add(dataSource);
-        dataSource.add(selectedLevelDetails);
-
-        // Displays outline of level + change in color when cursor is hovering
-        var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
-        var lineHoverLayer = new layer.LineLayer(dataSource, null, {
-          fillColor: 'rgba(150, 50, 255, 0.2)',
-          filter: ['==', ['get', '_azureMapsShapeId'], '']
+        drawingManager = new drawing.DrawingManager(map, {
+          toolbar: drawingToolbar
         });
-
-        map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
-        grabToPointer([lineLayer, lineHoverLayer], map);
-        featureHover(lineLayer, lineHoverLayer);
+        levelInteractions(levels, drawingManager, map);
       } else if(selectedLayerId === 'footprintButton') {
         const groupedFeatures = {};
         const keys = Object.keys(groupedFeatures);
@@ -148,8 +135,8 @@ const PlacesPreviewMap = ({ style }) => {
         map.sources.add(dataSource);
         dataSource.add(levels);
 
-        lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
-        lineHoverLayer = new layer.LineLayer(dataSource, null, {
+        var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
+        var lineHoverLayer = new layer.LineLayer(dataSource, null, {
           fillColor: 'rgba(150, 50, 255, 0.2)',
           filter: ['==', ['get', '_azureMapsShapeId'], '']
         });
@@ -256,6 +243,26 @@ const PlacesPreviewMap = ({ style }) => {
       });
     }
 
+    function levelInteractions(levels, drawingManager, map) {
+      // Retrieve information about the level currently chosen by user
+      const selectedLevelDetails = levels.features.filter(item => item.id === selectedLevel.id);
+
+      const dataSource = new source.DataSource();
+      map.sources.add(dataSource);
+      dataSource.add(selectedLevelDetails);
+
+      // Displays outline of level + change in color when cursor is hovering
+      var lineLayer = new layer.LineLayer(dataSource, 'levelClick', getLineStyles('level', 'walkway'));
+      var lineHoverLayer = new layer.LineLayer(dataSource, null, {
+        fillColor: 'rgba(150, 50, 255, 0.2)',
+        filter: ['==', ['get', '_azureMapsShapeId'], '']
+      });
+
+      map.layers.add([lineLayer, lineHoverLayer], 'walkwayPolygons');
+      grabToPointer([lineLayer, lineHoverLayer], map);
+      featureHover(lineLayer, lineHoverLayer);
+    }
+
     // Cleanup function to remove the map instance when component unmounts or reinitializes
     return () => {
       map.dispose();

src/pages/conversion/places-preview-map/layer-selector/index.js

@@ -2,6 +2,14 @@ import { cx } from '@emotion/css';
 import { useState } from 'react';
 import { buttonStyle, layerSelectorWrapper, selectedButtonStyle } from './index.style';
 
+const layerButtons = [
+  // will need to add a "buildingButton" once basemap is loaded
+  {id: 'fullViewButton', text: 'full view'}, 
+  {id: 'footprintButton', text: 'footprint.geojson'},
+  {id: 'levelButton', text: 'level.geojson'},
+  {id: 'unitButton', text: 'unit.geojson'},
+];
+
 const LayerSelector = props => {
     const {onChange = () => {} } = props;
     const [selectedButtonId, setSelectedButtonId] = useState(null);
@@ -11,14 +19,6 @@ const LayerSelector = props => {
         onChange(id);
     };
 
-    const layerButtons = [
-      // will need to add a "buildingButton" once basemap is loaded
-      {id: 'fullViewButton', text: 'full view'}, 
-      {id: 'footprintButton', text: 'footprint.geojson'},
-      {id: 'levelButton', text: 'level.geojson'},
-      {id: 'unitButton', text: 'unit.geojson'},
-    ];
-
   return (
     <div className={layerSelectorWrapper}>
       {layerButtons.map(button => (

src/pages/conversion/places-preview-map/layer-selector/index.style.js

@@ -4,7 +4,8 @@ export const layerSelectorWrapper = css`
   position: absolute;
   top: 0;
   left: 0;
-  padding: 10px;
+  padding-left: 0.5rem;
+  padding-top: 3rem;
   display: flex;
   flex-direction: column;
   z-index: 100;