Closed Beck-berry closed 1 year ago
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?
Sorry, I probably missed adding those files to the commit... Now it should be working!
Ok, now it's working.
However, the legend ("Tegnvorklaring") doesn't show the items on the map.
It should automatically update with what is visible on the map.
I had to update some libraries to enable the LegendControl, so you'll need a fresh npm install
.
We could also use the LegendControl to toggle the layers:
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'
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?
I had to do this https://github.com/buskerudbyen/cycling-norway/pull/6/commits/a8cbc82cfb74793f52b477b95d8dc77b5b54f7ef to make it work on my computer. :man_shrugging:
This looks quite good.
Is there a way to convert this app into fully static HTML and CSS?
Also, can you make the lines for the cycling networks a bit thicker in the legend?
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.
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/
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?
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?
That's fine.
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.
bikely
layerAlso 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
Screenshots
Closes #5