• 3

    posted a message on uNmINeD - 2D mapper [JE & BE, Windows / Mac / Linux]

    I hadn't dig enough, but coz generated html uses leafletjs, you can edit included js file and add as many layers as you want. For my world i've added day/night layers and additionall POIs of discovered villages :)


    this is modified unmined.leaflet.js


    function Unmined() {
    
        this.map = function (mapId, options, regions) {
    
            var minMapX = options.minRegionX * 512;
            var minMapY = options.minRegionZ * 512;
            var mapWidth = (options.maxRegionX + 1 - options.minRegionX) * 512;
            var mapHeight = (options.maxRegionZ + 1 - options.minRegionZ) * 512;
            var zoomOffset = 0 - options.minZoom;
    
            // add here your POIs
            var poi_stations = L.layerGroup([
                L.marker(map.unproject([0,0], zoomOffset), {icon: L.divIcon({iconSize: 0, html: '<span style="background-color:white">MarkerName</span>'})}),
            ]);
    
            var unminedLayer = new L.TileLayer.Functional(
                function (view) {
                    var zoom = view.zoom - zoomOffset;
                    zoomFactor = Math.pow(2, zoom);
    
                    var tileSize = 256;
    
                    var minTileX = Math.floor(minMapX * zoomFactor / tileSize);
                    var minTileY = Math.floor(minMapY * zoomFactor / tileSize);
                    var maxTileX = Math.ceil((minMapX + mapWidth) * zoomFactor / tileSize) - 1;
                    var maxTileY = Math.ceil((minMapY + mapHeight) * zoomFactor / tileSize) - 1;
    
                    var tileX = view.tile.column;
                    var tileY = view.tile.row;
    
                    var tileBlockSize = tileSize / zoomFactor;
                    var tileBlockPoint = {
                        x: tileX * tileBlockSize,
                        z: tileY * tileBlockSize
                    };
    
                    var intersectsWithTile = function (region) {
                        return (tileBlockPoint.x < (region.x + 1) * 512)
                            && (tileBlockPoint.x + tileBlockSize > region.x * 512)
                            && (tileBlockPoint.z < (region.z + 1) * 512)
                            && (tileBlockPoint.z + tileBlockSize > region.z * 512);
                    };
    
                    if (tileX >= minTileX
                        && tileY >= minTileY
                        && tileX <= maxTileX
                        && tileY <= maxTileY
                        && ((regions === undefined) || regions.some(intersectsWithTile))) {
                        var url = ('day/tiles/zoom.{z}/{xd}/{yd}/tile.{x}.{y}.' + options.imageFormat)
                            .replace('{z}', zoom)
                            .replace('{yd}', Math.floor(tileY / 10))
                            .replace('{xd}', Math.floor(tileX / 10))
                            .replace('{y}', view.tile.row)
                            .replace('{x}', view.tile.column);
                        return url;
                    }
                    else
                        return "tiles/empty." + options.imageFormat;
                },
                {
                    detectRetina: false
                });
    
            // below is copypasted unminedLayer variable with modified tile path
            var unminedLayerNight = new L.TileLayer.Functional(
                function (view) {
                    var zoom = view.zoom - zoomOffset;
                    zoomFactor = Math.pow(2, zoom);
    
                    var tileSize = 256;
    
                    var minTileX = Math.floor(minMapX * zoomFactor / tileSize);
                    var minTileY = Math.floor(minMapY * zoomFactor / tileSize);
                    var maxTileX = Math.ceil((minMapX + mapWidth) * zoomFactor / tileSize) - 1;
                    var maxTileY = Math.ceil((minMapY + mapHeight) * zoomFactor / tileSize) - 1;
    
                    var tileX = view.tile.column;
                    var tileY = view.tile.row;
    
                    var tileBlockSize = tileSize / zoomFactor;
                    var tileBlockPoint = {
                        x: tileX * tileBlockSize,
                        z: tileY * tileBlockSize
                    };
    
                    var intersectsWithTile = function (region) {
                        return (tileBlockPoint.x < (region.x + 1) * 512)
                            && (tileBlockPoint.x + tileBlockSize > region.x * 512)
                            && (tileBlockPoint.z < (region.z + 1) * 512)
                            && (tileBlockPoint.z + tileBlockSize > region.z * 512);
                    };
    
                    if (tileX >= minTileX
                        && tileY >= minTileY
                        && tileX <= maxTileX
                        && tileY <= maxTileY
                        && ((regions === undefined) || regions.some(intersectsWithTile))) {
                        var url = ('night/tiles/zoom.{z}/{xd}/{yd}/tile.{x}.{y}.' + options.imageFormat)
                            .replace('{z}', zoom)
                            .replace('{yd}', Math.floor(tileY / 10))
                            .replace('{xd}', Math.floor(tileX / 10))
                            .replace('{y}', view.tile.row)
                            .replace('{x}', view.tile.column);
                        return url;
                    }
                    else
                        return "tiles/empty." + options.imageFormat;
                },
                {
                    detectRetina: false
                });
    
    
            var map = L.map(mapId, {
                crs: L.CRS.Simple,
                minZoom: options.minZoom + zoomOffset,
                maxZoom: options.maxZoom + zoomOffset,
                layers: [unminedLayer],
                maxBoundsViscosity: 1.0
            }).setView([0, 0], options.defaultZoom + zoomOffset);
    
            var northWest = map.unproject([minMapX, minMapY], zoomOffset);
            var southEast = map.unproject([minMapX + mapWidth, minMapY + mapHeight], zoomOffset);
            map.setMaxBounds(new L.LatLngBounds(northWest, southEast));
    
            // defined layers for Day and Night tiles
            var baseMaps = {
              "Day": unminedLayer,
              "Night": unminedLayerNight,
            };
    
            // layer for POIs
            var overlayMaps = {
              "Stations": poi_stations,
            };
    
            // add everything to the Map
            L.control.layers(baseMaps, overlayMaps).addTo(map);
    
            this.leafletMap = map;
    
            var Position = L.Control.extend({
                _container: null,
                options: {
                    position: 'topright'
                },
    
                onAdd: function (map) {
                    var domElement = L.DomUtil.create('div', 'mouseposition');
                    this._domElement = domElement;
                    return domElement;
                },
    
                updateHTML: function (x, z) {
                    this._domElement.innerHTML = '<span class="mousepositioncoord">' + x.toLocaleString() + '</span>, <span class="mousepositioncoord">' + z.toLocaleString() + '</span>';
                }
            });
    
            this.position = new Position();
            this.leafletMap.addControl(this.position);
            this.leafletMap.addEventListener('mousemove', (event) => {
                var p = map.project(event.latlng, zoomOffset);
                let x = Math.round(p.x);
                let z = Math.round(p.y);
                this.position.updateHTML(x, z);
            });
        }
    }

    I generated html map. Then edited js file, also moved tiles folder to "day" subdirectory and generated night map in "night" subdirectory.

    Posted in: Minecraft Tools
  • To post a comment, please .