ROWiki:Scripts/World Map.js

//

(function() {        
    var coordsBox;
    var dot;
    var mapContainer;
    var map;

    function goToCoords(e) {
        location.hash = "#" + coordsBox.value;
        placeDot();        

        if(e.preventDefault) e.preventDefault();
        else e.returnValue = false;
    }

    // Takes a string and gets the x & z coordinates from it. It simply takes 
    // the first two numbers it finds in the string, ignoring all other 
    // characters. It returns an object with 'x' and 'z' properties. If the 
    // string is invalid, the object will be returned with x & z as null.
    function parseCoords(coordsString) {

        var coordsObj = {x: 0, z: 0};              
        
        // This function is only called once per page load so meh to the regex
        // being defined here
        coordsRegex = /(\d{1,4}).*?(\d{1,4})/;
        var match = coordsRegex.exec(coordsString);
        if(match) {
            // Using parseFloat instead of parseInt because it doesn't have the
            // problem of leading zeros meaning octal numbers
            coordsObj.x = parseFloat(match[1]);
            coordsObj.z = parseFloat(match[2]);
        }
        
        return coordsObj;
    }

    function placeDot() {
        
        if(dot && dot.parentNode) dot.parentNode.removeChild(dot);

        var coordsStr = location.hash;
        if(coordsStr) {
            coordsStr = coordsStr.substr(1);
            var coords = parseCoords(coordsStr);
            if(coords.x > 6150) coords.x = 6150;
            if(coords.z > 6150) coords.z = 6150;

            coordsBox.value = coords.x + ", " + coords.z

            // Place dot at coord position
            if(coords.x || coords.z) {
                mapContainer.appendChild(dot);
                dot.style.left = (map.offsetWidth / 6150* coords.x - (dot.offsetWidth / 2)) + "px";
                dot.style.top = (map.offsetHeight / 6150* coords.z - (dot.offsetHeight / 2)) + "px";
            }
        }
    }

    addOnloadHook(function() {
        document.getElementById("inputContainer").innerHTML = 
            '<form>' +
            'Coords: <input id="coordsBox"/>' +
            '<input type="submit" id="coordsSubmit" value="Show location"/>' +
            '</form>';
        coordsBox = document.getElementById("coordsBox");
        addHandler(document.getElementById("coordsSubmit"), "click", goToCoords);
        
        mapContainer = document.getElementById("mapContainer")        
        map = mapContainer.getElementsByTagName("img")[0];
        
        dot = document.createElement("div");
        dot.setAttribute("style", 
            "position: absolute; width: 7px; height: 7px; " +
            "border: solid 2px black; background-color: red; ");

        placeDot();
    });
})();
//