Sign in to follow this  
Followers 0
ACTIONpack

How to make this svg/js responsive?

14 posts in this topic

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

Share this post


Link to post
Share on other sites

Does anyone know much about RaphaelJS?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 ^^

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.