• 0

How to make this svg/js responsive?


Question

I'm trying to get this map to be responsive. I'm not good at javascript and would like to know how to do it. The link is at the bottom. I'm using RaphaelJS framework to make it clickable. I got it off codepen.io

 

 

http://dev.rsindustrial.com/people/ <-- where the map is going to use.

 

http://dev.rsindustrial.com/wp-content/themes/CherryFramework/js/map.js <-- Javascript of the map

http://dev.rsindustrial.com/wp-content/themes/CherryFramework/js/raphael-min.js <-- The framework that get it clickable

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Hello,

Even though its pretty easy to find out, I wouldnt post the path to where you store your libraries....

On it being slow, IDK; Works good on FF here. Same thing on IE9.

The graphic itself is somewhat inconsistent but thats not the topic.

Link to comment
Share on other sites

  • 0

Sorry, I was talking about resizing when on a tablet and phone sizes as in responsive and not the speed.

 

What do you mean by responsive? It's smooth in Chrome and IE11 if that's what you mean.

 

 

RaphaelJS is really slow on IE9 and below though.

Link to comment
Share on other sites

  • 0

Hello,

Sorry, I was talking about resizing when on a tablet and phone sizes as in responsive and not the speed.

Completely different story :laugh:

I went to the libraries website and tried their demos. Sorry but it isnt designed for a mobile platform. Their demos work exactly as slow as yours.

Link to comment
Share on other sites

  • 0

I don't know about the script. But that is some heavy code for such a simple task.

What would you use to do this?

Link to comment
Share on other sites

  • 0

What would you use to do this?

If the only thing you want is select a part of a USA map, highlight it and display info about it i would do it myself. Not that hard. Most of the js code you get online is bloated like hell. I've seen a calendar JS library once having thousand of lines of code which is ridiculous imo. Considering the job you are doing i would think about learning JS. Yes as a designer it might not look important but i think it is a good thing to know JS.

If you want to work with multiple maps of the world then think about using a library ;) If this one doesn't work right for you try to find another one.

Link to comment
Share on other sites

  • 0

To resize svg just resize the svg element with css ;)


You can use any svg child element(most commonly path) as a div so you can use jquery on click and others things too like css ^^

Link to comment
Share on other sites

  • 0

Edit: Css method seems to fail, that's ofcourse because it's put inside the html embedded and not as a image :p

Lemme think of a fix, I think putting it into a path group would be enough

Link to comment
Share on other sites

  • 0

Thanks, RaphaelJS works different. 

http://eyeseast.github.io/visible-data/2013/08/26/responsive-d3/

Edit: Css method seems to fail, that's ofcourse because it's put inside the html embedded and not as a image :p

Lemme think of a fix, I think putting it into a path group would be enough

Link to comment
Share on other sites

  • 0

Yeah it just changes the path coordinates instead of using a svg parent element or viewbox.

add to the svg element: viewBox="0 0 x y"

x=width without "px"

y=height without "px"

 

then you can write a smaller value like original x=width /2

 

So like this <svg *some stuff* viewBox="0 0 x y" />

 

personally I find the js library method very bad since it's just extra work that could be done in the svg tag >.>

Link to comment
Share on other sites

  • 0

You shouldn't need to mess with the viewBox though code to change what's displayed or anything, what you should be using the the "view" element specifically created for this (No code needed, SVG viewers can use it to pan and zoom around documents)

To make the SVG fit in the window properly at any resolution you'll want to make sure the SVG is setup to do so, I think the attribute is called something like "preserveAspectRatio" and it lets you specify how the SVG image should be displayed within the parent context (i.e. how does a 200x400 image fit into a 100x100 container, etc.)

Edit: That "Responsive Maps With D3" article is way overcomplicating things, specifying the viewBox on the SVG element with the right scaling options and setting the width and height to what you want via CSS will do everything you want without hooking into browser events and JS.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.