-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
143 lines (126 loc) · 5.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<title>Ketchu Free Party map</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/leaflet.css"/>
<link rel="stylesheet" href="css/L.Control.MousePosition.css"/>
<link rel="stylesheet" href="css/toggle.css"/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#c11;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style><span id="forkongithub"><a href="https://github.com/nicolas-f/7DTD-leaflet">Fork me on GitHub</a></span>
<nav id='menu-ui' class='menu-ui'></nav>
<div id="map"></div>
<script src="js/leaflet.js"></script>
<script src='js/leaflet-omnivore.min.js'></script>
<script src='js/L.Control.MousePosition.js'></script>
<script>
native_zoom_level = 8;
// Apply Alloc's coordinate transformation
// http://7daystodie.com/forums/member.php?45-Alloc
myProjection = {
project: function (latlng) {
return new L.Point((latlng.lng - 1) / Math.pow(2, native_zoom_level), (latlng.lat + 2) / Math.pow(2, native_zoom_level));
},
unproject: function (point) {
return new L.LatLng(point.y * Math.pow(2, native_zoom_level) + 1, point.x * Math.pow(2, native_zoom_level) - 2);
}
};
myCRS = L.extend({}, L.CRS.Simple, {
projection: myProjection,
scale: function (zoom) {
return Math.pow(2, zoom);
}
});
var map = L.map('map', {
zoomControl: true,
attributionControl: false,
crs: myCRS
}).setView([0, 0], native_zoom_level / 2);
var layers = document.getElementById('menu-ui');
L.tileLayer('tiles/{z}/{x}/{y}.png', {maxNativeZoom : native_zoom_level, continuousWorld: 'false', attribution: '©The Fun Pimps'}).addTo(map);
// Add mouse position
L.control.mousePosition({
lngFormatter : function(pos) {
// lng to W E
return Math.abs(Math.round(pos)) + (pos <=0 ? " W" : " E");
},
latFormatter : function(pos) {
// lng to S N
return Math.abs(Math.round(pos)) + (pos >=0 ? " N" : " S");
}
}).addTo(map);
// Add overlay region tiles rectangles and text
var canvasTiles = L.tileLayer.canvas({continuousWorld: 'false'});
canvasTiles.drawTile = function(canvas, tilePoint, zoom) {
if(zoom >= native_zoom_level /2 && zoom <= native_zoom_level - 1) {
var ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.35;
var zoomFactor = Math.pow(2,native_zoom_level) / Math.pow(2,zoom);
var tileSize = 512 / zoomFactor;
ctx.fillStyle="white";
ctx.strokeStyle="red";
ctx.font="12px Georgia";
ctx.lineWidth="2";
for(i=0; i < zoomFactor / 2; i++) {
for(j=0; j < zoomFactor / 2; j++) {
ctx.rect(i*tileSize,j*tileSize,(i + 1)*tileSize,(j+1)*tileSize);
}
}
ctx.stroke();
ctx.globalAlpha = 0.8;
ctx.fillStyle="white";
ctx.shadowBlur = 1;
ctx.shadowColor = "black";
for(i=0; i < zoomFactor / 2; i++) {
for(j=0; j < zoomFactor / 2; j++) {
var txt = (tilePoint.x * (zoomFactor / 2) + i)+","+(-tilePoint.y * (zoomFactor / 2) - j - 1 )
var txt_width = ctx.measureText(txt).width
var txtOffset = 0
if(zoomFactor == 1) {
txtOffset = -(tileSize / 2)
}
ctx.shadowOffsetX = 1;
ctx.shadowOffsetY = -1;
ctx.fillText(txt, i*tileSize + tileSize / 2 - txt_width / 2,j*tileSize + tileSize / 2 + 10, tileSize);
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = 1;
ctx.fillText(txt, i*tileSize + tileSize / 2 - txt_width / 2,j*tileSize + tileSize / 2 + 10, tileSize);
}
}
}
};
addLayer(canvasTiles, 'Region tiles', 2, false);
function addLayer(layer, name, zIndex, active) {
if(active) {
layer
.setZIndex(zIndex)
.addTo(map);
}
// Create a simple layer switcher that
// toggles layers on and off.
var link = document.createElement('a');
link.href = '#';
link.className = active ? 'active' : '';
link.innerHTML = name;
link.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
if (map.hasLayer(layer)) {
map.removeLayer(layer);
this.className = '';
} else {
map.addLayer(layer);
this.className = 'active';
}
};
layers.appendChild(link);
}
</script>
</body>
</html>