Solved

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

Posted on 2014-09-16
11
684 Views
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!
0
Comment
Question by:badwolfff
  • 6
  • 5
11 Comments
 

Author Comment

by:badwolfff
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
0
 
LVL 33

Expert Comment

by:Slick812
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 -

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

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.
0
 

Author Comment

by:badwolfff
ID: 40335696
Sorry i didn't get that time to try it
Will do so soon and get back
Thanks
0
 
LVL 33

Expert Comment

by:Slick812
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.
0
 

Author Comment

by:badwolfff
ID: 40346495
Hi
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?

thanks
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 33

Expert Comment

by:Slick812
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 -
       http://www.w3schools.com/jsref/event_onresize.asp
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 -
    http://www.associazioneculturaleinasia.it/mappa-culturale/
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.
0
 

Author Comment

by:badwolfff
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:
http://gtmetrix.com/reports/www.associazioneculturaleinasia.it/QUPYK68G

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
0
 
LVL 33

Expert Comment

by:Slick812
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 -
    http://www.associazioneculturaleinasia.it/mappa-culturale/
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?
0
 

Author Comment

by:badwolfff
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 :(
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 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',
    {packages:['geochart']});
	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
0
 

Author Comment

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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now