index.html

<html>
<head>
<script type="text/javascript" src="https://raw.github.com/stamen/modestmaps-js/master/modestmaps.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
// <!--
var hash = decodeURI(location.hash.substring(1)),
    coords, 
    map, 
    mm = com.modestmaps,
    default_location = {
            center: new mm.Location(37.76491, -122.41946), 
            zoom:13
        },
    url_delimiter = "!",
    layer,
    url = "http://tile.stamen.com/toner/{Z}/{X}/{Y}.png",
    tileseturl = url;

$(function() {
    $("#revealDialog").click(function(){
        console.info("revealDialog clicked", url);
        showDialog("Insert a mustache syntax URL here", url);
    });
    $("#close").click(function(){
        $("#dialog").hide();
        $("#revealDialog").show();
    });

    if (hash && hash.indexOf(url_delimiter) != -1) {
        var args = hash.split(url_delimiter);
        coords = args[0];
        url = args[1];
    } else {
        console.info("hash", hash, hash.indexOf(url_delimiter));
        url = "http://tile.stamen.com/toner/{Z}/{X}/{Y}.png";
        showDialog("No URL yet so we're using Toner. Want to add one?", url);
        //loadMap(url, default_location);
        //return;
    }
    
    // parse url and test for validity
    if (!isValidURL(url)) {
        showDialog("Our URL Validatron says your URL isn't valid. Want to fix it?", url);
        //return;
    } else if (!isValidMustache(url)) {
        url = url || "http://tile.stamen.com/toner/{Z}/{X}/{Y}.png";
        showDialog("We use mustaches here. You should too (ie. replace {Z} for zoom, {X} for latitude, and {Y} for longitude. An example is for Toner which is the default tileset: <em>http://tile.stamen.com/toner/{Z}/{X}/{Y}.png</em>  Want to fix it?", url);
        //return;
    } else {
        if (coords) {
            var cc = coords.split("/"),
                loc = {center:new mm.Location(cc[1],cc[2]),
                       zoom:cc[0]};
            loadMap(url,loc);
        } else {
            loadMap(url, default_location);
        }
    }
});

function loadMap(url, loc) {
    console.info("loadMap()", url, loc, map, layer);
    //loc = loc || map.getCenter() || {center:new mm.Location(37.811530, -122.2666097), zoom:13};
    //console.info("loc", loc);
    if (!loc && map) {
        loc = {
            center: map.getCenter(), 
            zoom: map.getZoom()
        };
    }
    console.info("loc", loc);
    loc = typeof loc !== "undefined" ? 
        loc : 
        default_location;
    //console.info("loc",loc);
    if (map && layer && typeof map !== "undefined" && map !== "null") {
        console.info("update layer", layer, url);
        layer.setProvider(new mm.TemplatedMapProvider(url));
        //var layer = new mm.Layer(new mm.TemplatedMapProvider(url));
        //map.removeLayerAt(0);
        //map.insertLayerAt(0,layer);
    } else {
        console.info("create new layer", map, layer);
       layer = new mm.Layer(new mm.TemplatedMapProvider(url));
        /*
        var interaction = [
            new MM.DragHandler(map),
            new MM.DoubleClickHandler(map)
        ];
        */
        console.info("layer", layer);
        map = new mm.Map("map", layer, null);
    }

    map.setCenterZoom(loc.center, loc.zoom);
    
    var hashhash = new mm.MyHash(map);
    tileseturl = url;
}


function showDialog(text, url) {
    console.info("showDialog()", text, url);
    $("#dialog input.textinput").attr("value", url);
    $("#dialog > span.text").html(text);
    $("#dialog").show();
    $("#revealDialog").hide();
}

function submitclicked() {
    console.info("submit clicked");
    url = unescape($("input.textinput").val());
    // validate url
    if (isValidURL(url) && isValidMustache(url)) {
        console.info("valid url:", url);
        loadMap(url, undefined);
        $("#dialog").hide();
        $("#revealDialog").show();
    } else {
        console.info("not valid url:", url);
        //show alert with error.
    }
}

function isValidURL(url){
    return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
}

function isValidMustache(url) {
    return (url.indexOf("{Z}") > 0 &&
            url.indexOf("{Y}") > 0 &&
            url.indexOf("{X}") > 0);
}

// -->
</script>
<style type="text/css">
body {font-family:"Helvetica Neue", Helvetica, sans-serif; margin:0;}

#map {width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0;}

