Skip to content

Instantly share code, notes, and snippets.

@scottsappen
Created July 1, 2013 14:57
Show Gist options
  • Save scottsappen/5901573 to your computer and use it in GitHub Desktop.
Save scottsappen/5901573 to your computer and use it in GitHub Desktop.
Integrate a cool interactive map on your site https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js
<script src="/js/vendor/raphael-min.js"></script>
<script src="/js/vendor/world.js"></script>
<script>
Raphael("forworldmap", 1000, 400, function () {
var r = this;
r.rect(0, 0, 1000, 400, 10).attr({
stroke: "none",
fill: "0-#9bb7cb-#adc8da"
});
var over = function () {
this.c = this.c || this.attr("fill");
this.stop().animate({fill: "#bacabd"}, 500);
},
out = function () {
this.stop().animate({fill: this.c}, 500);
};
r.setStart();
var hue = Math.random();
var myCountryArray = new Array();
for (var country in worldmap.shapes) {
// var c = Raphael.hsb(Math.random(), .5, .75);
// var c = Raphael.hsb(.11, .5, Math.random() * .25 - .25 + .75);
var myRPath = r.path(worldmap.shapes[country]).attr({stroke: "#ccc6ae", fill: "#f0efeb", "stroke-opacity": 0.25});
myCountryArray[myRPath.id] = worldmap.names[country];
myRPath.hover(function() {
showNetWorthTooltip(myCountryArray[this.id]);
});
}
var world = r.setFinish();
world.hover(over, out);
// world.animate({fill: "#666", stroke: "#666"}, 2000);
world.getXY = function (lat, lon) {
return {
cx: lon * 2.6938 + 465.4,
cy: lat * -2.6938 + 227.066
};
};
world.getLatLon = function (x, y) {
return {
lat: (y - 227.066) / -2.6938,
lon: (x - 465.4) / 2.6938
};
};
var latlonrg = /(\d+(?:\.\d+)?)[\xb0\s]?\s*(?:(\d+(?:\.\d+)?)['\u2019\u2032\s])?\s*(?:(\d+(?:\.\d+)?)["\u201d\u2033\s])?\s*([SNEW])?/i;
world.parseLatLon = function (latlon) {
var m = String(latlon).split(latlonrg),
lat = m && +m[1] + (m[2] || 0) / 60 + (m[3] || 0) / 3600;
if (m[4].toUpperCase() == "S") {
lat = -lat;
}
var lon = m && +m[6] + (m[7] || 0) / 60 + (m[8] || 0) / 3600;
if (m[9].toUpperCase() == "W") {
lon = -lon;
}
return this.getXY(lat, lon);
};
try {
navigator.geolocation && navigator.geolocation.getCurrentPosition(function (pos) {
r.circle().attr({fill: "none", stroke: "#f00", r: 5}).attr(world.getXY(pos.coords.latitude, pos.coords.longitude));
});
} catch (e) {}
var frm = document.getElementById("latlon-form"),
dot = r.circle().attr({fill: "r#FE7727:50-#F57124:100", stroke: "#fff", "stroke-width": 2, r: 0}),
// dot2 = r.circle().attr({stroke: "#000", r: 0}),
ll = document.getElementById("latlon"),
cities = document.getElementById("cities");
});
</script>
In that code above, it’s all right off Raphael. I only changed a few lines to create a new array for myself and call my own Javascript function on a mouse hover event.
var myRPath = r.path(worldmap.shapes[country]).attr({stroke: "#ccc6ae", fill: "#f0efeb", "stroke-opacity": 0.25});
myCountryArray[myRPath.id] = worldmap.names[country];
myRPath.hover(function() {
showNetWorthTooltip(myCountryArray[this.id]);
});
And of course, here’s my custom code
//this var will hold all country data from initial ajax call
var mycountryarray = new Array();
$(document).ready(function(){
doLoadCountriesData();
});
function doLoadCountriesData()
{
var sessionKey = "countriesInSession";
//if browser supports session storage, try to use it
if (sessionStorage) {
var sessionValue = sessionStorage.getItem(sessionKey);
if (sessionValue) {
mycountryarray = $.parseJSON(sessionValue);
return true; // We just avoided one ajax request
}
}
//browser doesn't support session storage or the session var is empty, go get posts
$.ajax({
url: 'GetCountryAvgNetWorth.php',
type: 'GET',
cache: 'false',
success: function(jsonresponse) {
//if sessionStorage supported, save response in session
if (sessionStorage) {
mycountryarray = $.parseJSON(jsonresponse);
sessionStorage.setItem(sessionKey, jsonresponse);
}
},
error: function(xhr) {
// handle errors
},
});
return true;
}
function showNetWorthTooltip(country) {
if (!(mycountryarray)) {
doLoadCountriesData();
}
if (mycountryarray[country]) {
$("#forworldmapcomment").html("Average net worth for " + country + " is $" + ReplaceNumberWithCommas(mycountryarray[country]));
} else {
$("#forworldmapcomment").html("Average net worth for " + country + " is unavailable");
}
}
function ReplaceNumberWithCommas(yourNumber) {
//Seperates the components of the number
var n= yourNumber.toString().split(".");
//Comma-fies the first part
n[0] = n[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
//Combines the two sections
return n.join(".");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment