Design comparison
Solution retrospective
I spent wayyy too much time digging into the Leaflet js documentation. 🫠
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi Brian Jensen, how are you?
I really liked the result of your project, I already did this challenge, but I wanted to ask a question how did you manage to leave the map with that color?
I also spent a lot of time reading the documentation, but I didn't find anything related to colors hahauha
0@brian-jensenPosted about 2 years ago@AdrianoEscarabote Thanks!
First I tried implementing alternate map tile providers that had a gray theme. They were all either buggy or required registration for an API key. I didn't want to bother with using a host that supported hidden environment variables, so I went the CSS route instead. It took a while to find a parent element that wouldn't apply the filter to the children that I didn't want to be changed (such as the custom marker and custom marker popup). This is what I ended up with:
.leaflet-pane.leaflet-tile-pane { filter: grayscale(100%) brightness(0.95); }
0@AdrianoEscarabotePosted about 2 years ago@brian-jensen I did that too, but what you said was happening, I ended up styling what I didn't want.
I left the default color haha
congratulations on the result!
1@brian-jensenPosted about 2 years ago@AdrianoEscarabote haha yeah, the many joys of inheritance! 🤯 Thanks so much!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord