Dynmap RegionGrid component

regiongrid.js

componentconstructors['regiongrid'] = function(dynmap, configuration) {
	// var cfg = $.extend({}, configuration);

	var me = this;

	this.chunkGroup = new L.LayerGroup();
	this.regionGroup = new L.LayerGroup();
	this.chunkMarkers = [];
	this.regionMarkers = [];

	this.chunkStyle = {
		color: '#800000',
		weight: '1',
		opacity: 0.6,
		clickable: false,
		fill: false
	};
	this.regionStyle = {
		color: '#000080',
		weight: '3',
		opacity: 0.6,
		clickable: false,
		fill: false
	};

	dynmap.addToLayerSelector(this.chunkGroup, 'Chunks', -1);
	dynmap.addToLayerSelector(this.regionGroup, 'Regions', -1);
	
	dynmap.map.on('moveend', function () {
		setTimeout(function () {updateGrid();}, 0);
	});

	dynmap.map.on('layeradd layerremove', function (event) {
		if (event.layer === me.chunkGroup || event.layer === me.regionGroup)
		{
			updateGrid();
		}
	});

	function updateGrid() {
		removeMarkers(me.chunkMarkers, me.chunkGroup);
		removeMarkers(me.regionMarkers, me.regionGroup);

		if (!dynmap.map.hasLayer(me.chunkGroup) && !dynmap.map.hasLayer(me.regionGroup))
		{
			return;
		}

		var minMax = getMinMaxData();

		addAreas(me.chunkGroup, me.chunkMarkers, me.chunkStyle, 16, minMax.minChunk, minMax.maxChunk);
		addAreas(me.regionGroup, me.regionMarkers, me.regionStyle, 16*32, minMax.minRegion, minMax.maxRegion);
	}

	function removeMarkers(markers, group) {
		while (markers.length) {
			group.removeLayer(markers.pop());
		}
	}

	function addAreas(group, markers, style, multiplier, min, max) {
		if (!dynmap.map.hasLayer(group)) return;
		if ((max.x - min.x) * (max.z - min.z) > 1500) return; // for performance reasons

		for (var x = min.x; x < max.x; x++) {
			for (var z = min.z; z < max.z; z++) {
				var pointList = [
					latlng(x * multiplier, 64, (z + 1) * multiplier),
					latlng((x + 1) * multiplier, 64, (z + 1) * multiplier),
					latlng((x + 1) * multiplier, 64, z * multiplier)
				];
				var marker = new L.Polyline(pointList, style);
				markers.push(marker);
				group.addLayer(marker);
			}
		}
	}

	function getMinMaxData() {
		// 0,0 => chunk 0 0 => region 0 0
		// 15, 15 => chunk 0 0 => region 0 0
		// 16, 16 => chunk 1 1 => region 0 0
		// 12228, 8898 => chunk 764 556 => region 23 17

		var bounds = dynmap.map.getBounds(),
			projection = dynmap.maptype.getProjection();

		var ne = projection.fromLatLngToLocation(bounds.getNorthEast(), 64),
			se = projection.fromLatLngToLocation(bounds.getSouthEast(), 64),
			sw = projection.fromLatLngToLocation(bounds.getSouthWest(), 64),
			nw = projection.fromLatLngToLocation(bounds.getNorthWest(), 64);

		var minX = Math.min(ne.x, se.x, sw.x, nw.x),
			maxX = Math.max(ne.x, se.x, sw.x, nw.x),
			minZ = Math.min(ne.z, se.z, sw.z, nw.z),
			maxZ = Math.max(ne.z, se.z, sw.z, nw.z),

			minChunk = {
				x: Math.floor(minX / 16) - 1,
				z: Math.floor(minZ / 16) - 1
			},
			maxChunk = {
				x: Math.ceil(maxX / 16) + 1,
				z: Math.ceil(maxZ / 16) + 1
			},

			minRegion = {
				x: Math.floor(minChunk.x / 32),
				z: Math.floor(minChunk.z / 32)
			},
			maxRegion = {
				x: Math.ceil(maxChunk.x / 32),
				z: Math.ceil(maxChunk.z / 32)
			};

		return {
			minChunk: minChunk,
			maxChunk: maxChunk,
			minRegion: minRegion,
			maxRegion: maxRegion
		};
	}
};

Made a little change that should fix panning the map not causing the grid to update on newer versions on dynmap.

Usage instructions:

• save the contents of this gist as a regiongrid.js file
• put the file into server/plugins/dynmap/web/js
• open the dynmap configuration file located at server/plugins/dynmap/configuration.txt
• find the section named components:
• add the following lines to the section:

  - class: org.dynmap.ClientComponent
    type: regiongrid

There are other ClientComponent definitions in that section. Sticking the new definition somewhere between them would work just fine.
Note that it is very important to keep the whitespace exactly as-is or it will not properly work

• reload dynmap. This is most easily done by just restarting the Minecraft server.

After this, the "Chunks" and "Regions" layers should appear in the layer selection menu:

Hi @Pisi-Deff, I just found this and realized this is very similar to something I've been wanting to add to my Dynmap fork GTNH-Web-Map for some time. Can I include a modified version of this (I primarily also want a 3x3 grid as it makes sense for the GTNH modpack) in the distribution? The fork is licensed under APL2, like the upstream project.

Heya @dvdmandt :)

Can I include a modified version of this

That's totally fine 👍

Hi again @Pisi-Deff! Sorry for the delay, I got a really nasty cold and got pretty knocked out. This is my modified version, which supports configuring the grids in configuration.txt. It also draws the lines from edge to edge instead of around every chunk/region for improved performance.

