html improvements

Improvements:
-fix position bug
-display position of mouse pointer
-enable higher zoom in
This commit is contained in:
est31 2015-02-21 01:03:49 +01:00
parent e3d740cbb8
commit 9a9955601e
3 changed files with 30 additions and 5 deletions

View File

@ -1,7 +1,24 @@
#map {
#mapcontainer {
width: 98%;
height: 98%;
margin: 1% 1% 1% 1%;
image-rendering: -moz-crisp-edges; /* firefox */
image-rendering: pixelated; /* hopefully everyone eventually */
}
#map {
width: 100%;
height: 100%;
image-rendering: -moz-crisp-edges; /* firefox */
image-rendering: pixelated; /* hopefully everyone eventually */
}
#info {
background:#fff;
position:absolute;
top:calc(10px + 1%);
right:calc(10px + 1%);
padding:10px;
z-index:100;
border-radius:3px;
}

View File

@ -7,7 +7,12 @@
<script src="map.js"></script>
</head>
<body>
<div id="map" style="">
<div id="mapcontainer">
<div id="info">
Position: <code id='mousemove'></code>
</div>
<div id="map">
</div>
</div>
</body>
</html>

View File

@ -14,12 +14,12 @@ function loadmap(config) {
var spawn = config.spawn;
var zoommin = config.zoommin;
var xb= 0-spawn.x+mapsize/2;
var yb= 0-spawn.y-mapsize/2;
var yb= 0-spawn.y-mapsize/2-256;
var bnd = new L.LatLngBounds();
bnd.extend(L.latLng([spawn.x-mapsize/2, spawn.y-mapsize/2]));
bnd.extend(L.latLng([spawn.x+mapsize/2, spawn.y+mapsize/2]));
var map = L.map('map', {
maxZoom:24,
maxZoom:26,
minZoom:zoommin,
maxNativeZoom:20,
fullscreenControl: true,
@ -42,11 +42,14 @@ function loadmap(config) {
}).setView([0,0], 22);
map.setView([spawn.x,spawn.y]);
L.tileLayer('tiles/{z}/map_{x}_{y}.png', {
maxZoom: 24,
maxZoom: 26,
maxNativeZoom: 20,
tileSize: 256,
continuousWorld: true
}).addTo(map);
map.on('mousemove click', function(e) {
window.mousemove.innerHTML = e.latlng.lat.toFixed(1) + ', ' + e.latlng.lng.toFixed(1);
});
var hash = L.hash(map);
}