Map of London's brutalist buildings built in React, TypeScript, and Tailwind. Uses LibreMap and OpenFreeMap. Deployed to Netlify on londonbrutalistmap.co.uk
- NextJS, React and TypeScript
- Tailwind CSS
- React Router
- Redux and Redux Toolkit
- React-map-gl and MapLibre GL
The project follows a typical React application structure, held together with React Router:
-
.gitignore
: Untracked files -
CODE_OF_CONDUCT.md
: Guidelines for community members -
CONTRIBUTING.md
: Instructions for contributing to the project -
LICENSE
: License for the project -
README.md
: Project documentation (this file) -
index.html
: Entry point of the application in html -
netlify.toml
: Netlify deployment configuration -
prettier.rrc
: Prettier configuration -
package.json
&package-lock.json
: Node.js dependencies -
postcss.config.js
: PostCSS configuration -
favicons/
: Favicon files -
public/
: Static assets-
data/
: Contains GeoJSON data for the buildings, wrapped in a typescript file. -
fonts/
: Custom fonts -
images/
: Image assets, including building photos -
mapfonts/
: Font files for map rendering -
mapstyles.json
: Map styling
-
-
src/
: Contains the main source codecomponents/
: React componentspages/
: Page-level componentsstyles/
: SCSS files for stylingmain.tsx
: Main React entry pointvite-env.d.ts
: Vite environment type declarations
-
tailwind.config.js
: Tailwind CSS configuration -
tsconfig.json
&tsconfig.node.json
: TypeScript configuration files -
vite.config.ts
: Vite build tool configuration
-
Clone the repository:
git clone https://github.com/your-username/brutalist-map-2.git cd brutalist-map-2
-
Install packages:
npm install
-
Run:
npm run dev
I'd love to see contributions to this project! Please refer to CONTRIBUTING for instructions on how to contribute. Please follow the CODE_OF_CONDUCT too. You can also email me on hello@jackkershaw.net with any questions or suggestions.
- Socialist Modernism
- SOS Brutalism Map
- Brutalist London Paper Map
- https://www.youtube.com/watch?v=UWhuHiL8Pug
- https://www.youtube.com/watch?v=TvKi_hsJf3c
- https://www.bloomberg.com/news/articles/2015-11-25/the-case-for-calling-brutalism-heroic-instead
- https://www.langhamhouseclose.com/
- Brutal London, Simon Phipps
- After the success of an html copy of this site, 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 development, 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.
-
I noticed some issues with images not loading, so I decided to download them from the links in the geojson data. I ran a python script to do this, and then another script to compress the .webp images down to below 1mb. This would improve speed.
-
Abstracting out mapcontrol and customMarker components into separate files from the map component. This improves editability.
-
Fixed a build error from incorrect typing.
-
Added a landing page with custom SASS, to improve usability on the site. I used local storage to set this to only display on the first visit to the site.
-
Add color variables to SASS, to make them easier to edit.
-
Added a typography SCSS file to extract out of globals and make it easier to edit.
-
Extracted common tailwind styles to scss, to make them easier to edit.
-
Moved from Mapbox maplibre-gl, using the guides on OpenFreeMap and their tiling. This should enable people to contribute to this repository more easily (i previously used a mapbox api key tied to the local and production servers).
- I used Maputnik to generate styles and Map Libre Font Maker to generate the font tiles I needed.
-
Removed SASS in favour of pure Tailwind CSS.