Support » Plugin: RVM - Responsive Vector Maps » Custom Markers Responsiveness

  • Hey, I have a problem with the custom marker module. I have added a marker, but on mobile they are to big, because the aren’t responsive and get loaded in default size. I seems that the markers are load with javascript, and I am not a javascript developer, so could you please have a look at your code how the custom markers can be responsive? It would be possible with simple css, but because of the js output of width and height I can’t overwrite… thank you!

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

    (@enrico-urbinati)

    Hi there,

    if I try a solution to that I’ll sure make an update to the plugin.
    One of the problem is only bitmap images seem to be possible to load inside the jvectormap library.

    I’ll have a look and I’ll let you know asap.

    Hey, thank you! I will wait!

    Plugin Author Enrico Urbinati

    (@enrico-urbinati)

    Hi mate,

    I have a couple of solutions, both of which involve some amendments to main css file or php code.

    I suggest to use .ico format for marker pinpoints images, but feel free to use what works the best for you!

    1) Solution:

    combine media query and class for marker images .jvectormap-marker like

    @media only screen 
    	and (max-width : 320px) {
            .jvectormap-marker { width : 10px; }
    }
    
    @media only screen 
    	and (max-width : 480px) {
            .jvectormap-marker { width : 20px; } 
    }

    and so on for all your breakpoints ( I’m using here a desktop first approach but feel free to have amobile first approach and using the min-width property ).

    2) Solution:

    create two versions of the same map ( 2 Rvm posts basically ), one for desktop and one for mobile (using export and import features will make it easier ) with 2 identical images for markers but different sizes.

    Then you can recall in the code the 2 shortcodes using of the maps when user running your site on mobile devices (smart phones, tablet etc…) or desktop.

    Combining the embedded wp functions wp_is_mobile and do_shortcode you can show different map each group of devices:

    i.e.

    <?php 
    if( wp_is_mobile() ) {// run map for mobile
         echo do_shortcode('[rvm_map mapid="12345"]');
    } else {//run map for desktop
         echo do_shortcode('[rvm_map mapid="67891"]');
    }
    ?>

    I hope this can help.
    Let me know

    Hey, I tried the CSS solution, but it doesn’t work. Cant figure out why. I added the CSS to the child themes css to make it update safe, but it is ignored.

    Plugin Author Enrico Urbinati

    (@enrico-urbinati)

    Just try using the class .jvectormap-marker without media query, even on main style.css or/and at the bottom assigning !important directive or using the map selector #id to assign more strength to your css (i.e.: #your-map-21 .jvectormap-marker), probably is overwritten by RVM css.
    You could even think to amend rvm css in responsive-vector-maps/css/jquery-jvectormap-2.0.3.css .

    Then when and if works, start using media query: obviously you should follow the website approach, which probably is a mobile first approach…

    Just let me know and good luck!

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.