feat: interactive map

[mortennordseth]

This PR should include the necessary functionality to have an interactive map that can be integrated on the departures page.

TODO

• Use GeocoderFeature type
• Add map buttons
• Mobile view
• Integrate with departures page (nearest-stop-places)
• Handle screen reader for map
• Fix map layer warnings or suppress them (Should be fixed in MapBox studio)
• Tests

Screenshots

Solves https://github.com/AtB-AS/kundevendt/issues/9147

[mortennordseth]

I'm marking this as ready for review now. There is still some work to be done regarding screen readers and refactoring of CSS class names etc, but I think it would be good if you could take a look at the overall structure

[adriansberg]

The map needs to be position relative to the screen and not the container it looks like. When I clicked to show the map it appears at the top of the screen.

[mortennordseth]

The map needs to be position relative to the screen and not the container it looks like. When I clicked to show the map it appears at the top of the screen.

When fixing the interactive problem I also changed the position to fixed which solves this, @adriansberg 👍

[adriansberg]

The icon seems to be uncentered

[mikaelbr]

Hmm. Why is this so advanced? Could it be as simple as JSX.IntrinsicElements['span']?

[mortennordseth]

I meant to ask about this, but forgot. The constructor for the mapboxgl Marker expects an element of type HTMLElement and I'll get a ts error using JSX.IntrinsicElements['span'] as there are a lot more properties to that type 🤔

[mikaelbr]

Are you sure this even works? 😅 I have a hard time seeing how this would render properly. CreateElement here returns an JSON structure which react in turns renders as DOM operations at some point. But passing this to setMarker API of mapbox has no idea what to do with that JSON structure. Also the Icon path looks to be wrong?

[mortennordseth]

You are absolutely correct, this isn't working 🤦‍♂️ I'll fix it asap.

[mortennordseth]

I've solved this using React createRoot. I also added a new component, PinSvg, so that I can use the CSS fill property to set the correct color on the SVG.

[mikaelbr]

You could also do this the old fashioned way (which is actually not old, but new fashion also, but maybe an API many people don't use directly):

const pin: HTMLElement = document.createElement('img');
pin.src = '/assets/map/Pin.svg';
setMarker(pin);

[mortennordseth]

That's neat! The design says that we should use the interactive_0 color for the pin and that's not straightforward to use when using an <img /> though, is it? 🤔

[mikaelbr]

Hm.. No, but I think maybe the color of the pin isn't as important and might not be a hard require. Often in these cases I'd verify and think it over with the designer. Because it's not really interacteble and interactive_0 implies primary function. Also black is more contrast then blue interactive on some blue water for instance. So I think using map/Pin.svg is a better choice here, but like I said, I think verifying/discussing this is a good way to go

[mortennordseth]

That's true. Good point. I'll have a chat with the designer 👍

[mortennordseth]

I've talked with the designer and we'll go for the black SVG. Updated the code to use document.createElement 👍

[mikaelbr]

This happens as image inside button isn't display: block

[mikaelbr]

Feeling like the zoom level should be closer?

[mortennordseth]

I've looked into and resolved the comments you've made. What's not done now is creating tests for the actual map and handle the Mapbox errors. The tests in not so straightforward and I'll create an issue so that can be handled in another PR. The Mapbox errors should be fixed in Mapbox Studio and since these errors already exists on the main branch I don't think that should block this from being merged.

[adriansberg]

Great work, @mortennordseth! 👏🚀🗺️

[mikaelbr]

Good stuff 🥳