https://khushiipropertiies.com/wp-content/plugins/wpdirectorykit/public/js/wdk-map-rectangle.js?ver=1.0

1const 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};