ACTIONpack Posted January 21, 2014 Share Posted January 21, 2014 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 More sharing options...
0 ACTIONpack Posted January 23, 2014 Author Share Posted January 23, 2014 Does anyone know much about RaphaelJS? Link to comment Share on other sites More sharing options...
0 night_stalker_z Posted January 23, 2014 Share Posted January 23, 2014 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 More sharing options...
0 riahc3 Posted January 23, 2014 Share Posted January 23, 2014 Hello, 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 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 More sharing options...
0 ACTIONpack Posted January 23, 2014 Author Share Posted January 23, 2014 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 More sharing options...
0 riahc3 Posted January 23, 2014 Share Posted January 23, 2014 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 More sharing options...
0 LaP Posted January 23, 2014 Share Posted January 23, 2014 I don't know about the script. But that is some heavy code for such a simple task. Link to comment Share on other sites More sharing options...
0 ACTIONpack Posted January 23, 2014 Author Share Posted January 23, 2014 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 More sharing options...
0 LaP Posted January 23, 2014 Share Posted January 23, 2014 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 More sharing options...
0 Seahorsepip Veteran Posted January 24, 2014 Veteran Share Posted January 24, 2014 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 More sharing options...
0 Seahorsepip Veteran Posted January 24, 2014 Veteran Share Posted January 24, 2014 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 More sharing options...
0 ACTIONpack Posted January 24, 2014 Author Share Posted January 24, 2014 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 More sharing options...
0 Seahorsepip Veteran Posted January 24, 2014 Veteran Share Posted January 24, 2014 Thanks, RaphaelJS works different. http://eyeseast.github.io/visible-data/2013/08/26/responsive-d3/ 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 More sharing options...
0 The_Decryptor Veteran Posted February 12, 2014 Veteran Share Posted February 12, 2014 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 More sharing options...
Question
ACTIONpack
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