Clean map (without icons)

  • Resolved sebassg

    (@sebassg)


    1 year, 2 months ago

    Hi Joe,

    And thank you very much for this awesome plugin !

    I was just wondering if it would be possible to hide all icons like zoom, fullscreen and user position on map?

    I would like to use a very small map on a website, and all these icons are kind of using “map space” in my case… Of course, I’d keep the copyright notice at the bottom, but that’s the only thing I would like to have on the map…

    Is this possible? Any already available shortcode for this?

    Thanks in advance for your response.

    All the best

    S.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Joe

    (@morehawes)

    Hi @sebassg,

    Thanks for reaching out! I am glad to hear you like the plugin, reviews are hugely appreciated ??

    These Controls can be hidden with CSS:

    /* This will hide the Controls on *all* Maps */
.waymark-map .leaflet-control-locate,
.waymark-map .leaflet-control-layers,
.waymark-map .leaflet-control-fullscreen,
.waymark-map .leaflet-control-zoom {
  display: none;
}

    I have put together an example of this here.

    I hope this helps and feel free to reach out if you need further help.

    Joe

    Thread Starter sebassg

    (@sebassg)

    Awesome! Thanks a lot for your swift response, Joe. It works perfectly !

    I assume, if I want to apply this to only one map, I have to add an “if … then” condition to the CSS code based on the map’s shortcake ID, right?

    Thanks a million again
    Cheers!

    S.

    Plugin Author Joe

    (@morehawes)

    Hi @sebassg,

    Thanks for the review ??

    assume, if I want to apply this to only one map, I have to add an “if … then” condition to the CSS code based on the map’s shortcake ID, right?

    This type of logic isn’t really available in CSS. However writing CSS rules that target certain class names added by WordPress and Waymark can give you lots of control.

    I just put this article together, which I hope you find useful.

    Joe

    Thread Starter sebassg

    (@sebassg)

    Hi again Joe,

    No problem for the review. It is well deserved ! ??

    It worked!… As you might have guessed, I’m not really an expert in CSS (or in coding generally, for that matter), but with the article you sent me, I managed to tweak your first answer so it affect only one map (the tiny one) and not the other…

    I just used:

    .waymark-map.waymark-map-id-XXXX .leaflet-control-locate,
    .waymark-map.waymark-map-id-XXXX .leaflet-control-layers,
    .waymark-map.waymark-map-id-XXXX .leaflet-control-fullscreen,
    .waymark-map.waymark-map-id-XXXX .leaflet-control-zoom {
    display: none;
    }

    Where “XXXX” is my map ID…

    So… thanks a lot again. Problem solved !

    Have a great week

    Cheers

    S.

    Plugin Author Joe

    (@morehawes)

    Hi @sebassg,

    Very glad to hear that helped ??

    Joe

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Clean map (without icons)’ is closed to new replies.