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%; width: 98%;
height: 98%; height: 98%;
margin: 1% 1% 1% 1%; margin: 1% 1% 1% 1%;
image-rendering: -moz-crisp-edges; /* firefox */ image-rendering: -moz-crisp-edges; /* firefox */
image-rendering: pixelated; /* hopefully everyone eventually */ 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> <script src="map.js"></script>
</head> </head>
<body> <body>
<div id="map" style=""> <div id="mapcontainer">
<div id="info">
Position: <code id='mousemove'></code>
</div>
<div id="map">
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -14,12 +14,12 @@ function loadmap(config) {
var spawn = config.spawn; var spawn = config.spawn;
var zoommin = config.zoommin; var zoommin = config.zoommin;
var xb= 0-spawn.x+mapsize/2; 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(); 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]));
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', { var map = L.map('map', {
maxZoom:24, maxZoom:26,
minZoom:zoommin, minZoom:zoommin,
maxNativeZoom:20, maxNativeZoom:20,
fullscreenControl: true, fullscreenControl: true,
@ -42,11 +42,14 @@ function loadmap(config) {
}).setView([0,0], 22); }).setView([0,0], 22);
map.setView([spawn.x,spawn.y]); map.setView([spawn.x,spawn.y]);
L.tileLayer('tiles/{z}/map_{x}_{y}.png', { L.tileLayer('tiles/{z}/map_{x}_{y}.png', {
maxZoom: 24, maxZoom: 26,
maxNativeZoom: 20, maxNativeZoom: 20,
tileSize: 256, tileSize: 256,
continuousWorld: true continuousWorld: true
}).addTo(map); }).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); var hash = L.hash(map);
} }