How to move the zoom controls on the bottom left?

  • Resolved laurentfa

    (@lfalipou)


    1 year, 8 months ago

    Hi Carlos,

    First, thanks a lot for your really nice and easy to use plugin.

    I’d love to use it but my map (France) has some parts of it that are hidden below the zoom controls for certain widths (for Corsica).

    I know there are two parameters we can change (namely “Map Height” and “Map Height on Mobile”), but it is not the ideal solution for me because by doing so, the map becomes too small (and there are many small areas that the visitor can click).

    So I’d like to use 100% on mobile to get a map that takes the full width.

    => Is it possible to customize the position of the – and + zoom controls so that they go to the bottom left instead of the bottom right (using a code snippet plugin or else)?

    <g class="imapsSprite-group imapsContainer-group imapsZoomControl-group" transform="translate(497,295)">

    => Another option would be to move Corsica (an area of the map) on the left (even if it does not represent the real distance between the island and the rest of France). But I don’t see how I could do it myself.

    Best!

    • This topic was modified 1 year, 8 months ago by laurentfa.
    • This topic was modified 1 year, 8 months ago by laurentfa.
    • This topic was modified 1 year, 8 months ago by laurentfa.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Carlos Moreira

    (@carlosmoreirapt)

    Hi @lfalipou
    Thank you for positive feedback!
    Unfortunately it’s only possible to better control the zoom buttons position in the Pro version.
    You could exclude Corsica and create a new map just for Corsica:
    https://interactivegeomaps.com/docs/include-or-exclude-specific-countries-or-regions/
    And then you could place the maps side by side, but it wouldn’t be perfect most likely.

    You could also try this css, to force the position to reset: 

    .imapsZoomControl-group {
    transform:unset !important;
}

    But not sure how it would work across the different screen sizes.
    Greetings, Carlos

    Thread Starter laurentfa

    (@lfalipou)

    Thanks Carlos!

    First, you should fix the link in your post by removing “And” at the end of it.

    Secondly, I tried the following line on Chrome and it did the trick. I need to check now that it works in production:

    g.imapsSprite-group.imapsContainer-group.imapsZoomControl-group {
transform: translate(0px, 70%) !important;
}

    70% instead of 100% otherwise the minus zoom button gets hidden with low widths (around 300 px).

    Unless you have a suggestion to define the position on the y axis according to the bottom rather than the top?

    Best!

    • This reply was modified 1 year, 8 months ago by laurentfa.
    • This reply was modified 1 year, 8 months ago by laurentfa.
    • This reply was modified 1 year, 8 months ago by laurentfa.
    • This reply was modified 1 year, 8 months ago by laurentfa.
    • This reply was modified 1 year, 8 months ago by laurentfa.
    Plugin Contributor Carlos Moreira

    (@carlosmoreirapt)

    Depending on the height of your map on mobile, you might need to adjust the css values and maybe create a media query, but overall that solution should work well, yes! Cheers, Carlos

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to move the zoom controls on the bottom left?’ is closed to new replies.