<!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 = false; // 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>