Support » Plugin: WP Map Block - Gutenberg Map Block for Google Map and OpenStreet Map » How to create a greyscale map with colored marker

  • Resolved Trishah

    (@trishahdee)


    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 Trishah

    (@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 Trishah

    (@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)
  • You must be logged in to reply to this topic.