Updated Brutalist Map built in React,TypeScript and Tailwind. Bootstrapped with Vite and deployed to Netlify.
-
After the success of my Brutalist Map project, I wanted to rebuild it in a modern framework. Seeing as much of the functionality of that project was in JavaScript, I wanted to rebuild it in React, as it was hard to navigate the codebase, something a component based architecture would solve.
-
I realised that this would allow me to use the mapbox NPM package rather than the CDN method I was previously using, which would allow me to host the geojson data myself - making it much easier to edit.
-
During production, it became obvious that I could make a multi-page site with the data, now that I was selfhosting it, allowing me to display it in different ways. This would allow different users to engage as they wished.
-
First, I set up the app using Vite.
-
Then I worked on each of the pages in the app, using Tailwind CSS to rapidly design them in a similar style to my Brutalist Map project.
-
Taught myself how to use APIs in Javascript with fetch() and then applied this to React.
- I spent a long time trying to get this to work - it was relatively simple with the Mapbox URL but I also wanted to use local geojson data where possible (easier to edit and reference).
-
Added Brutalist Map into the page
- React-map-gl as an API wrapper for mapbox-gl, with mapbox studio staying as the source.
-
Added React Router to navigate between pages and serve a 404 page and Link elements to improve page load speed.
-
Deployed to Netlify.
-
Added markers to the map using a map function.
-
Added controls to the map using the example in the React-map-gl docs as a guide.
-
Added details of the buildings on hovering over them on the map. I tried using the example in the React-map-gl docs but unfortunately couldn't get it to work. A workaround was to create a custom marker, since React Map GL wasn't letting me add onMouseEnter events to the marker that comes with the NPM package. I then used State management, to set whether each marker was hovered over. This caused some flickering which I resolved by binding the onMouseEnter and onMouseLeave events to the div displaying the information on hover.
-
Added click event on marker, similar to the hover event above. Used borrowed html and css from the index page.
-
Edited map so visited buildings are highlighted green on the map.
-
Transformed svg icons to React TSX components using an online tool - to allow for easier editing.
-
Updated mobile look of site after some debugging on different screen sizes.
Clone the project and run the development server:
npm run dev-
see maps folder -https://www.pinballmap.com/ for inspo of tech stack and how the app runs
-
see nearby wiki, could maybe use wiki pages. Look at how they made it a mobile app running in chrome
-
Maybe data like: https://www.crimesofsolidarity.org/data using Airtable, including way for users to add their own data.
-
Improve SEO.
-
Dynamic Routes so a page is generated for each building.
-
More info links for the buildings - there are some really good websites out there about these buildings which I'd like to signpost to users of the map.
-
Make suggestions button, link to contact page...
-
Index page
- order by name/architect/date built.
- Filter by Architect.
- Shuffle button.
- Search bar.
-
Game page
- I wanted to build a game using the same data, to test user's on their knowledge of the buildings. E.g. Photo, what building is this, user inputs their answer.
- Fix the game so it works - commented out in header atm.
- add more steps to game - atm just says correct or incorrect. Score counter etc. Add places already got right to local storage.
-
Index page
- Instead of get directions link, have view on map which takes to map page.
- filter to see ones you've visited / unvisited OR show just visited and then click show more option.
- back to top floating button
-
Contact page
- Reinstate this page and get form working properly with Netlify or another form service