1

var map_config;

     2

var map;

     3

     4

L.Control.Link = L.Control.extend({

     5

    options: {

     6

        position: 'topright',

     7

        url: null,

     8

    },

     9

    10

    onAdd: function (map) {

    11

        var container = L.DomUtil.create('div', 'leaflet-control-link');

    12

    13

        var link = this.link = L.DomUtil.create('a', 'leaflet-control-link-link', container);

    14

    15

        map.on('move', this._update, this);

    16

    17

        return container;

    18

    },

    19

    20

    onRemove: function (map) {

    21

        map.off('move', this._update, this);

    22

    },

    23

    24

    _update: function (e) {

    25

        var map_center = map.getCenter();

    26

        var map_zoom = map.getZoom();

    27

        var size = map.getSize();

    28

    29

        var x = (+map_center.lng) * Math.pow(2, map_config.tile_zoom);

    30

        var y = (-map_center.lat) * Math.pow(2, map_config.tile_zoom);

    31

        var zoom = map_config.tile_zoom - map_zoom;

    32

    33

        var state = {

    34

            w: size.x,

    35

            h: size.y,

    36

            x: x >> zoom,

    37

            y: y >> zoom,

    38

            z: zoom

    39

        };

    40

    41

        var url = L.Util.template(this.options.url, L.extend(state, this.options));

    42

    43

        this.link.href = url;

    44

    45

        with (state) {

    46

            this.link.innerHTML = w + 'x' + h + ' @ (' + x + ', ' + y + ') @ ' + z;

    47

        }

    48

    },

    49

});

    50

    51

L.control.link = function (options) {

    52

    return new L.Control.Link(options);

    53

};

    54

    55

function map_init (_config) {

    56

    map_config = _config;

    57

    58

    // pixel coordinates

    59

    var bounds = L.latLngBounds(

    60

        L.latLng(-map_config.image_height, 0),

    61

        L.latLng(0, +map_config.image_width)

    62

    );

    63

    64

    // in zoom-scaled coordinates

    65

    var map_bounds = [

    66

        [ -(map_config.image_height >> map_config.tile_zoom), 0 ],

    67

        [ 0, +(map_config.image_width >> map_config.tile_zoom) ], 

    68

    ];

    69

    70

    map = L.map('map', {

    71

        crs: L              .CRS.Simple,

    72

        minZoom:            0,

    73

        maxZoom:            map_config.tile_zoom,

    74

        maxBounds:          map_bounds

    75

    });

    76

    77

    map.on('move', map_move);

    78

    79

    L.tileLayer(map_config.tile_url, {

    80

        tiles_url:          map_config.tiles_url,

    81

        tiles_mtime:        map_config.tiles_mtime,

    82

        minZoom:            0,

    83

        maxZoom:            map_config.tile_zoom,

    84

        tileSize:           map_config.tile_size,

    85

        continuousWorld:    true,

    86

        noWrap:             true,

    87

        zoomReverse:        true,

    88

        bounds:             bounds

    89

    }).addTo(map);

    90

    91

    // controls

    92

    L.control.link({

    93

        url:        map_config.image_url,

    94

        tiles_url:  map_config.tiles_url,

    95

        tiles_mtime:        map_config.tiles_mtime,

    96

    }).addTo(map);

    97

    98

    // set position

    99

    var x = bounds.getCenter().lng;

   100

    var y = -bounds.getCenter().lat;

   101

    var z = 0;

   102

   103

    if (document.location.hash) {

   104

        // parse x:y:z tuple

   105

        var pt = document.location.hash.substr(1).split(":");

   106

   107

        // unpack    

   108

        if (pt.length) x = parseInt(pt.shift()) || x;

   109

        if (pt.length) y = parseInt(pt.shift()) || y;

   110

        if (pt.length) z = parseInt(pt.shift()) || z;

   111

    }

   112

   113

    map_center(x, y, z);

   114

}

   115

   116

function map_move () {

   117

    var map_center = map.getCenter();

   118

    var map_zoom = map.getZoom();

   119

   120

    var x = (+map_center.lng) << map_config.tile_zoom;

   121

    var y = (-map_center.lat) << map_config.tile_zoom;

   122

    var z = map_config.tile_zoom - map_zoom;

   123

   124

    document.location.hash = x + ":" + y + ":" + z;

   125

}

   126

   127

/*

   128

 * Position map based on pngtile coordinates

   129

 */

   130

function map_center (x, y, z) {

   131

    // translate to lat/lng

   132

    // leaflet seems to base its latlng coordinates on the max zoom level

   133

    var map_center = [

   134

        -(y >> map_config.tile_zoom),

   135

        +(x >> map_config.tile_zoom),

   136

    ];

   137

   138

    // reversed zoom

   139

    var map_zoom = map_config.tile_zoom - z;

   140

   141

    map.setView(map_center, map_zoom);

   142

}

   143