How to create a greyscale map with colored marker

  • Resolved trishahdee

    (@trishahdee)


    2 years, 6 months ago

    I am using the following CSS to make the map greyscale; this works. But I’ve tried to turn greyscale off for the marker, and it’s not working. Any suggestions?

    #wpmapblock_1737a57b {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
#wpmapblock_1737a57b .leaflet-marker-pane,
#wpmapblock_1737a57b .leaflet-pane.leaflet-marker-pane,
#wpmapblock_1737a57b .leaflet-pane.leaflet-marker-pane img {
  -webkit-filter: grayscale(0) !important;
  -moz-filter: grayscale(0) !important;
  -ms-filter: grayscale(0) !important;
  -o-filter: grayscale(0) !important;
  filter: grayscale(0) !important;
  filter: none !important;
}
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tushar Imran

    (@tusharimran)

    Hi @trishahdee,

    Use below css, i hope it will be works. if you face any issue, please let us.

    #wpmapblock_1737a57b .leaflet-tile-pane {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    }

    Thread Starter trishahdee

    (@trishahdee)

    Thank you, Tushar, for the quick reply.

    As you can see from the code I provided, I can make the map greyscale just fine. The problem is with taking grayscale off of just the marker so that it shows in color.

    Plugin Author Tushar Imran

    (@tusharimran)

    Hi @trishahdee,

    Without marker other will be grayscale, i already tested it. please check it and confirm me.

    Thank You
    Tushar Imran

    Thread Starter trishahdee

    (@trishahdee)

    Ugh… That will teach me to start working before I’m thoroughly caffeinated ?? I missed that you had added the “.leaflet-tile-pane”. You are correct. The marker is now in color. Thanks so much!

    Trishah

    Plugin Author Tushar Imran

    (@tusharimran)

    Hi @trishahdee,

    Sounds Good, if you really like our plugin and support, please don’t forget to give a 5 start review. it will boost my motivation.

    Thank You
    Tushar Imran

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to create a greyscale map with colored marker’ is closed to new replies.

Tags