Is this credit section good with you?

/* Original by Eerik Mägi (Pisi-Deff @ GitHub)
 * https://gist.github.com/Pisi-Deff/92e00008f809383c82d926f843b6dd0f
*/

componentconstructors['regiongrid'] = function(dynmap, configuration) {
	// var cfg = $.extend({}, configuration);

	var me = this;
	
	if(configuration.grids){
		this.grids = [];
		for(var i = 0; i < configuration.grids.length; i++) {
			var cfgGrid = configuration.grids[i];
			var newGrid = makeSet(cfgGrid.sizeInChunks*16, cfgGrid.weight, cfgGrid.color, cfgGrid.title);
			this.grids.push(newGrid);
		}
	}
	else{
		this.grids = [
			makeSet(16, '1', '#800000', 'Grid - Chunks'),
			makeSet(16*32, '3', '#000080', 'Grid - Regions'),
		];
	}
	
	dynmap.map.on('moveend', function () {
		setTimeout(function () {updateGrid();}, 0);
	});

	dynmap.map.on('layeradd layerremove', function (event) {
		for(var i = 0; i < me.grids.length; i++){
			if (event.layer === me.grids[i].group)
			{
				updateGrid();
				break;
			}
		}
	});

	function updateGrid() {
		var atLeastOne = false;
		for(var i = 0; i < me.grids.length; i++){
			removeMarkers(me.grids[i].markers, me.grids[i].group);
			if(dynmap.map.hasLayer(me.grids[i].group))
				atLeastOne = true;
		}


		if (!atLeastOne){
			return;
		}

		var minMax = getMinMaxData();

		for(var i = 0; i < me.grids.length; i++){
			addAreas(me.grids[i].group, me.grids[i].markers, me.grids[i].style, me.grids[i].sizeInBlocks, minMax.minBlock, minMax.maxBlock);
		}
		
	}

	function removeMarkers(markers, group) {
		while (markers.length) {
			group.removeLayer(markers.pop());
		}
	}

	function addAreas(group, markers, style, multiplier, min, max) {
		if (!dynmap.map.hasLayer(group)) return;

		var minx = Math.floor(min.x / multiplier) - 50;
		var maxx = Math.ceil(max.x / multiplier) + 50;
		var minz = Math.floor(min.z / multiplier) - 50;
		var maxz = Math.ceil(max.z / multiplier) + 50;
		
		if (Math.max(maxx - minx, maxz - minz) > 500) return; // for performance reasons, plus it's not useful at this stage
		
		for (var x = minx; x < maxx; x++) {
			var pointList = [
				latlng(x * multiplier, 64, minz * multiplier),
				latlng(x * multiplier, 64, maxz * multiplier)
			];
			var marker = new L.Polyline(pointList, style);
			markers.push(marker);
			group.addLayer(marker);
		}
		for (var z = minz; z < maxz; z++) {
			var pointList = [
				latlng(minx * multiplier, 64, z * multiplier),
				latlng(maxx * multiplier, 64, z * multiplier)
			];
			var marker = new L.Polyline(pointList, style);
			markers.push(marker);
			group.addLayer(marker);
		}
	}

	function getMinMaxData() {
		// 0,0 => chunk 0 0 => region 0 0
		// 15, 15 => chunk 0 0 => region 0 0
		// 16, 16 => chunk 1 1 => region 0 0
		// 12228, 8898 => chunk 764 556 => region 23 17

		var bounds = dynmap.map.getBounds(),
			projection = dynmap.maptype.getProjection();

		var ne = projection.fromLatLngToLocation(bounds.getNorthEast(), 64),
			se = projection.fromLatLngToLocation(bounds.getSouthEast(), 64),
			sw = projection.fromLatLngToLocation(bounds.getSouthWest(), 64),
			nw = projection.fromLatLngToLocation(bounds.getNorthWest(), 64);

		var minX = Math.min(ne.x, se.x, sw.x, nw.x),
			maxX = Math.max(ne.x, se.x, sw.x, nw.x),
			minZ = Math.min(ne.z, se.z, sw.z, nw.z),
			maxZ = Math.max(ne.z, se.z, sw.z, nw.z),

			minBlock = {
				x: minX,
				z: minZ
			},
			maxBlock = {
				x: maxX,
				z: maxZ
			};

		return {
			minBlock: minBlock,
			maxBlock: maxBlock
		};
	}
	function makeSet(sizeInBlocks, weight, color, title){
		var group = new L.LayerGroup();
		var markers = [];
		var style = {
			color: color,
			weight: weight,
			opacity: 0.6,
			clickable: false,
			fill: false
		};
		dynmap.addToLayerSelector(group, title, 1000 + sizeInBlocks);
		
		return {
			group: group,
			markers: markers,
			style: style,
			sizeInBlocks: sizeInBlocks
		};
	}
};

Example configuration:

  - class: org.dynmap.ClientComponent
    type: regiongrid
    grids:
      - title: "Grid - Chunks"
        sizeInChunks: 1
        color: "#FF0000"
        weight: 1
      - title: "Grid - Veins (3x3)"
        sizeInChunks: 3
        color: "#00FFFF"
        weight: 2
      - title: "Grid - Oilfields (8x8)"
        sizeInChunks: 8
        color: "#FFFF00"
        weight: 3
      - title: "Grid - Regions (32x32)"
        sizeInChunks: 32
        color: "#0000FF"
        weight: 4

That looks fantastic! Well done man, especially with the improved performance 😃 👍
I'm totally happy with that credit section.

I'm also glad you survived the cold! 😄