Jump to content

AmCharts Map not optimising on mobile

Recommended Posts

Site URL: https://www.lexiconhouse.com/about

I'm hoping someone can help, as I've not been able to solve the issue.

I copied in an HTML code into a code box at the bottom of this page to get an interactive map: https://www.lexiconhouse.com/about

The problem is that it doesn't optimise on mobile, it looks too big. And actually it is a little smaller than the width of the page on desktop. Images attached.

I've seen an AmCharts map on a Squarespace site that does optimise fine so I know it's possible to do it, but I'm at a loss how.. I'd appreciate any help!

 

Screenshot 2020-08-25 at 15.28.14.png

Screenshot 2020-08-25 at 15.29.04.png

Link to comment

Thank you! It ALMOST worked!

The bottom bar didn't get smaller on mobile for some reason.. but it's perfect on desktop.

Do you think I could delete that part in the map HTML code?

I'll paste below

 

<script src="https://www.amcharts.com/lib/3/ammap.js" type="text/javascript"></script>

<script src="https://www.amcharts.com/lib/3/maps/js/worldHigh.js" type="text/javascript"></script>

<script src="https://www.amcharts.com/lib/3/themes/dark.js" type="text/javascript"></script>

<div id="mapdiv" style="width: 1000px; height: 450px;"></div>

<div style="width: 1000px; font-size: 70%; padding: 5px 0; text-align: center; background-color: #DDE8F0; margin-top: 1px; color: #FCFBF0;"><a href="https://www.amcharts.com/visited_countries/" style="color: #FCFBF0;">Create your own visited countries map</a> or check out the <a href="https://www.amcharts.com/" style="color: #FCFBF0;">JavaScript Charts</a>.</div>

<script type="text/javascript">

var map = AmCharts.makeChart("mapdiv",{

type: "map",

theme: "dark",

projection: "mercator",

panEventsEnabled : true,

backgroundColor : "#DDE8F0",

backgroundAlpha : 1,

zoomControl: {

zoomControlEnabled : true

},

dataProvider : {

map : "worldHigh",

getAreasFromMap : true,

areas :

[

{

"id": "AT",

"showAsSelected": true

},

{

"id": "AZ",

"showAsSelected": true

},

{

"id": "BE",

"showAsSelected": true

},

{

"id": "BG",

"showAsSelected": true

},

{

"id": "HR",

"showAsSelected": true

},

{

"id": "CZ",

"showAsSelected": true

},

{

"id": "DK",

"showAsSelected": true

},

{

"id": "EE",

"showAsSelected": true

},

{

"id": "FR",

"showAsSelected": true

},

{

"id": "DE",

"showAsSelected": true

},

{

"id": "GR",

"showAsSelected": true

},

{

"id": "HU",

"showAsSelected": true

},

{

"id": "IT",

"showAsSelected": true

},

{

"id": "LV",

"showAsSelected": true

},

{

"id": "LI",

"showAsSelected": true

},

{

"id": "LT",

"showAsSelected": true

},

{

"id": "LU",

"showAsSelected": true

},

{

"id": "MT",

"showAsSelected": true

},

{

"id": "MD",

"showAsSelected": true

},

{

"id": "NL",

"showAsSelected": true

},

{

"id": "PL",

"showAsSelected": true

},

{

"id": "PT",

"showAsSelected": true

},

{

"id": "RO",

"showAsSelected": true

},

{

"id": "RU",

"showAsSelected": true

},

{

"id": "RS",

"showAsSelected": true

},

{

"id": "SK",

"showAsSelected": true

},

{

"id": "ES",

"showAsSelected": true

},

{

"id": "CH",

"showAsSelected": true

},

{

Screenshot 2020-08-25 at 19.08.16.png

Link to comment

You're welcome!
Replace this code with your part code

<div style="width: 1000px;font-size: 70%;padding: 5px 0;text-align: center;background-color: #DDE8F0;margin-top: 1px;color: #FCFBF0;max-width: 100%;"><a href="https://www.amcharts.com/visited_countries/" style="color: #FCFBF0;">Create your own visited countries map</a> or check out the <a href="https://www.amcharts.com/" style="color: #FCFBF0;">JavaScript Charts</a>.</div>

You can use display:none; CSS after max-width:100% to hide it. (On desktop and mobile) If you want to hide on mobile need to use media query.
Please use like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

Leopold, one more quick question. The map looks perfect on mobile and fits the screen but on desktop it went back to its original smaller size. I altered the code a little to expand the width and it looks fine now, but as I'm really a novice I hope I did it correctly! I just changed the width from  <div style="width: 1000px; to <div style="width: 1300px; in the two places it appears in the code. Is that a viable solution?

Full section below:

<div id="mapdiv" style="width: 1300px; height: 450px;"></div>
<div style="width: 1300px; font-size: 70%; padding: 5px 0; text-align: center; background-color: #DDE8F0; margin-top: 1px; color: #FCFBF0;max-width: 100%;display:none;”><a 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.