$(document).ready(function() { // Some options for customization var origMapWidth = 1335; // 1335 pixels var origMapHeight = 667; // 667 pixels // find each of the .ILmapContainer $('.ILmapContainer').each(function () { // set current selected item to variable var i = $(this); // Set the css for the main ILmapContainer DIV3px 0 3px 10px; i.css({'position':'relative','overflow':'hidden','margin-top':'3px','margin-right':'0px','margin-bottom':'3px','margin-left':'10px'}); var curMapWidth = parseInt(i.css('width')); // Get int value of the width, i.e get 300 from 300px // Add the map image to the ILmapContainer DIV var worldMap = $(''); worldMap.css({'left':'0px','top':'0px','position':'absolute','width':'100%','height':'100%'}); worldMap.appendTo(i); var curMapWidth = parseInt(i.css('width')); // Get int value of the width, i.e get 300 from 300px var curMapHeight = parseInt(i.css('height')); if (curMapHeight/curMapWidth != origMapHeight/origMapWidth) { curMapHeight = parseInt(origMapHeight/origMapWidth * curMapWidth); i.css({'height':curMapHeight.toString().concat("px")}); } var locationWidth = 12; var xScaling = (curMapWidth/360); var yScaling = (curMapHeight/180); var xOffset = (curMapWidth/2) - locationWidth/2; var yOffset = (curMapHeight/2) - locationWidth/2; var yPos = parseInt(i.attr('data-lat')); var xPos = parseInt(i.attr('data-long')); if (i.attr('data-lat').search(/S/i) != -1) // such as "10.5° S" { yPos = Math.abs(yPos); } else if ((i.attr('data-lat')).search(/N/i) != -1) // such as "51.5072° N" { yPos = -Math.abs(yPos); } else { yPos = -yPos; // such as "51.5" or "-10.5" } if (i.attr('data-long').search(/E/i) != -1) { xPos = Math.abs(xPos); } else if ((i.attr('data-long')).search(/W/i) != -1) { xPos = -Math.abs(xPos); } xPos = (parseInt(xOffset+(xPos*xScaling))).toString().concat("px"); yPos = (parseInt(yOffset+(yPos*yScaling))).toString().concat("px"); var locator = $(''); locator.css({'left':xPos,'top':yPos,'position':'absolute','width':'12px','height':'12px','opacity':'0.60','filter':'alpha(opacity=60)'}); locator.appendTo(i); }); });