FieldtypeMapDrawFeatures/InputfieldMapDrawFeatures.js at main · nbcommunication/FieldtypeMapDrawFeatures · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127


const InputfieldMapDrawFeatures = {

	init: function() {

		const options = ProcessWire.config.InputfieldMapDrawFeatures;
		const $map = $(this);
		const name = options.name;

		const $inputFeatures = $map.siblings('input[name="' + name + '"]');
		const $inputSouth = $map.siblings('input[name="_' + name + '_south"]');
		const $inputWest = $map.siblings('input[name="_' + name + '_west"]');
		const $inputNorth = $map.siblings('input[name="_' + name + '_north"]');
		const $inputEast = $map.siblings('input[name="_' + name + '_east"]');
		const $inputZoom = $map.siblings('input[name="_' + name + '_zoom"]');

		// Create the map
		const mapOptions = options.map;

		mapOptions.container = this;

		if (!('zoom' in mapOptions)) {
			mapOptions.zoom = parseFloat($inputZoom.val());
		}

		const map = new maplibregl.Map(mapOptions);

		map.dragRotate.disable(); // Disable map rotation using right click + drag.
		map.touchZoomRotate.disableRotation(); // Disable map rotation using touch rotation gesture.

		// Add navigation control (excluding compass button) to the map.
		map.addControl(new maplibregl.NavigationControl({
			showCompass: false
		}));

		// Draw features
		let draw;
		try {

			const drawOptions = options.draw;
			drawOptions.displayControlsDefault = false;

			draw = new MapboxDraw(drawOptions);
			map.addControl(draw);

			const features = $inputFeatures.val();
			if (features) {
				try {
					draw.add({
						type: 'FeatureCollection',
						features: JSON.parse(features),
					});
				} catch (e) {
					console.error(e);
				}
			}

			const south = parseFloat($inputSouth.val());
			const west = parseFloat($inputWest.val());
			const north = parseFloat($inputNorth.val());
			const east = parseFloat($inputEast.val());
			if (south && west && north && east) {
				map.fitBounds([[west, south], [east, north]], {
					maxZoom: mapOptions.maxZoom - 2,
					padding: 40,
				});
			}

			const updateArea = () => {

				const features = draw.getAll().features;
				$inputFeatures.val(JSON.stringify(features));

				const bounds = new maplibregl.LngLatBounds();
				let coordinates;
				features.forEach(feature => {
					coordinates = feature.geometry.coordinates;
					if (Array.isArray(coordinates)) {
						if (Array.isArray(coordinates[0])) {
							coordinates.forEach(coordinate => {
								if (Array.isArray(coordinate[0])) {
									// Polygon
									coordinate.forEach(coord => bounds.extend(coord));
								} else {
									// Line
									bounds.extend(coordinate);
								}
							})
						} else {
							// Point
							bounds.extend(coordinates);
						}
					}
				});

				$inputSouth.val(bounds.getSouth());
				$inputWest.val(bounds.getWest());
				$inputNorth.val(bounds.getNorth());
				$inputEast.val(bounds.getEast());
				const zoom = map.getZoom();
				if (mapOptions.zoom !== zoom) {
					$inputZoom.val(zoom);
				}
			};

			map.on('draw.create', updateArea);
			map.on('draw.delete', updateArea);
			map.on('draw.update', updateArea);
			map.on('draw.combine', updateArea);
			map.on('draw.uncombine', updateArea);
			map.on('zoomend', e => $inputZoom.val(e.target.getZoom()));

		} catch (e) {
			console.error(e);
		}

		const updateMap = () => setTimeout(() => map.resize(), 128);

		$map.closest('.Inputfield').on('opened', updateMap);
		$(document).on('wiretabclick', updateMap);
	}
};

$(document).ready(function() {
	$('.InputfieldMapDrawFeaturesMap').each(InputfieldMapDrawFeatures.init);
});