Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Downloadable GeoJSON Files with Edits + Improved GeoJSON Editor #148

Merged
merged 23 commits into from
Aug 28, 2024
Merged
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
8ded69e
Edits are saved across layer/level switches and edited geojson files …
nicoleiftekhar Aug 8, 2024
9d5bd2c
Added more features to download IMDF edits button
nicoleiftekhar Aug 8, 2024
3a9f5e6
Shifted download IMDF button to original only
nicoleiftekhar Aug 9, 2024
575eee5
Added comments to new code
nicoleiftekhar Aug 9, 2024
deedae3
Added map pop-up notification when user is in drawing polygon edit mode
nicoleiftekhar Aug 10, 2024
4d0a670
Improved geojson editor view, responds to clicks on features in viewi…
nicoleiftekhar Aug 12, 2024
158c389
Certain fields are editable + fields rearranged to fit same format
nicoleiftekhar Aug 13, 2024
ea572e9
Edits made to properties are now displayed and saved to downloadable …
nicoleiftekhar Aug 13, 2024
dab85a4
Edits made to properties in level.geojson are now displayed + saved t…
nicoleiftekhar Aug 14, 2024
4962b63
If a feature is clicked, color stays changed to indicate its chosen
nicoleiftekhar Aug 14, 2024
d2ddf71
Provided an option to deselect
nicoleiftekhar Aug 14, 2024
563814c
Fixed bug regarding clicking newly edited features
nicoleiftekhar Aug 14, 2024
e171e64
Ensured all features are deselected (color change) when a new feature…
nicoleiftekhar Aug 14, 2024
7ab4f01
Fixed bug with not being able to see geojson info immediately after e…
nicoleiftekhar Aug 15, 2024
ae47410
Caught errors for code not applicable to full view
nicoleiftekhar Aug 15, 2024
202aa28
Handling all deletion events
nicoleiftekhar Aug 15, 2024
3f1a52a
Fixed issues of map not refreshing on change by triggering useEffect
nicoleiftekhar Aug 15, 2024
c34de01
Fixed downloading IMDF bug
nicoleiftekhar Aug 15, 2024
39c4d23
Fixed bugs with map labels not updating
nicoleiftekhar Aug 15, 2024
c311dc7
Added in basemap, building.geojson view, and fixed cursor styling
nicoleiftekhar Aug 20, 2024
38b7599
Ensured FeatureCollection is in geojson
nicoleiftekhar Aug 21, 2024
687d0c3
Added comments, cleaned up code, and added functionality for saving e…
nicoleiftekhar Aug 24, 2024
3991972
Added level polygon layer
nicoleiftekhar Aug 26, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Improved geojson editor view, responds to clicks on features in viewi…
…ng mode
nicoleiftekhar committed Aug 12, 2024

Verified

This commit was signed with the committer’s verified signature.
commit 4d0a67065aa9c6c4d789402a376498ff672c3c2d
1 change: 0 additions & 1 deletion src/pages/conversion/imdf-conversion.js
Original file line number Diff line number Diff line change
@@ -105,7 +105,6 @@ const ImdfConversion = () => {
{({ height }) => <PlacesPreviewMap style={{ height }} unitsChanged={handleUnitsChange} levelsChanged={handleLevelsChange} footprintChanged={handleFootprintChange}/>}
</FillScreenContainer>
)}
{/* <JsonEditor data={units} setData={setData}></JsonEditor> */}
</div>
)}
</div>
3 changes: 1 addition & 2 deletions src/pages/conversion/places-preview-map/indes.style.js
Original file line number Diff line number Diff line change
@@ -22,10 +22,9 @@ export const layerSelect = css `
`;

export const textWrapper = css `
flex: 1 1 4rem;
flex: 1 1 5rem;
position: relative;
display: inline;
margin-top: 1%;
`;

