demo gps coordinate placement

demo gps coordinate placement

by chrisloughnane

HTML

<script src="http://danu2.it.nuigalway.ie/09101916/trazoo/demo_6/javascript/paths.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<div id="remove">remove Mayo</div>
<div class="wrapper">
    <div id="result"></div>
    <div id="map"></div>
</div>

CSS

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

#remove {
    cursor: pointer;
}

#Mayo { fill: green; }
    

#result {
    display: none;
}

JavaScript

$(function(){
    $('#remove').click(function (){
             $('#Mayo').remove();                    
    });   
  
    
    /* control variables */
    var previouscountyselected = "Mayo";
    var start = true;
    var last = null;
    var menu = false;
    var thisPath = null;
    connectArray = new Array();
    
    var paper = Raphael('map', 400, 500),
        attributes = {
            fill: '#fff',
            stroke: '#66CCFF',
            'stroke-width': 1.5,
            'stroke-linejoin': 'round',
            transform: 'S1,1,0,0'
        },
        arr = new Array();                
            
    for (var county in paths) {
        
        var obj = paper.path(paths[county].path);
            
        obj.attr(attributes);
        
        
        arr[obj.id] = county;
            
        if(arr[obj.id] == 'lakes')
            obj.attr(attributes).attr( { fill: "#66CCFF" } ); /* set lake colour */
                    
        if(arr[obj.id] != 'lakes') /* prevent change of lake colour and mouse click */
        {                
            obj.data('selected', 'notSelected');
        
            /* add ID to paths */
            obj.node.id = arr[obj.id];
            
            /* add title (for qtip) to paths */
            obj.attr(attributes).attr( { title: 'Co. '+paths[arr[obj.id]].name } ).attr({fill: "url(http://www.englishisfun.at/unserteam/eu_flag_small.jpg)"}); ;
            
            /* associate county names with path id's */
            connectArray[paths[arr[obj.id]].name] = obj.id;                
            
            /* add crests to bottom and set county selections */
            obj.click(function(){
                if(paths[arr[this.id]].value == 'notSelected')
                {
                    if(menu)
                    {
                        changeToWhite(previouscountyselected);
                        menu = false;
                    }

                    /* remove small crest */
                   ...