How could I use javascrip to dynamically resize my svg image map and make sure all links still work?

Posted on 2014-09-16
Medium Priority
Last Modified: 2014-09-28
Hi all,

on my wordpress site I am using a plugin called i World Maps and at the moment the map shows on my website (if you have a large enough monitor) at 1170px in width and 730px in height. When I resize the page, or rotate the mobile device, however the map does not resize, especially when I use it on a vertical mobile phone.

Please see it in action on my site

Is there a javascript based method that could allow me to dynamically and proportionately resize the map (always in the 1170x730 ratio but based on the width of my div.container, which, when there is enough space on the screen, is 1170px in width? Of course I need the links to work as well at any size.

thanks in advance

P.S. I contacted the plugin author and he seems disinclined to help for the 20$ I paid for it and his reply was:
Thanks for purchasing! Try and leave the width setting for the map blank. What this will do, is force the map to load with the max width available of it’s div container. So, if it loads in a mobile, it will load in a small size, and if it loads in a big screen, it will load at the available size. However, once loaded, if you resize the window, it will keep the same size, so remember that when testing. More advanced javascript solutions could be implemented, but I don’t have any ready yet. As for now, the google geochart api used to built the map doesn’t work with % values, so I hope this solution works for you!
Question by:badwolfff
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5

Author Comment

ID: 40327028
Just thinking out loud... maybe that question I have asked is too complicated but perhaps the solution could be to use AJAX to reload just the bit where the map is contained without reloading the page when the page resizes or the mobile device is rotated. Could anyone help me write such a code?

thanks again
LVL 34

Expert Comment

ID: 40330762
greetings badwolfff, , I have used SVG images to good effect on web pages, years ago MS Internet Explorer browsers had absolutely terrible support for SVG images, so I did not even try it, but now almost all browsers support SVG.

as to your problem, I have had some success with just using CSS to have width and height adaptions for a svg image -

    #svg1 {width:100%;}
<div style="text-align:center;">
<img id="svg1" src="geo_shape.svg" />

Open in new window

I can set the way the SVG image has width display by just adding some CSS as -
    #svg1 {width:100%;}
and it will be a percentage  of the <div> width it is inside of.

The SVG image is a strange kind of thing, it can have vector image elements like -
    <path fill="#C3D35E"

and ALSO CSS inside the Image, and also javascript AND regular HTML Like <a> inside the SVG image text definition.

Ask questions if you need more info.

By the way I went to your web site and it is SO SLOW to load, that I can not see it as a MOBIL accessible site.

Author Comment

ID: 40335696
Sorry i didn't get that time to try it
Will do so soon and get back
Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

LVL 34

Expert Comment

ID: 40337280
OK, I will say that the SVG image you use is very Complex, as there are many complex paths for each region, and Javascript click events for all of the region paths, Also you use an "add on", you say as - "plugin called i World Maps", which may have things (SGV settings, CSS, and-or javascript) that may effect this SVG image and it's display for a different size display, often a plugin will have a site that has the API for the plugin and a help Forum to ask questions to solve problems, I have not used the "i World Maps" plugin, I mostly commented here because I thought that I may be an image setting.

Author Comment

ID: 40346495
the site online is already in production so I cannot try this there but I tried it offline and it doesn't work.
It is, as you say, too complex.

Do you know any way I could use ajax to just reload the div upon page resize so that the map would be always the right size?

LVL 34

Expert Comment

ID: 40346669
OK, , I have considered what you ask -
"use ajax to just reload the div upon page resize"

and you can certainly do this, I will start by saying that there is a javascript "Event" called "onresize", which is applied to the <body> when it changes dimensions, see this w3schools page for some tech specs about it -
I have used Ajax in several many different ways, however, it is my view that even developers experienced in HTML and javascript, have a difficult time understanding why and how the browser AJAX works, and what the MANY factors there are in the THREE step process for AJAX, the first step is in the browser, which gathers info from user inputs (or gets No info at all), and sends this info or command identifiers to the Server as a URL. The second step is in the Server machine (a separate machine from the browser computer), where usually some sort of Database SELECT is used to get "dynamic" data, and this changing data is sent back to the Browser machine as a response String. The third step in back in the browser, which takes the response string and uses it or converts it to arrays-objects, and changes <div> or <span> on the page.

So using ajax for the first time, is not so easy for most.

My opinion on this is, ,  that since you use the literal "text" for the SVG as a <svg version="1.1"  that this <svg version="1.1" TEXT could be placed in a javascript variable, and then loaded BACK into a container <div> on the "onresize" event, , However, I looked at you page at -
and in firefox IT DOES resize the SVG map when I change the browser size. But I think that there is already a javascript implement for a ReSize, that uses your "i World Maps" plugin to completely rewrite the map for the new size.

I think that the entire web page string segment for the <!DOCTYPE svg PUBLIC "  and the  <svg version="1.1"  are written to this page AFTER the page is loaded from the server, , by the "i World Maps" plugin.
I do not think that an AJAX solution would work here, but that's just a guess, I would think that the "i World Maps" plugin javascript has a reloadMap( ) function somewhere?

You say your main problem is that in mobil devices the map does not change from the "portrait-vertical" mode to the "landscape-horizontal" mode.  Many times for specialty situations in "mobil" page work, you have to use "non-desktop browser" methods to get a half-way workable cure.

Sorry, but now, I do not have the time to research this for the  "i World Maps" plugin functioning, . .

This page has several many Javascript add-ons such as "Jquery" and "google" and "rocketscript", and firefox can NOT even deal with all of the javascript, and fails to analyze the javascript additions, and craps out.
If you pay for the  "i World Maps" maps thing, go to their Support and ask questions about your problem. If you are not a pying customer, go to there support anyway, and see if you can get help. . The "mobil" horizontal-vertical view change would have to be a common problem, that someone has dealt with, I would think.

Sorry but your page is overly complex for me to even know where to start to try fix it.
You might consider taking out some of the many complexities in your page, users need direct and fast use (easy to navigate and use) web page, or else they go somewhere else in less than 15 seconds.

Author Comment

ID: 40346742
I put the reload page on resize function using jquery because I needed a patch-up solution for the production site.
I am happy to subsitute it with an ajax div reload if I could only get it to work.

By the way I take your point about site optimization but I just did a GTMETRIX test on that page and I got a very high rating (A B) and I think if I tinkered a bit with the .css files and unified them, I could easily get an A A rating:

So please ignore the reload page script upon page resize. It is a temporary solution I had to make do with.
I am open to AJAX based solutions if you have any :)

