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

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!
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

badwolfffAuthor Commented:
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
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.
badwolfffAuthor Commented:
Sorry i didn't get that time to try it
Will do so soon and get back
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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.
badwolfffAuthor Commented:
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?

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.
badwolfffAuthor Commented:
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
????, , 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?
badwolfffAuthor Commented:
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 :(
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
badwolfffAuthor Commented:
I do appreciate your trouble. thanks anyways
I knew it was too complicated to start with anyway.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.