Use ReactJS framework

[Beck-berry]

Tasks

I created a new React app based on the previous files and processes. I came up with a list of things, I should have copied from the old version. Please let me know, if there is any other requirements I forgot about.

• display the correct map
• display the search field at the top
• have autocomplete on the search field
• jump (set the center of the map) to the selected location
• use the NavigationControl of the map (bottom left corner): zoom
• use the bikely layer
• parse the opening URL and show the requested route if any
• on map clicks: show the start and destination markers, update the URL and plan a route
• reset route
• show help popup
• give example route (in help popup)
• layer switch (top right corner)
• show legend
• show map coordinates in the URL
• show bikely popups
• recompute route on marker drag

Also added an AttributionControl (bottom right corner) as #4 requested.

Also added a GeolocateControl to the top left corner (as #2 mentioned) so you can see and test whether that's what we want here.

Versions

• npm 9.4.0
• node 14.18.3

Screenshots

Closes #5

[leonardehrenfried]

I just tried to run npm start and got the following error:

Failed to compile.

Module not found: Error: Can't resolve '../styles/map.css' in '/home/lenni/dev/norway/cycling-norway/src/components'
ERROR in ./src/components/Map.js 6:0-27
Module not found: Error: Can't resolve '../styles/map.css' in '/home/lenni/dev/norway/cycling-norway/src/components'

ERROR in ./src/index.js 8:0-48
Module not found: Error: Can't resolve './reportWebVitals' in '/home/lenni/dev/norway/cycling-norway/src'

webpack compiled with 2 errors

Do you know what that is?

Regarding the legend: it should show up exactly as in the current deployment at https://leonard.io/cycling-norway/

In your screenshot I don't see any icons or lines from the map. Did you wrap the original library or re-implement it?

[Beck-berry]

Sorry, I probably missed adding those files to the commit... Now it should be working!

[leonardehrenfried]

Ok, now it's working.

However, the legend ("Tegnvorklaring") doesn't show the items on the map.

Before

After

It should automatically update with what is visible on the map.

[Beck-berry]

I had to update some libraries to enable the LegendControl, so you'll need a fresh npm install.

[Beck-berry]

We could also use the LegendControl to toggle the layers:

[leonardehrenfried]

The screenshot looks great but I cannot run the app. I get the following error:

./node_modules/react-map-gl/dist/esm/components/map.js
Module not found: Can't resolve 'mapbox-gl' in '/home/lenni/dev/norway/cycling-norway/node_modules/react-map-gl/dist/esm/components'

[Beck-berry]

Hm, weird. I deleted the node_modules folder and the package-lock.json file, then reinstalled with npm i and then could start the application. What else can I try to reproduce your error?
Note, that after the installation, there should be a mapbox-gl directory in the node_modules, as it is a dependency of the react-map-gl library. Do you use the same version of npm as I?

[leonardehrenfried]

I had to do this a8cbc82 to make it work on my computer. 🤷‍♂️

This looks quite good.

Is there a way to convert this app into fully static HTML and CSS?

[leonardehrenfried]

Also, can you make the lines for the cycling networks a bit thicker in the legend?

[Beck-berry]

Is there a way to convert this app into fully static HTML and CSS?

Yes, run npm run build and I think the build folder is what you're looking for.

[leonardehrenfried]

Ok, the lines look really nice now, thanks!

If you could re-add the coordinates in the URL I think we can merge this. In regular maplibre the property is called options.hash: https://maplibre.org/maplibre-gl-js-docs/api/map/

[leonardehrenfried]

Oh hang on, there is one thing that I would like you to take a look at. When I build production bundle with npm run build and run I get a white map and a strange error:

Could you please take a look at this?

[Beck-berry]

It is a known problem in the mapbox-gl v2 (react-map-gl#1266), they came up with a few official ways to solve it: https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

I tried the first one, updated the browserlist in package.json, now it works in production. Are you ok with that solution?

[leonardehrenfried]

That's fine.