Responsive

Hi Michi,

The map does work on mobile phones. It should detect if you are using a mobile device and show the popups on click instead of hover. Make sure that:
pop_ups: 'detect',
has been set in the main_settings of the mapdata.js file.
If you are doing this and having problem, please let me know your device and I’ll troubleshoot.

Also, you can put the map in responsive mode so it will expand to fill the size of the device:
https://simplemaps.com/docs/responsive-map

Chris

Hi Chris,
at first i would like to thank you for your fast response.

As you said it works responsive and also on mobilephones.

I didnt see that there apears “Link” after the continent name on mobiles.
But in my opinion its not very user friendly like that.

Would it be possible to set the link on the whole popup?
Otherwise im afraid that also other users wont unterstand that they have to click on “Link”.

sincerely Michi

Hi Michi,

Thanks for your feedback. You can change the “Link” to be different text or even a large button using:
simplemaps_usmap_mapdata.main_settings.link_text

Or…

To make the whole tooltip clickable, you can do something like this:

var current_link=false;
simplemaps_usmap.hooks.click_state=function(id){current_link=simplemaps_usmap_mapdata.state_specific[id].url=='default'?simplemaps_usmap_mapdata.main_settings.state_url:simplemaps_usmap_mapdata.state_specific[id].url;}
simplemaps_usmap.hooks.click_location=function(id){current_link=simplemaps_usmap_mapdata.locations[id].url=='default'?simplemaps_usmap_mapdata.main_settings.state_url:simplemaps_usmap_mapdata.locations[id].url;}
$( "#map" ).on( "click", "#tt_custom_sm", function() {if(current_link){window.location.href=current_link}});

using jQuery (need to add to page), SimpleMaps JavaScript hooks, and the tooltip CSS. See:
https://simplemaps.com/docs/javascript-hooks
https://simplemaps.com/docs/apply-css
to understand the code above.

Or…
You can add a button to the description to be clicked. You could use an @media query to make this button within the description appear only on mobile devices:
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Hope that gives you an option that works.

Chris