WP Directory Kit / 1.5.9

WP Directory Kit v1.5.9

wpdirectorykit / public / js / wdk-map-rectangle.js

wdk-map-rectangle.js in WP Directory Kit 1.5.9, at public/js/wdk-map-rectangle.js

213 lines 7.1 KB

Raw Download Zip

1	const wdk_map_draw = (wdk_map, options = null, autosearch = true) => {
2	var $ = jQuery,
3	map = wdk_map,
4	editableLayers, drawPluginOptions, drawControl, removeButtonControl,outGreyMask,searchButtonControl;
5
6	const { __ } = wp.i18n;
7
8	const event_init = () => {
9	editableLayers = new L.FeatureGroup();
10	map.addLayer(editableLayers);
11
12	drawPluginOptions = {
13	position: 'topleft',
14	draw: {
15	drag: true,
16	polyline: false,
17	polygon: false,
18	circle: false,
19	rectangle: false,
20	circlemarker: false,
21	marker: false,
22	showArea: true,
23	showLength: true
24	}
25	};
26
27	drawPluginOptions = $.extend(drawPluginOptions, options);
28
29	drawControl = new L.Control.Draw(drawPluginOptions);
30	map.addControl(drawControl);
31
32	// Create a custom button for removing all rectangles
33	const RemoveRectanglesButton = L.Control.extend({
34	options: {
35	position: 'topright', /drawPluginOptions.position/
36	},
37	onAdd: function () {
38	var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom leaflet-draw-toolbar');
39	container.innerHTML = '<a class="leaflet-draw-draw-rectangle-remove" href="#"></a>';
40	container.style.display = 'none';
41
42	container.onclick = function () {
43	removeAllRectangles();
44	};
45
46	return container;
47	}
48	});
49
50	// Add the custom button to the map
51	removeButtonControl = new RemoveRectanglesButton();
52	map.addControl(removeButtonControl);
53
54	map.on(L.Draw.Event.CREATED, function (e) {
55	var type = e.layerType,
56	layer = e.layer;
57
58	if (type === 'rectangle') {
59	setRectangle(layer, false);
60
61	// Get coordinates of the polygon
62	var coordinates = layer.getLatLngs();
63	if(coordinates) {
64	$('.wdk-search-form.map').find('input[name="rectangle_ne"]').val(coordinates[0][1].lat+','+coordinates[0][1].lng);
65	$('.wdk-search-form.map').find('input[name="rectangle_sw"]').val(coordinates[0][3].lat+','+coordinates[0][3].lng);
66	event_rectange_changed();
67	}
68	}
69
70	editableLayers.addLayer(layer);
71	});
72
73	map.on('draw:drawstart', function (e) {
74	editableLayers.clearLayers();
75	removeOuther();
76	});
77
78
79	// Custom control for the "Search by Drawing" button
80	var CustomControl = L.Control.extend({
81	options: {
82	position: 'topright' // Position of the control
83	},
84
85	onAdd: function (map) {
86	var container = L.DomUtil.create('div', 'custom-draw-button');
87	container.innerHTML = __('Search by Drawing', 'wpdirectorykit');
88	container.onclick = function () {
89	new L.Draw.Rectangle(map, drawControl.options.draw.rectangle).enable();
90	};
91	return container;
92	}
93	});
94
95	// Add the custom control to the map
96	map.addControl(new CustomControl());
97
98	// Custom control for the "Search" button
99	var CustomControl = L.Control.extend({
100	options: {
101	position: 'topright' // Position of the control
102	},
103
104	onAdd: function (map) {
105	var container = L.DomUtil.create('div', 'custom-draw-button');
106	container.innerHTML = __('Search', 'wpdirectorykit');
107	container.classList.add("wdk-search-start-button");
108	container.style.display = 'none';
109
110	container.onclick = function () {
111	$('.wdk-search-form .wdk-search-start[type="submit"]').trigger('click');
112	};
113	return container;
114	}
115	});
116
117	// Add the custom control to the map
118	if(!autosearch) {
119	searchButtonControl = new CustomControl();
120	map.addControl(searchButtonControl);
121	}
122	};
123
124	const setRectangle = (layer, fitBounds = true) => {
125	editableLayers.addLayer(layer);
126
127	// Set the zoom level
128	if(fitBounds) {
129	let zoom_map = map.getZoom();
130	map.fitBounds(layer.getBounds());
131	map.setZoom(zoom_map);
132	}
133
134	removeButtonControl.getContainer().style.display = 'block';
135
136	if(searchButtonControl)
137	searchButtonControl.getContainer().style.display = 'flex';
138	};
139
140	const event_rectange_changed = (coordinates = '') => {
141	if(autosearch) {
142	$('.wdk-search-form .wdk-search-start[type="submit"]').trigger('click');
143	}
144	};
145
146	const removeAllRectangles = () => {
147	editableLayers.clearLayers();
148	removeButtonControl.getContainer().style.display = 'none';
149
150	// Clear the input fields
151	$('.wdk-search-form.map').find('input[name="rectangle_ne"]').val('');
152	$('.wdk-search-form.map').find('input[name="rectangle_sw"]').val('');
153	removeOuther();
154	event_rectange_changed();
155	};
156
157
158	const drawOuther = (bounds, fitBounds = true) => {
159	//editableLayers.addLayer(layer);
160
161	// Create a rectangle with the defined bounds
162	var rectangle = [
163	[bounds[0][0], bounds[0][1]],
164	[bounds[0][0], bounds[1][1]],
165	[bounds[1][0], bounds[1][1]],
166	[bounds[1][0], bounds[0][1]]
167	];
168
169	// Create a polygon for the grey area covering the whole map
170	var outerBounds = [
171	[[-90, -180], [90, -180], [90, 180], [-90, 180]],
172	rectangle
173	];
174
175	// Add the grey overlay with a hole in the middle where the rectangle is
176	outGreyMask = L.polygon(outerBounds, {
177	color: "grey",
178	weight: 1,
179	fillColor: "grey",
180	fillOpacity: 0.4,
181	interactive: false
182	}).addTo(wdk_map);
183
184	// Set the zoom level
185	if(fitBounds) {
186	let zoom_map = map.getZoom();
187	map.fitBounds(bounds);
188	map.setZoom(zoom_map);
189	}
190
191	removeButtonControl.getContainer().style.display = 'block';
192	if(searchButtonControl)
193	searchButtonControl.getContainer().style.display = 'flex';
194	};
195
196	const removeOuther = () => {
197	if(outGreyMask) {
198	map.removeLayer(outGreyMask);
199	outGreyMask = null;
200	}
201	};
202
203	// FeatureGroup is to store editable layers
204	event_init();
205
206	return {
207	setRectangle: setRectangle,
208	removeOuther: removeOuther,
209	drawOuther: drawOuther,
210	removeAllRectangles: removeAllRectangles
211	};
212	};
213