map points view & boundry search on points

app/Http/Controllers/Api/MapController.php

@@ -19,10 +19,11 @@ class MapController extends Controller
 	public function points(Request $request)
 	{
 		$filters = $request->get('filters', []);
+		$bounds = $request->get('bounds', []);
 		return response()
 			->json(
 			[
-				'points' => MapPoint::getFilteredMapPoints($filters)
+				'points' => MapPoint::getFilteredMapPoints($filters, $bounds)
 			]);
 	}
 

app/Models/MapPoint.php

@@ -677,16 +677,31 @@ public function fieldTypes()
      *
      * @return Collection
      */
-    public static function getFilteredMapPoints(array $filters): Collection
-    {
+    public static function getFilteredMapPoints(array $filters, array $bounds): Collection
+    {
+		if (empty($bounds))
+		{
+			return collect([]);
+		}
+
+		$polygon = [
+			$bounds['northEast']['lat'].' '.$bounds['northEast']['lng'],
+			$bounds['northWest']['lat'].' '.$bounds['northWest']['lng'],
+			$bounds['southWest']['lat'].' '.$bounds['southWest']['lng'],
+			$bounds['southEast']['lat'].' '.$bounds['southEast']['lng'],
+			$bounds['northEast']['lat'].' '.$bounds['northEast']['lng'],
+		];
+		$boundarySearch = "ST_WITHIN(POINT(recycling_points.lat, recycling_points.lon), ST_GEOMETRYFROMTEXT('POLYGON((".implode(", ", $polygon)."))')) AS in_bounds";
         $sql = self::
             select(
                 'recycling_points.id',
                 'recycling_points.lat',
                 'recycling_points.lon',
                 'recycling_points.location',
-            )
-                ->where('status', 1);
+				\DB::raw($boundarySearch)
+			)
+			->having('in_bounds', '=', 1)
+			->where('status', 1);
 
         if (!empty($filters))
         {

resources/js/components/IndexPage.vue

@@ -1,7 +1,7 @@
 <template>
 	<left-sidebar
         :has-results="hasResults"
-		@filtersChanged="getMapPoints($event)"
+		@filtersChanged="setFilters($event)"
     ></left-sidebar>
 
 	<div
@@ -47,7 +47,10 @@
 					ref="map"
 					:center="[latitude, longitude]"
 					:zoom="zoom"
-					@ready="init"
+					@ready="initMap"
+					@update:zoom="zoomEvent($event)"
+					@update:center="centerEvent($event)"
+					@update:bounds="boundsEvent($event)"
 					:use-global-leaflet="false"
 				>
 					<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
@@ -58,7 +61,7 @@
 						>
 							<l-icon
 								:icon-size="dynamicSize"
-								icon-url="/assets/images/logo.png" >
+								icon-url="/assets/images/pin.png" >
 							</l-icon>
 						</l-marker>
 					</template>
@@ -118,13 +121,15 @@ export default
 			longitude: CONSTANTS.DEFAULT_LOCATION.LONGITUDE,
 			points: {},
 			icon: L.icon({
-				iconUrl: '/assets/images/punct_benzinarie.svg',
-				iconSize: [100, 37],
-				iconAnchor: [16, 37]
+				iconUrl: '/assets/images/pin.png',
+				iconSize: [48, 64],
+				iconAnchor: [48, 64]
 			}),
-			iconSize: 100,
+			iconSize: 48,
 			hasApprovedLocation: false,
-			hasResults: false
+			hasResults: false,
+			filters: {},
+			bounds: {}
 
 		};
 	},
@@ -150,6 +155,7 @@ export default
 			const error = (err) =>
 			{
 				console.log(error)
+				this.getMapPoints();
 			};
 			navigator.geolocation.getCurrentPosition(success, error);
 		},
@@ -174,14 +180,21 @@ export default
 				this.isAuthenticated = false;
 			}
 		},
-		getMapPoints(filters)
+		getMapPoints(filters = {})
 		{
-			console.log(`filters`, filters);
 			axios
-				.get(CONSTANTS.API_DOMAIN + CONSTANTS.ROUTES.MAP.POINTS.INFO)
+				.get(CONSTANTS.API_DOMAIN + CONSTANTS.ROUTES.MAP.POINTS.INFO, {
+					params: {
+						bounds: this.bounds,
+						filters: this.filters,
+						lat: this.latitude,
+						lng: this.longitude
+					}
+				})
 				.then((response) =>
 				{
 					this.points = _.get(response, 'data.points', {});
+					console.log(this.points);
 					if (Object.keys(this.points).length > 0)
 					{
 						this.hasResults = true;
@@ -190,6 +203,74 @@ export default
 			{
 				console.log(err);
 			});
+		},
+		initMap()
+		{
+			this.map = this.$refs.map.leafletObject;
+			this.bounds = {
+				northEast: {
+					lat: this.map.getBounds().getNorthEast().lat,
+					lng: this.map.getBounds().getNorthEast().lng,
+				},
+				northWest: {
+					lat: this.map.getBounds().getNorthWest().lat,
+					lng: this.map.getBounds().getNorthWest().lng,
+				},
+				southWest: {
+					lat: this.map.getBounds().getSouthWest().lat,
+					lng: this.map.getBounds().getSouthWest().lng,
+				},
+				southEast: {
+					lat: this.map.getBounds().getSouthEast().lat,
+					lng: this.map.getBounds().getSouthEast().lng,
+				},
+			};
+			this.getMapPoints();
+		},
+		setFilters(event)
+		{
+			if (Object.keys(event).length > 0)
+			{
+				this.filters = event;
+				this.getMapPoints();
+			}
+		},
+		zoomEvent(event)
+		{
+			if (event != this.zoom)
+			{
+				this.getMapPoints();
+			}
+
+			this.zoom = event;
+		},
+		centerEvent(event)
+		{
+			this.latitude = event.lat;
+			this.longitude = event.lng;
+
+			this.getMapPoints();
+		},
+		boundsEvent(event)
+		{
+			this.bounds = {
+				northEast: {
+					lat: event.getNorthEast().lat,
+					lng: event.getNorthEast().lng,
+				},
+				northWest: {
+					lat: event.getNorthWest().lat,
+					lng: event.getNorthWest().lng,
+				},
+				southWest: {
+					lat: event.getSouthWest().lat,
+					lng: event.getSouthWest().lng,
+				},
+				southEast: {
+					lat: event.getSouthEast().lat,
+					lng: event.getSouthEast().lng,
+				}
+			};
 		}
 	},
 	computed: {
@@ -199,7 +280,7 @@ export default
 		},
 		dynamicSize ()
 		{
-			return [this.iconSize, this.iconSize / 2.15];
+			return [this.iconSize, this.iconSize * 1.25];
 		}
 	},
 	mounted()
@@ -211,7 +292,6 @@ export default
 			this.getUserInfo();
 		});
 		this.getUserInfo();
-		this.getMapPoints({});
 	}
 };
 </script>

resources/js/components/leftSidebar.vue

@@ -309,7 +309,6 @@ export default {
                     this.materialTypesFilters.push(filterToAppend);
                 }
             }
-			this.collectedFilters.material_type_id = this.materialTypesFilters;
         },
         serviceFilterChanged(filterId) {
             if (filterId === this.searchParamsForFilters.service_id) {