export const textArea = css `
36 changes: 27 additions & 9 deletions src/pages/conversion/places-preview-map/index.js
Original file line number Diff line number Diff line change
@@ -2,13 +2,13 @@ import { Map, layer, source, control } from 'azure-maps-control';
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 { imdfPreviewMap, imdfPreviewMapWrapper, layerSelect, textWrapper, textArea, mapTextWrapper } from './indes.style';
import { imdfPreviewMap, imdfPreviewMapWrapper, layerSelect, textWrapper, mapTextWrapper } from './indes.style';
import LevelSelector from './level-selector';
import LayerSelector from './layer-selector';
import MapNotification from './map-notification';
import { calculateBoundingBox, getFeatureLabel, getFillStyles, getLineStyles, getTextStyle, processZip } from './utils';
import { currentEditData, groupAndSort, drawingModeChanged, writeToInfoPanel, grabToPointer, updateLevels, setFields, deleteUnitPrevEdits } from './imdf-model-helpers';
// import { JsonEditor } from 'json-edit-react'
import { currentEditData, groupAndSort, drawingModeChanged, grabToPointer, updateLevels, setFields, deleteUnitPrevEdits } from './imdf-model-helpers';
import { JsonEditor } from 'json-edit-react'
import 'azure-maps-drawing-tools/dist/atlas-drawing.min.css';
import 'azure-maps-control/dist/atlas.min.css';

@@ -20,6 +20,8 @@ const PlacesPreviewMap = ({ style, unitsChanged, levelsChanged, footprintChanged
const [units, setUnits] = useState({ features: [] });
const [levels, setLevels] = useState({ features: [] });

const [jsonData, setJsonData] = useState({});

// const [building, setBuilding] = useState({ features: [] }); // building will be used eventually
const [footprint, setFootprint] = useState({ features: [] });

@@ -50,10 +52,10 @@ const PlacesPreviewMap = ({ style, unitsChanged, levelsChanged, footprintChanged
}, [levels, selectedLevelId]);

const [selectedLayerId, setSelectedLayerId] = useState(null);

const [drawNotif, setDrawNotif] = useState(false);

useEffect(() => {

var drawingManager;

const map = new Map('azure-maps-container', {
@@ -73,7 +75,7 @@ const PlacesPreviewMap = ({ style, unitsChanged, levelsChanged, footprintChanged
var drawingToolbar;

// Resets text area when a different layer is selected
document.getElementById('infoPanel-json').value = '';
// document.getElementById('infoPanel-json').value = '';
if(selectedLayerId === 'unitButton') {
drawingToolbar = new draw_control.DrawingToolbar({
position: 'bottom-right',
@@ -136,7 +138,8 @@ const PlacesPreviewMap = ({ style, unitsChanged, levelsChanged, footprintChanged
features = map.layers.getRenderedShapes(e.position, ['unitClick', 'levelClick']);

features.forEach(function (feature) {
writeToInfoPanel(feature.data);
// writeToInfoPanel(feature.data);
setJsonData(feature.data);
});
});

@@ -387,7 +390,7 @@ const PlacesPreviewMap = ({ style, unitsChanged, levelsChanged, footprintChanged
return () => {
map.dispose();
};
}, [units, levels, footprint, selectedLevel, selectedLayerId, subscriptionKey, geography, language, imdfPackageLocation, unitsChanged, levelsChanged, footprintChanged]);
}, [units, levels, footprint, selectedLevel, selectedLayerId, subscriptionKey, geography, language, imdfPackageLocation, unitsChanged, levelsChanged, footprintChanged ]);

const handleLevelChange = levelId => {
setSelectedLevelId(levelId);
@@ -397,6 +400,10 @@ const PlacesPreviewMap = ({ style, unitsChanged, levelsChanged, footprintChanged
setSelectedLayerId(layerId);
};

const updateJsonData = (newData) => {
setJsonData(newData);
};

return (
<div>
<div className={mapTextWrapper}>
@@ -419,8 +426,19 @@ const PlacesPreviewMap = ({ style, unitsChanged, levelsChanged, footprintChanged
<div id="azure-maps-container" className={imdfPreviewMap} style={style}/>
</div>

<div id="panel" className={textWrapper}>
<textarea id="infoPanel-json" className={textArea}></textarea>
<div id="panel" className={textWrapper} style={{ maxHeight: '35rem', overflowY: 'auto' }}>
<JsonEditor
data={jsonData}
setData={updateJsonData}
rootName=""
showCollectionCount={false}
restrictDelete={true}
restrictAdd={true}
restrictEdit={true}
rootFontSize={12}
indent={2}
theme="githubLight"
/>
</div>
</div>
</div>