• 0

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

    I've been using wzooff's modified unmined.leaflet.js code to create a map that includes a layer for the Overworld, Nether and End, as well as map markers to tag nether portals on either side. Curious if anyone is able to get these kinds of features working in OpenLayers?



    Hi. The only thing you can do now, its specify markers that will be permanently visible. Unfortunately, as i understand, openlayers cant dynamically create layers controls and you have to customize your webpage to add this controls.


    And if you want to improve readiness for current implementation of markers, you can edit unmined.openlayers.js Lines ~201-L204 to add stroke to marker style:

                 if (item.text)
                    style.setText(new ol.style.Text({
                        text: item.text,
                        font: item.font,
                        offsetX: item.offsetX,
                        offsetY: item.offsetY,
                        fill: new ol.style.Fill({
                            color: item.textColor
                        }),
    this section  --->  stroke: new ol.style.Stroke({
                          color: '#fff',
                          width: 3
                        })
                    }));

                        stroke: new ol.style.Stroke({
                          color: '#fff',
                          width: 3
                        })


    its works like a charm for me )

    Posted in: Minecraft Tools
  • 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 .