author | Tero Marttila <terom@qmsk.net> |
Fri, 03 Oct 2014 23:03:15 +0300 | |
changeset 160 | 9953c5fe3629 |
parent 153 | 55f3d3bc95d3 |
child 168 | 260aa4a05e82 |
permissions | -rw-r--r-- |
142
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
1 |
var map_config; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
2 |
var map; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
3 |
|
145
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
4 |
L.Control.Link = L.Control.extend({ |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
5 |
options: { |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
6 |
position: 'topright', |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
7 |
url: null, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
8 |
}, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
9 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
10 |
onAdd: function (map) { |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
11 |
var container = L.DomUtil.create('div', 'leaflet-control-link'); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
12 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
13 |
var link = this.link = L.DomUtil.create('a', 'leaflet-control-link-link', container); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
14 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
15 |
map.on('move', this._update, this); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
16 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
17 |
return container; |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
18 |
}, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
19 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
20 |
onRemove: function (map) { |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
21 |
map.off('move', this._update, this); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
22 |
}, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
23 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
24 |
_update: function (e) { |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
25 |
var map_center = map.getCenter(); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
26 |
var map_zoom = map.getZoom(); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
27 |
var size = map.getSize(); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
28 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
29 |
var state = { |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
30 |
w: size.x, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
31 |
h: size.y, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
32 |
x: (+map_center.lng) << map_config.tile_zoom, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
33 |
y: (-map_center.lat) << map_config.tile_zoom, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
34 |
z: map_config.tile_zoom - map_zoom, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
35 |
}; |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
36 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
37 |
var url = L.Util.template(this.options.url, L.extend(state, this.options)); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
38 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
39 |
this.link.href = url; |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
40 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
41 |
with (state) { |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
42 |
this.link.innerHTML = w + 'x' + h + ' @ (' + x + ', ' + y + ') @ ' + z; |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
43 |
} |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
44 |
}, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
45 |
}); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
46 |
|
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
47 |
L.control.link = function (options) { |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
48 |
return new L.Control.Link(options); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
49 |
}; |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
50 |
|
142
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
51 |
function map_init (_config) { |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
52 |
map_config = _config; |
143 | 53 |
|
54 |
// pixel coordinates |
|
142
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
55 |
var bounds = L.latLngBounds( |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
56 |
L.latLng(-map_config.image_height, 0), |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
57 |
L.latLng(0, +map_config.image_width) |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
58 |
); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
59 |
|
143 | 60 |
// in zoom-scaled coordinates |
61 |
var map_bounds = [ |
|
62 |
[ -(map_config.image_height >> map_config.tile_zoom), 0 ], |
|
63 |
[ 0, +(map_config.image_width >> map_config.tile_zoom) ], |
|
64 |
]; |
|
65 |
||
142
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
66 |
map = L.map('map', { |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
67 |
crs: L .CRS.Simple, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
68 |
minZoom: 0, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
69 |
maxZoom: map_config.tile_zoom, |
143 | 70 |
maxBounds: map_bounds |
142
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
71 |
}); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
72 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
73 |
map.on('move', map_move); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
74 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
75 |
L.tileLayer(map_config.tile_url, { |
153
55f3d3bc95d3
pngtile.image: use --tile-server as url, fix render_dir href's, support legacy urls
Tero Marttila <terom@qmsk.net>
parents:
145
diff
changeset
|
76 |
server: map_config.tile_server, |
142
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
77 |
name: map_config.tile_name, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
78 |
minZoom: 0, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
79 |
maxZoom: map_config.tile_zoom, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
80 |
tileSize: map_config.tile_size, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
81 |
continuousWorld: true, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
82 |
noWrap: true, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
83 |
zoomReverse: true, |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
84 |
bounds: bounds |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
85 |
}).addTo(map); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
86 |
|
145
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
87 |
// controls |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
88 |
L.control.link({ |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
89 |
url: map_config.image_url, |
153
55f3d3bc95d3
pngtile.image: use --tile-server as url, fix render_dir href's, support legacy urls
Tero Marttila <terom@qmsk.net>
parents:
145
diff
changeset
|
90 |
server: map_config.image_server, |
145
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
91 |
name: map_config.image_name, |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
92 |
}).addTo(map); |
51908b0cc3a1
pngtile.image: render map link
Tero Marttila <terom@paivola.fi>
parents:
143
diff
changeset
|
93 |
|
142
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
94 |
// set position |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
95 |
var x = bounds.getCenter().lng; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
96 |
var y = -bounds.getCenter().lat; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
97 |
var z = 0; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
98 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
99 |
if (document.location.hash) { |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
100 |
// parse x:y:z tuple |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
101 |
var pt = document.location.hash.substr(1).split(":"); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
102 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
103 |
// unpack |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
104 |
if (pt.length) x = parseInt(pt.shift()) || x; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
105 |
if (pt.length) y = parseInt(pt.shift()) || y; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
106 |
if (pt.length) z = parseInt(pt.shift()) || z; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
107 |
} |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
108 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
109 |
map_center(x, y, z); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
110 |
} |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
111 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
112 |
function map_move () { |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
113 |
var map_center = map.getCenter(); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
114 |
var map_zoom = map.getZoom(); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
115 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
116 |
var x = (+map_center.lng) << map_config.tile_zoom; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
117 |
var y = (-map_center.lat) << map_config.tile_zoom; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
118 |
var z = map_config.tile_zoom - map_zoom; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
119 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
120 |
document.location.hash = x + ":" + y + ":" + z; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
121 |
} |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
122 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
123 |
/* |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
124 |
* Position map based on pngtile coordinates |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
125 |
*/ |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
126 |
function map_center (x, y, z) { |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
127 |
// translate to lat/lng |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
128 |
// leaflet seems to base its latlng coordinates on the max zoom level |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
129 |
var map_center = [ |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
130 |
-(y >> map_config.tile_zoom), |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
131 |
+(x >> map_config.tile_zoom), |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
132 |
]; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
133 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
134 |
// reversed zoom |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
135 |
var map_zoom = map_config.tile_zoom - z; |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
136 |
|
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
137 |
map.setView(map_center, map_zoom); |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
138 |
} |
9b316e83e9e3
pngtile.image: split out javascript and rename js/css to map
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
139 |