Custom Markers Responsiveness

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!

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

• This reply was modified 5 years, 6 months ago by Enrico Urbinati.

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.

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!

• This reply was modified 5 years, 5 months ago by Enrico Urbinati.