demo gps coordinate placement

demo gps coordinate placement

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="http://trazoo.chrisloughnane.com/javascript/paths.js"></script>
<div class="wrapper">
    <div id="result"></div>
    <div id="map"></div>
</div>

CSS

#result {
    position: absolute;
    z-index: 1;
}

#remove {
    cursor: pointer;
}
   

#result {
    display: none;
}

JavaScript

$(function(){
/*
    CONTROL VARIABLES
*/
    var bottomPosition = $(window).height();    
    var previouscountyselected = "Mayo";
    var start = true;
    var last = null;
    var menu = false;
    var thisPath = null;
    var xlongitude, ylatitude;
    var defaultColour = '#6E7E94';
    var fadeInColour = '#6E7E94';
    var highlightColour = '#91816B';
    var selectedCounty = null;
    var isPathSelected;
    
    /*
        GAME VARIABLES
    */    
    var thiscounty;

    
    connectArray = new Array();
    

  
    var paper = Raphael('map', 900,900),
        attributes = {
            fill: '#fff',
            stroke: defaultColour,
            'stroke-width': 1.5,
            'stroke-linejoin': 'round',
            transform: 'S2.5,2.5,0,0'
        },
        arr = new Array();                
/*
    END CONTROL & GAME VARIABLES
*/

/* 
    DRAW SVG MAP
*/    
    for (var county in paths) {
        
        var obj = paper.path(paths[county].path);
        var bbox = obj.getBBox();
        obj.dx = -0.4 * (bbox.x + bbox.width / 2);
        obj.dy = -0.4 * (bbox.y + bbox.height / 2);
        obj.attr(attributes);
        
        arr[obj.id] = county;
                     
            obj.data('selected', 'notSelected');
        
            /* add ID to paths */
            obj.node.id = arr[obj.id];
            
            /* associate county names with path id's */
            connectArray[paths[arr[obj.id]].name] = obj.id;                
            
        
            /* COUNTY HOVER */
            function hoverin(e){
                $('#coatOfArms').addClass(arr[this.id]+'large sprite-largecrests');
                this.stop();
                //we want to calculate based on the original bbox, pre-scaling
                //var center = this.getBBox();
                //This is the adjustment back in x,y coordinates based on the difference between the scaling values (2.5-2.9)
                //var adjustx = -0.4 * (this.bbox.x +...