HTML, CSS, & Leaflet.js

Community feedback

• 

  Adriano•38,430

  @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 Jensen•470

  @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

  

  Adriano•38,430

  @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 Jensen•470

  @brian-jensenPosted about 2 years ago

  @AdrianoEscarabote haha yeah, the many joys of inheritance! 🤯 Thanks so much!

  0