Pushing imdf-model-helpers and layer-selector folders

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

@@ -0,0 +1,63 @@
+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 => {
+        layer.setOptions({ visible:  false });
+    });
+}
+
+// Displays information of a feature that is being drawn/edited, at time of click
+function currentEditData(map, drawingManager) {
+    map.events.add('drawingstarted', drawingManager, (f) => {
+        if(f && f.data) {
+        var shapeId = f.data.id;
+        var geojsonData = drawingManager.getSource().getShapeById(shapeId).data;
+        document.getElementById('infoPanel-json').value = JSON.stringify(geojsonData, null, 2);
+        }
+    });
+}
+
+// Groups features together by category and filters them by levels
+function groupAndSort(units, language, selectedLevel) {
+    const groupedFeatures = {};
+    units.features
+        .filter(item => item.properties.level_id === selectedLevel.id)
+        .forEach(feature => {
+        const { category } = feature.properties;
+        if (!groupedFeatures[category]) groupedFeatures[category] = { features: [] };
+        groupedFeatures[category].features.push({
+            ...feature,
+            properties: { ...feature.properties, label: getFeatureLabel(feature, language) },
+        });
+    });
+
+    return groupedFeatures;
+}
+
+function writeToInfoPanel(geojsonData) {
+    const { map, ...obj } = geojsonData;
+    document.getElementById('infoPanel-json').value = JSON.stringify(obj, null, 2);
+}
+
+// Changes the cursor to be a pointer when a clickable feature is hovered over
+function grabToPointer(layerName, map) {
+    map.events.add('mouseover', layerName, function () {
+        map.getCanvasContainer().style.cursor = 'pointer';
+    });
+
+    map.events.add('mouseout', layerName, function () {
+        map.getCanvasContainer().style.cursor = 'grab';
+    });
+}
+
+export {
+    currentEditData,
+    groupAndSort,
+    drawingModeChanged,
+    writeToInfoPanel,
+    grabToPointer
+};

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

@@ -0,0 +1,37 @@
+import { cx } from '@emotion/css';
+import { useState } from 'react';
+import { buttonStyle, layerSelectorWrapper, selectedButtonStyle } from './index.style';
+
+const LayerSelector = props => {
+    const {onChange = () => {} } = props;
+    const [selectedButtonId, setSelectedButtonId] = useState(null);
+
+    const handleLayerClick = (id) => {
+        setSelectedButtonId(id); 
+        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 => (
+        <button
+          className={cx(buttonStyle, {[selectedButtonStyle]: selectedButtonId === button.id})}
+          id={button.id}
+          onClick={() => handleLayerClick(button.id)}
+        >
+          {button.text}
+        </button>
+      ))}   
+    </div>
+  );
+};
+
+export default LayerSelector;

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

@@ -0,0 +1,44 @@
+import { css } from '@emotion/css';
+
+export const layerSelectorWrapper = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+`;
+
+export const buttonStyle = css`
+  color: #47494b;
+  background-color: #fff;
+  box-shadow: rgba(0, 0, 0, 0.16) 0 0 4px;
+  background-size: 12px 12px;
+  position: relative;
+  user-select: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-collapse: collapse;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 10px;
+  text-align: center;
+  cursor: pointer;
+  line-height: 32px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  overflow: hidden;
+
+  &:hover {
+    color: #31acce;
+  }
+`;
+
+export const selectedButtonStyle = css`
+  background-color: #f0f0f0;
+  color: #31acce;
+`;
+
+