#dialog {width:600px; margin:0 auto; background:#06F; text-align:left; display:none; padding:15px; position:relative; color:white;}
#dialog .title {font-size:36px; font-weight:bold; margin-bottom:10px;}
#dialog span.text {font-weight:bold; }
#dialog input.textinput {width:500px; font-size:14px; font-weight:bold; color:#666; border:0; padding:7px 10px; margin-top:10px;}
#dialog button.submitbutton {background-color:#06D; border:2px solid white; padding:5px 8px; font-size:14px; cursor:pointer; color:white;}
#dialog button.submitbutton:hover {color:#333; border-color:#333;}
#dialog #close {float:right; cursor:pointer; font-size:40px; margin-top:-15px;}
#dialog #close:hover {color:#333;}

#revealDialog {position:fixed; top:0; left:0; color:white; padding:0px 20px 3px 17px; font-size:40px; background-color:#06F; opacity:0.5; cursor:pointer;}
#revealDialog:hover {opacity:1; color:#333;}

</style>
</head>
<body defer>

<div id="map"></div>
<div id="dialog">
    <span id="close">×</span>
    <div class="title">TilesetViewer</div>
    <span class="text">message here</span><br>
    <form>
        <input class="textinput" type="text"  value="" /> 
        <button class="submitbutton" onClick="submitclicked()">Map it!</button>
    </form>
</div>
<div id="revealDialog">⁝</div>

</body>
<script type="text/javascript">
// namespacing!
if (!com) {
    var com = {};
}
if (!com.modestmaps) {
    com.modestmaps = {};
}

(function(MM) {

    var HAS_HASHCHANGE = (function() {
        var doc_mode = window.documentMode;
        return ("onhashchange" in window) &&
            (doc_mode === undefined || doc_mode > 7);
    })();

    MM.MyHash = function(map) {
        this.onMapMove = MM.bind(this.onMapMove, this);
        this.onHashChange = MM.bind(this.onHashChange, this);
        if (map) {
            this.init(map);
        }
    };

    MM.MyHash.prototype = {
        map: null,
        lastHash: null,

        parseHash: function(hash) {
            var args = hash.split("/");
            if (args.length == 3) {
                var zoom = parseInt(args[0], 10),
                    lat = parseFloat(args[1]),
                    lon = parseFloat(args[2]);
                if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
                    return false;
                } else {
                    return {
                        center: new MM.Location(lat, lon),
                        zoom: zoom
                    };
                }
            } else {
                return false;
            }
        },

        formatHash: function(map) {
            var center = map.getCenter(),
                zoom = map.getZoom(),
                precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));
            return "#" + [zoom,
                center.lat.toFixed(precision),
                center.lon.toFixed(precision)
            ].join("/") + "!" + tileseturl;
        },

        init: function(map) {
            this.map = map;
            this.map.addCallback("drawn", this.onMapMove);
            // reset the hash
            this.lastHash = null;
            this.onHashChange();

            if (!this.isListening) {
                this.startListening();
            }
        },

        remove: function() {
            this.map = null;
            if (this.isListening) {
                this.stopListening();
            }
        },

        onMapMove: function(map) {
            // bail if we're moving the map (updating from a hash),
            // or if the map has no zoom set
            if (this.movingMap || this.map.zoom === 0) {
                return false;
            }
            var hash = this.formatHash(map);
            if (this.lastHash != hash) {
                location.replace(hash);
                this.lastHash = hash;
            }
        },

        movingMap: false,
        update: function() {
            var hash = location.hash;
            if (hash === this.lastHash) {
                // console.info("(no change)");
                return;
            }
            var sansHash = hash.substr(1),
                parsed = this.parseHash(sansHash);
            if (parsed) {
                // console.log("parsed:", parsed.zoom, parsed.center.toString());
                this.movingMap = true;
                this.map.setCenterZoom(parsed.center, parsed.zoom);
                this.movingMap = false;
            } else {
                // console.warn("parse error; resetting:", this.map.getCenter(), this.map.getZoom());
                this.onMapMove(this.map);
            }
        },

        // defer hash change updates every 100ms
        changeDefer: 100,
        changeTimeout: null,
        onHashChange: function() {
            // throttle calls to update() so that they only happen every
            // `changeDefer` ms
            if (!this.changeTimeout) {
                var that = this;
                this.changeTimeout = setTimeout(function() {
                    that.update();
                    that.changeTimeout = null;
                }, this.changeDefer);
            }
        },

        isListening: false,
        hashChangeInterval: null,
        startListening: function() {
            if (HAS_HASHCHANGE) {
                window.addEventListener("hashchange", this.onHashChange, false);
            } else {
                clearInterval(this.hashChangeInterval);
                this.hashChangeInterval = setInterval(this.onHashChange, 50);
            }
            this.isListening = true;
        },

        stopListening: function() {
            if (HAS_HASHCHANGE) {
                window.removeEventListener("hashchange", this.onHashChange);
            } else {
                clearInterval(this.hashChangeInterval);
            }
            this.isListening = false;
        }
    };
})(com.modestmaps);
</script>
</html>