Add mock data for layers and soft stories #95
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 tasks
nickvisut
force-pushed
the
feature/add-mapbox-gl-layers
branch
from
002714b to
b994553
Compare
5 tasks
nickvisut
force-pushed
the
feature/add-mapbox-gl-layers
branch
3 times, most recently
from
7c9fd84 to
999193d
Compare
nickvisut
changed the title
nickvisut
force-pushed
the
feature/add-mapbox-gl-layers
branch
from
999193d to
9b0234c
Compare
nickvisut
commented
Nov 24, 2024
| import tsunamiData from "../../tsunami-11212024.json"; | ||
| import softStoriesData from "../../soft-stories-11232024.json"; | ||
|
|
||
| const typedSeismicData: FeatureCollection<Geometry> = |
There was a problem hiding this comment.
pulling in mock data
nickvisut
commented
Nov 24, 2024
| .addTo(map); | ||
|
|
||
| softStories.forEach(({ lng, lat }) => { | ||
| const el = document.createElement("div"); | ||
| // Add sources |
nickvisut
commented
Nov 24, 2024
| data: typedSoftStoriesData, | ||
| }); | ||
|
|
||
| // Add layers |
nickvisut
commented
Nov 24, 2024
| @@ -1,3 +1,4 @@ | |||
| /* TODO: line up property values with ./theme.ts OR add automation that outputs design tokens for both CSS (SCSS?) and TS */ | |||
There was a problem hiding this comment.
this file is just comment changes and autoformatting; can ignore
|
Looks good to me! However, I'm wondering if we should display the pin (Mapbox marker) before the user searches for an address. What do you think? |
You're right, the marker is just a mock one to match the original task. Once search is in, it'll def not show up until a search is done. |
Co-authored by: AdamFinkle <[email protected]>
Co-authored by: AdamFinkle <[email protected]>
… address marker dragging
nickvisut
force-pushed
the
feature/add-mapbox-gl-layers
branch
from
2f910d1 to
b221269
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WARNING: This PR depends on #88 being merged in first. Blocked by #88.Description
This PR introduces Mapbox layers for seismic and tsunami data. It also replaces Mapbox markers with a Mapbox layer for soft stories. This data should be considered unvetted mock data regardless of resemblance to final data. Its usage is intended as a tech demo until it is reviewed at a later date.
The method of integration is through direct imports for ease of use while using the "mock" or placeholder data. It will likely be grabbed from the back end and passed in through props in a future PR.
Type of changes
Testing
How to test
Run app locally.
Compare styling of layers and soft stories dots to Figma.
Here are some screenshots:
Here is the Figma for comparison:
https://www.figma.com/design/AGadwQcQH5kNn2D93TVOAC/Design?node-id=503-1542&t=GEGeRaMT0ZpP8Mk8-4
Please also refer to requirements in #92, also linked in the right panel under "Development".