thanks for the reply
LVL 34

Expert Comment

ID: 40346882
????, , Not sure what needs to be done ?
I will ask you first about your development control of the Server page, I have told you that AJAX gets a Page return from the server (not something inside of the browser page) to then place that return in a browser <div>
Can you badwolfff, write a server page that can send back exactly ALL the SVG image TEXT needed to load in to a a div like -
<div id="svgDiv"> </div>
from an ajax return to have a successful image display for new width?

next question, what is on the Server for page output for the -
with the "i World Maps" plugin SVG image text, is it a static (unchanging) string (on server), or does it change somehow, or is it Blank (no text), that the  "i World Maps" plugin adds when the page loads? ?
Is there some   "i World Maps" plugin API page that tells developers HOW to use the  "i World Maps" plugin, , , ,
 is it serverside or a browser plugin?

Author Comment

ID: 40347133
Hi thanks for the answer.
As per the first part, no, unfortunately I do not know how to do it. That is the reason why I wrote here.
I can work fairly well with jQuery if that might help but if I did not succeed thus far it was purely becuase I did not know how to.

Coming to part two, I do now really know how the plugin writes its output out but since in the wordpress backend I define maps and interactions, perhaps the plugin outputs to the page in real time. What I think is that whatever the plugin does it is over by the time the page loads. If the page were a different size and were realoaded the plugin would serve a resized map with every relative border and interaction resized and adjusted. So I think the plugin needs to work everytime the page is reloaded. Makes sense? That's all I know, I'm afraid :(
LVL 34

Accepted Solution

Slick812 earned 2000 total points
ID: 40347758
If this is a WordPress plugin, and you define which "Map" to show in the wordpress administration page, and I guess you also define the "URL" to go to on each map "region" click-touch. Then This tells me alot about how this may work.
The use of ajax is ruled out for now, since that depends on using a server side page (a php page URL) to send back the text to load (update) into some page element like a <div>.

I looked closer at the page source code, and it has this -
<script type="text/rocketscript">
  var ivalue_1=new Array();google.load('visualization','1',
	function drawVisualization(){

Open in new window

which I looked up the google 'visualization' api, , it has something called "chart image overlay"
which looks to me to to use a SVG image for a -
    var data=new google.visualization.DataTable();

and this uses a datatable as -
data.addColumn({type:'string',role:'tooltip'});data.addRows([[{v:"CN",f:"Cina"},1,"corsi, eventi e servizi legati alla Cina"]]);ivalue_1['CN']='/tag/cina/';

which seems to correspond to your SVG image region of "cina" which is a green color

again I will say that I am sorry, , but this is all too complex for me to deal with helping you for this, as it took me more than an hour to do a source code analyze,
 to find out that your SVG image is using this complex javascript google svg datatable
to do this. so am am abandoning anymore help for you

Author Comment

ID: 40348473
I do appreciate your trouble. thanks anyways
I knew it was too complicated to start with anyway.

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question