adding get involved page #81
Conversation
|
✔️ Deploy Preview for mattapan-mapping ready! 🔨 Explore the source changes: 7f56cc1 🔍 Inspect the deploy log: https://app.netlify.com/sites/mattapan-mapping/deploys/6195dc2b5c1069000702c509 😎 Browse the preview: https://deploy-preview-81--mattapan-mapping.netlify.app/ |
| <Map mapStyle={Theme.map.dark}> | ||
| <> | ||
| <BPDADevelopmentLayer /> | ||
| {BPDA.map((data:any) => ( |
There was a problem hiding this comment.
I assume that you want to refer to BPDA.features, rather than BPDA, when iterating through coordinate pairs?
| {BPDA.map((data:any) => ( | |
| {BPDA.features.map((data:any) => ( |
There was a problem hiding this comment.
Yes I agree with above as well, BPDA.features seems like the array to iterate over to grab the coordinates
| @@ -0,0 +1,427 @@ | |||
| export const BPDA: MapGeoJsonData = { | |||
There was a problem hiding this comment.
This is fine for now, but as a heads up, based off of last week's discussions the idea is to eventually have this just straight up .json, so there is no variable declaration, exporting, etc. and the file starts and end with curly braces.
| <MapContainer> | ||
| <Map mapStyle={Theme.map.dark}> | ||
| <> | ||
| <BPDADevelopmentLayer /> |
There was a problem hiding this comment.
Since you're using Marker component straight from react-map-gl, I don't actually think you'll need this component. MapGeoJsonSource was originally really for boundary-like features (i.e looking at lots of coordinates to make a boundary) as opposed to a collection of points where each coordinate pair is a defined location
| @@ -0,0 +1,427 @@ | |||
| export const BPDA: MapGeoJsonData = { | |||
There was a problem hiding this comment.
Also - if you have an export default at the bottom, no need to use named export here. Pick either/or and this will also dictate how you import it too -
# ex. in /src/foo.ts
export const foo = {foo: 'bar'}
# then you should use this notation when importing:
import { foo } from 'src/foo';
if you use export default, it implies there is only one export from that entire file
# ex. in /src/foo.ts
const foo = {foo: 'bar'}
export default foo
# then in the other file which you import, note: no curley braces!
import foo from 'src/foo';
IMO it comes down to a stylistic preference, I don't think there's any performance or other perceived benefit one vs the other. Personally I like named export because it gives slightly more flexibility in that you can have multiple exports in one file -
# in /src/foo.ts
export const foo = {foo: 'bar'}
export const bar = {bar: 'baz'}
export const boop = {boop: 'doot'}
# now you can reference one or all three of these if you wish in the file you are importing them
import { foo, bar, boop } from 'src/foo';
| offsetTop={-10} | ||
| > | ||
| <div>You are here</div> | ||
| </Marker> |
There was a problem hiding this comment.
Something to also consider is to create an in-house MapMarkerGeoJson component (or something of the like) that glues together a layer and a 'style' - take a look here in the react-map-gl example and see how they created their own Pin component that kind of glues together an SVG paired with Marker component and that they are bound together through the id attribute
Not working yet, getting this error.