Permalink
Browse files

init commit

  • Loading branch information...
0 parents commit 287465e61945279b623b8b161a94beee8b8bc85f @robflaherty committed Dec 10, 2010
Showing with 232 additions and 0 deletions.
  1. +59 −0 demo/demo-animated.html
  2. +35 −0 demo/demo-static.html
  3. +7 −0 demo/raphael-min.js
  4. +22 −0 readme.md
  5. +109 −0 us-map-svg.js
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Animated United States map made with Raphael</title>
+</head>
+<body>
+
+<div id="container"></div>
+<!-- /container -->
+
+<script src="raphael-min.js"></script>
+<script src="../us-map-svg.js"></script>
+<script>
+ window.onload = function () {
+ var R = Raphael("container", 1000, 900),
+ attr = {
+ "fill": "#d3d3d3",
+ "stroke": "#fff",
+ "stroke-opacity": "1",
+ "stroke-linejoin": "round",
+ "stroke-miterlimit": "4",
+ "stroke-width": "0.75",
+ "stroke-dasharray": "none"
+ },
+ usRaphael = {};
+
+ //Draw Map and store Raphael paths
+ for (var state in usMap) {
+ usRaphael[state] = R.path(usMap[state]).attr(attr);
+ }
+
+ //Do Work on Map
+ for (var state in usRaphael) {
+ usRaphael[state].color = Raphael.getColor();
+
+ (function (st, state) {
+
+ st[0].style.cursor = "pointer";
+
+ st[0].onmouseover = function () {
+ st.animate({fill: st.color}, 500);
+ st.toFront();
+ R.safari();
+ };
+
+ st[0].onmouseout = function () {
+ st.animate({fill: "#d3d3d3"}, 500);
+ st.toFront();
+ R.safari();
+ };
+
+ })(usRaphael[state], state);
+ }
+
+ };
+</script>
+</body>
+</html>
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <title>Static United States map made with Raphael</title>
+</head>
+<body>
+
+<div id="container"></div>
+<!-- /container -->
+
+<script src="raphael-min.js"></script>
+<script src="../us-map-svg.js"></script>
+<script>
+ window.onload = function () {
+ var R = Raphael("container", 1000, 900),
+ attr = {
+ "fill": "#d3d3d3",
+ "stroke": "#fff",
+ "stroke-opacity": "1",
+ "stroke-linejoin": "round",
+ "stroke-miterlimit": "4",
+ "stroke-width": "0.75",
+ "stroke-dasharray": "none"
+ };
+
+ //Draw Map
+ for (var state in usMap) {
+ R.path(usMap[state]).attr(attr);
+ }
+
+ };
+</script>
+</body>
+</html>

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,22 @@
+# Interactive United States Map made with Raphael.js
+This file contains SVG paths for each of the 50 states in the U.S. Feed this to Raphael to create an interactive map. See demos.
+
+# Credits
+[SVG Map of the United States](http://commons.wikimedia.org/wiki/File:Blank_US_Map.svg)
+
+[Raphael](http://raphaeljs.com)
+
+[SVG-to-Raphael Converter Tool](http://toki-woki.net/p/SVG2RaphaelJS/)
+
+
+
+
+
+
+
+
+
+
+
+
+
Oops, something went wrong.

0 comments on commit 287465e

Please sign in to comment.