mirror of
https://bitbucket.org/s_l_teichmann/mtsatellite
synced 2025-08-10 03:00:26 +02:00
cmd
mtdbconverter
mtredisalize
mtseeder
mttilemapper
mtwebmapper
web
css
fonts
js
markers
index.html
forwardupdates.go
main.go
misc.go
players.go
subbaseline.go
tilesupdater.go
common
mods
COMPILE.md
LICENSE
README.md
SETUP.md
TODO
colors.txt
3e3413566b
If there are not, nothing changed, so nothing to recalculate. Takes a good deal from the clock.
153 lines
4.3 KiB
HTML
153 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Minetest demo map</title>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="css/leaflet.css" />
|
|
<link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.4.css" />
|
|
<link rel="stylesheet" href="css/font-awesome.css" />
|
|
<link rel="stylesheet" href="css/leaflet.awesome-markers.css" />
|
|
<style type="text/css">
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
#map {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #111111;
|
|
}
|
|
|
|
.leaflet-container {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.leaflet-control-coordinates,
|
|
.leaflet-control-layers {
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
background-color:rgba(255,255,255,.85);
|
|
}
|
|
.awesome-marker i {
|
|
font-size: 18px;
|
|
margin-left: -1px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script src="js/leaflet.js"></script>
|
|
<script src="js/Leaflet.Coordinates-0.1.4.min.js"></script>
|
|
<script src="js/easy-button.js"></script>
|
|
<script src="js/auto-update.js"></script>
|
|
<script type="text/javascript" src="js/leaflet-hash.js"></script>
|
|
<script type="text/javascript" src="js/leaflet.ajax.js"></script>
|
|
<script type="text/javascript" src="js/leaflet.awesome-markers.js"></script>
|
|
<script>
|
|
|
|
var useWebsocket = true; // Set to true if you want websocket support
|
|
|
|
L.Projection.NoWrap = {
|
|
project: function (latlng) {
|
|
return new L.Point(latlng.lat, latlng.lng);
|
|
},
|
|
|
|
unproject: function (point, unbounded) {
|
|
return new L.LatLng(point.x, point.y, true);
|
|
}
|
|
};
|
|
|
|
L.CRS.Direct = L.Util.extend({}, L.CRS, {
|
|
code: 'Direct',
|
|
projection: L.Projection.NoWrap,
|
|
transformation: new L.Transformation(1.0/65536, 30928.0/65536, -1.0/65536, 34608.0/65536)
|
|
});
|
|
|
|
var world = new L.tileLayer('map/{z}/{x}/{y}.png', {
|
|
minZoom: 0,
|
|
maxZoom: 16,
|
|
attribution: 'Demo world',
|
|
continuousWorld: false,
|
|
noWrap: true,
|
|
tms: true,
|
|
unloadInvisibleTiles: true
|
|
});
|
|
|
|
var players = L.geoJson.ajax('/players', {
|
|
pointToLayer: function(feature, latlng) {
|
|
return L.marker(latlng, {
|
|
icon: L.AwesomeMarkers.icon({
|
|
icon: 'male',
|
|
iconColor: 'black',
|
|
prefix: 'fa',
|
|
markerColor: 'orange'
|
|
}),
|
|
title: feature.properties.name
|
|
})
|
|
}
|
|
});
|
|
var rasterMaps = {
|
|
"A demo world": world,
|
|
};
|
|
|
|
var latest = world
|
|
|
|
var overlayMaps = {'Players': players};
|
|
|
|
var map = L.map('map', {
|
|
center: [0,0],
|
|
zoom: 3,
|
|
layers: [latest],
|
|
worldCopyJump: false,
|
|
crs: L.CRS.Direct});
|
|
|
|
L.control.coordinates({
|
|
position:"topright", //optional default "bootomright"
|
|
decimals:0, //optional default 4
|
|
decimalSeperator:".", //optional default "."
|
|
labelTemplateLat:"X: {y}", //optional default "Lat: {y}"
|
|
labelTemplateLng:"Y: {x}", //optional default "Lng: {x}"
|
|
enableUserInput:false, //optional default true
|
|
useDMS:false, //optional default false
|
|
useLatLngOrder: true //ordering of labels, default false-> lng-lat
|
|
}).addTo(map);
|
|
|
|
var manualUpdateControl;
|
|
if (useWebsocket && 'WebSocket' in window) {
|
|
L.autoUpdate('autoUpdate', function(pressed) {
|
|
var styleDec = manualUpdateControl.getContainer().style;
|
|
styleDec.visibility = pressed ? 'hidden' : 'visible';
|
|
},
|
|
players);
|
|
}
|
|
var layersControl = new L.Control.Layers(rasterMaps, overlayMaps, {collapsed: false});
|
|
map.addControl(layersControl);
|
|
|
|
manualUpdateControl = L.easyButton('fa-refresh',
|
|
function (){
|
|
var tiles = document.getElementsByTagName("img");
|
|
for (var i = 0; i < tiles.length; i++) {
|
|
var img = tiles[i];
|
|
var cl = img.getAttribute("class");
|
|
if (cl.indexOf("leaflet-tile-loaded") >= 0) {
|
|
var src = img.src;
|
|
var idx = src.lastIndexOf("#");
|
|
if (idx >= 0) {
|
|
src = src.substring(0, idx);
|
|
}
|
|
img.src = src + "#" + Math.random();
|
|
}
|
|
}
|
|
//map._resetView(map.getCenter(), map.getZoom(), false);
|
|
players.refresh("/players");
|
|
},
|
|
'Update view'
|
|
);
|
|
var hash = new L.Hash(map)
|
|
</script>
|
|
</body>
|
|
</html>
|