diff --git a/app/Device.php b/app/Device.php
index 931f6572d..dd5a37078 100644
--- a/app/Device.php
+++ b/app/Device.php
@@ -309,7 +309,11 @@ public function uWasteDiverted()
     {
         $wasteDiverted = 0;
 
-        if ($this->isFixed() && $this->deviceCategory->isUnpowered()) {
+        $unpowered = \Cache::remember('category-unpowered-' . $this->category, 60, function() {
+            return $this->deviceCategory->isUnpowered();
+        });
+
+        if ($this->isFixed() && $unpowered) {
             if ($this->estimate > 0) {
                 $wasteDiverted = $this->estimate;
             } else {
diff --git a/app/Http/Controllers/API/GroupController.php b/app/Http/Controllers/API/GroupController.php
index 655ef476b..84c19a11a 100644
--- a/app/Http/Controllers/API/GroupController.php
+++ b/app/Http/Controllers/API/GroupController.php
@@ -240,6 +240,15 @@ public static function getGroupList()
      *              type="boolean"
      *          )
      *      ),
+     *      @OA\Parameter(
+     *          name="includeNextEvent",
+     *          description="Include the next event for the group.  This makes the call slower.  Default false.",
+     *          required=false,
+     *          in="query",
+     *          @OA\Schema(
+     *              type="boolean"
+     *          )
+     *      ),
      *      @OA\Response(
      *          response=200,
      *          description="Successful operation",
@@ -247,12 +256,26 @@ public static function getGroupList()
      *              @OA\Property(
      *                property="data",
      *                title="data",
-     *                description="An array of group names",
+     *                description="An array of basic group info",
      *                type="array",
      *                @OA\Items(
      *                   type="object",
      *                   @OA\Property(property="id", type="integer", example=1),
      *                   @OA\Property(property="name", type="string", example="Group Name"),
+     *                   @OA\Property(
+     *                     property="lat",
+     *                     title="lat",
+     *                     description="Latitude of the group.",
+     *                     format="float",
+     *                     example="50.8113243"
+     *                  ),
+     *                  @OA\Property(
+     *                     property="lng",
+     *                     title="lng",
+     *                     description="Longitude of the group.",
+     *                     format="float",
+     *                     example="-1.0788839"
+     *                  ),
      *                )
      *             )
      *          )
@@ -265,8 +288,8 @@ public static function listNamesv2(Request $request) {
             'includeArchived' => ['string', 'in:true,false'],
         ]);
 
-        // We only return the group id and name, for speed.
-        $query = Group::select('idgroups', 'name', 'archived_at');
+        // We only return a small number of attributes, for speed.
+        $query = Group::select('idgroups', 'name', 'latitude', 'longitude', 'archived_at');
 
         if (!$request->has('includeArchived') || $request->get('includeArchived') == 'false') {
             $query = $query->whereNull('archived_at');
@@ -279,6 +302,8 @@ public static function listNamesv2(Request $request) {
             $ret[] = [
                 'id' => $group->idgroups,
                 'name' => $group->name,
+                'lat' => $group->latitude,
+                'lng' => $group->longitude,
                 'archived_at' => $group->archived_at ? Carbon::parse($group->archived_at)->toIso8601String() : null
             ];
         }
@@ -288,6 +313,82 @@ public static function listNamesv2(Request $request) {
         ];
     }
 
+    /**
+     * @OA\Get(
+     *      path="/api/v2/groups/summary",
+     *      operationId="getGroupSummariesv2",
+     *      tags={"Groups"},
+     *      summary="Get list of groups with summary information",
+     *      @OA\Parameter(
+     *          name="archived",
+     *          description="Include archived groups",
+     *          required=false,
+     *          in="path",
+     *          @OA\Schema(
+     *              type="boolean"
+     *          )
+     *      ),
+     *      @OA\Parameter(
+     *          name="includeNextEvent",
+     *          description="Include the next event for the group.  This makes the call slower.  Default false.",
+     *          required=false,
+     *          in="query",
+     *          @OA\Schema(
+     *              type="boolean"
+     *          )
+     *      ),
+     *      @OA\Parameter(
+     *          name="includeCounts",
+     *          description="Include the counts of hosts and restarters.  This makes the call slower.  Default false.",
+     *          required=false,
+     *          in="query",
+     *          @OA\Schema(
+     *              type="boolean"
+     *          )
+     *      ),
+     *      @OA\Parameter(
+     *          name="includeCounts",
+     *          description="Include impact stats.  This makes the call slower.  Default true.",
+     *          required=false,
+     *          in="query",
+     *          @OA\Schema(
+     *              type="boolean"
+     *          )
+     *      ),
+     *      @OA\Response(
+     *          response=200,
+     *          description="Successful operation",
+     *          @OA\JsonContent(
+     *              @OA\Property(
+     *                property="data",
+     *                title="data",
+     *                description="An array of events",
+     *                type="array",
+     *                @OA\Items(
+     *                    @OA\Schema(
+     *                       ref="#/components/schemas/GroupSummary"
+     *                    ),
+     *                 )
+     *              )
+     *          )
+     *       ),
+     *     )
+     */
+
+    public static function listSummaryv2(Request $request) {
+        $request->validate([
+            'archived' => ['string', 'in:true,false'],
+        ]);
+
+        $query = Group::all();
+
+        $groups = $query->all();
+
+        return [
+            'data' => \App\Http\Resources\GroupSummaryCollection::make($groups)
+        ];
+    }
+
     /**
      * @OA\Get(
      *      path="/api/v2/groups/tags",
diff --git a/app/Http/Controllers/GroupController.php b/app/Http/Controllers/GroupController.php
index 4e6b197e2..1e16f9a9e 100644
--- a/app/Http/Controllers/GroupController.php
+++ b/app/Http/Controllers/GroupController.php
@@ -44,18 +44,13 @@ private function indexVariations($tab, $network)
         //Get current logged in user
         $user = Auth::user();
 
-        // Get all groups
-        $groups = Group::with(['networks'])
-            ->orderBy('name', 'ASC')
-            ->get();
-
         // Get all group tags
         $all_group_tags = GroupTags::all();
         $networks = Network::all();
 
         // Look for groups we have joined, not just been invited to.  We have to explicitly test on deleted_at because
         // the normal filtering out of soft deletes won't happen for joins.
-        $your_groups =array_column(Group::with(['networks'])
+        $your_groups = array_column(Group::with(['networks'])
             ->join('users_groups', 'users_groups.group', '=', 'groups.idgroups')
             ->leftJoin('events', 'events.group', '=', 'groups.idgroups')
             ->where('users_groups.user', $user->id)
@@ -66,13 +61,40 @@ private function indexVariations($tab, $network)
             ->get()
             ->toArray(), 'idgroups');
 
-        // We pass a high limit to the groups nearby; there is a distance limit which will normally kick in first.
-        $groups_near_you = array_column($user->groupsNearby(1000), 'idgroups');
+        $nearby_groups = [];
+        $min_lat = 90;
+        $max_lat = -90;
+        $min_lng = 180;
+        $max_lng = -180;
+
+        if ($user->latitude || $user->longitude || $user->country_code) {
+            // We pass a high limit to the groups nearby; there is a distance limit which will normally kick in first.
+            $nearby_groups = $user->groupsNearby(1000);
+
+            // Now find the lat/lng bounding box which contains these groups.
+            foreach ($nearby_groups as $group) {
+                if ($group->latitude < $min_lat) {
+                    $min_lat = $group->latitude;
+                }
+                if ($group->latitude > $max_lat) {
+                    $max_lat = $group->latitude;
+                }
+                if ($group->longitude < $min_lng) {
+                    $min_lng = $group->longitude;
+                }
+                if ($group->longitude > $max_lng) {
+                    $max_lng = $group->longitude;
+                }
+            }
+        }
 
         return view('group.index', [
-            'groups' => GroupController::expandGroups($groups, $your_groups, $groups_near_you),
+            'your_groups' => $your_groups,
+            'nearby_groups' => [ [ $min_lat, $min_lng ], [ $max_lat, $max_lng ] ],
             'your_area' => $user->location,
-            'tab' => $tab,
+            'your_lat' => $user->latitude,
+            'your_lng' => $user->longitude,
+            'tab' => (!$tab || $tab === 'mine') ? 'mine' : 'other',
             'network' => $network,
             'networks' => $networks,
             'all_group_tags' => $all_group_tags,
@@ -484,7 +506,7 @@ public function delete($id)
         }
     }
 
-    public static function expandGroups($groups, $your_groupids, $nearby_groupids)
+    public static function expandGroups($groups, $your_groupids)
     {
         $ret = [];
         $user = Auth::user();
@@ -530,7 +552,6 @@ public static function expandGroups($groups, $your_groupids, $nearby_groupids)
                     'networks' => \Illuminate\Support\Arr::pluck($group->networks, 'id'),
                     'group_tags' => $group->group_tags()->get()->pluck('id'),
                     'following' => in_array($group->idgroups, $your_groupids),
-                    'nearby' => in_array($group->idgroups, $nearby_groupids),
                     'archived_at' => $group->archived_at ? Carbon::parse($group->archived_at)->toIso8601String() : null
                 ];
             }
diff --git a/app/Http/Controllers/NetworkController.php b/app/Http/Controllers/NetworkController.php
index a605faa87..4304331f2 100644
--- a/app/Http/Controllers/NetworkController.php
+++ b/app/Http/Controllers/NetworkController.php
@@ -58,9 +58,38 @@ public function show(Network $network)
             $groupsForAssociating = $network->groupsNotIn()->sortBy('name');
         }
 
+        // Find the lat/lng bounding box for all groups in this network.
+        $minLat = $minLng = $maxLat = $maxLng = null;
+
+        foreach ($network->groups as $group) {
+            $lat = $group->latitude;
+            $lng = $group->longitude;
+
+            if (is_null($minLat) || $lat < $minLat) {
+                $minLat = $lat;
+            }
+
+            if (is_null($minLng) || $lng < $minLng) {
+                $minLng = $lng;
+            }
+
+            if (is_null($maxLat) || $lat > $maxLat) {
+                $maxLat = $lat;
+            }
+
+            if (is_null($maxLng) || $lng > $maxLng) {
+                $maxLng = $lng;
+            }
+        }
+
+
         return view('networks.show', [
             'network' => $network,
             'groupsForAssociating' => $groupsForAssociating,
+            'mapBounds' => [
+                [ $minLat, $minLng ],
+                [ $maxLat, $maxLng ],
+            ],
         ]);
     }
 
diff --git a/app/Http/Resources/Group.php b/app/Http/Resources/Group.php
index 211a9088f..bbf79542a 100644
--- a/app/Http/Resources/Group.php
+++ b/app/Http/Resources/Group.php
@@ -274,9 +274,11 @@ class Group extends JsonResource
      */
     public function toArray($request)
     {
-        $stats = $this->resource->getGroupStats();
-        $stats['events'] = $stats['parties'];
-        unset($stats['parties']);
+        if ($request->get('includeStats', true)) {
+            $stats = $this->resource->getGroupStats();
+            $stats['events'] = $stats['parties'];
+            unset($stats['parties']);
+        }
 
         $networkData = gettype($this->network_data) == 'string' ? json_decode($this->network_data, true) : $this->network_data;
 
@@ -288,7 +290,7 @@ public function toArray($request)
         $ret = [
             'id' => $this->idgroups,
             'name' => $this->name,
-            'image' => $this->groupImage && is_object($this->groupImage) && is_object($this->groupImage->image) ? $this->groupImage->image->path : null,
+            'image' => $this->image,
             'website' => $this->website,
             'phone' => $this->phone,
             'description' => $this->free_text,
diff --git a/app/Http/Resources/GroupSummary.php b/app/Http/Resources/GroupSummary.php
index 2d8a493d9..52b8ce815 100644
--- a/app/Http/Resources/GroupSummary.php
+++ b/app/Http/Resources/GroupSummary.php
@@ -4,6 +4,7 @@
 
 use Carbon\Carbon;
 use Illuminate\Http\Resources\Json\JsonResource;
+use Cache;
 
 /**
  * @OA\Schema(
@@ -62,6 +63,18 @@
  *          ref="#/components/schemas/EventSummary"
  *     ),
  *     @OA\Property(
+ *         property="hosts",
+ *         title="hosts",
+ *         description="The number of hosts of this group (if requested via API call flag).",
+ *         type="number",
+ *     ),
+ *     @OA\Property(
+ *         property="restarters",
+ *         title="hosts",
+ *         description="The number of restarters in this group (if requested via API call flag).",
+ *         type="number",
+ *     ),
+ *     @OA\Property(
  *          property="summary",
  *          title="summary",
  *          description="Indicates that this is a summary result, not full group information.",
@@ -90,7 +103,7 @@ public function toArray($request)
         $ret = [
             'id' => $this->idgroups,
             'name' => $this->name,
-            'image' => $this->groupImage && is_object($this->groupImage) && is_object($this->groupImage->image) ? $this->groupImage->image->path : null,
+            'image' => $this->image,
             'location' => new GroupLocation($this),
             'networks' => new NetworkSummaryCollection($this->resource->networks),
             'updated_at' => Carbon::parse($this->updated_at)->toIso8601String(),
@@ -98,27 +111,53 @@ public function toArray($request)
             'summary' => true
         ];
 
+        if ($request->get('includeCounts', false)) {
+            $ret['hosts'] = $this->resource->all_confirmed_hosts_count;
+            $ret['restarters'] = $this->resource->all_confirmed_restarters_count;
+        }
+
         if ($request->get('includeNextEvent', false)) {
-            // Get next approved event for group.
-            $nextevent = \App\Group::find($this->idgroups)->getNextUpcomingEvent();
+            // Get next approved event for group.  We cache all upcoming events to speed up the case where we
+            // are fetching many groups.
+            if (Cache::has('future_events')) {
+                $upcoming = Cache::get('future_events');
+            } else {
+                $future = \App\Party::future()->get();
 
-            if ($nextevent) {
-                // Using the resource for the nested event causes infinite loops.  Just add the model attributes we
-                // need directly.
-                $ret['next_event'] = [
-                    'id' => $nextevent->idevents,
-                    'start' => $nextevent->event_start_utc,
-                    'end' => $nextevent->event_end_utc,
-                    'timezone' => $nextevent->timezone,
-                    'title' => $nextevent->venue ?? $nextevent->location,
-                    'location' => $nextevent->location,
-                    'online' => $nextevent->online,
-                    'lat' => $nextevent->latitude,
-                    'lng' => $nextevent->longitude,
-                    'updated_at' => $nextevent->updated_at->toIso8601String(),
-                    'summary' => true
-                ];
+                // Can't serialise the whole event, and we only need a few fields.
+                $upcoming = [];
+
+                foreach ($future as $event) {
+                    $upcoming[] = [
+                        'id' => $event->idevents,
+                        'group_id' => $event->group,
+                        'start' => $event->event_start_utc,
+                        'end' => $event->event_end_utc,
+                        'timezone' => $event->timezone,
+                        'title' => $event->venue ?? $event->location,
+                        'location' => $event->location,
+                        'online' => $event->online,
+                        'lat' => $event->latitude,
+                        'lng' => $event->longitude,
+                        'updated_at' => $event->updated_at->toIso8601String(),
+                        'summary' => true
+                    ];
+                }
+
+                Cache::put('future_events', $upcoming, 60);
+            }
+
+            // Find the next event for this group.
+            $nextevent = null;
+
+            foreach ($upcoming as $event) {
+                if ($event['group_id'] == $this->idgroups) {
+                    $nextevent = $event;
+                    break;
+                }
             }
+
+           $ret['next_event'] = $nextevent;
         }
 
         return($ret);
diff --git a/app/User.php b/app/User.php
index aa5b84d19..1c35b98e8 100644
--- a/app/User.php
+++ b/app/User.php
@@ -123,27 +123,40 @@ public function groups()
      */
     public function groupsNearby($numberOfGroups = 10, $createdSince = null, $nearby = self::NEARBY_KM)
     {
-        if (is_null($this->latitude) || is_null($this->longitude)) {
-            return [];
-        }
+        $groups = null;
 
-        $groupsNearbyQuery = Group::select(
-            DB::raw('*, ( 6371 * acos( cos( radians('.$this->latitude.') ) * cos( radians( latitude ) ) * cos( radians( longitude ) - radians('.$this->longitude.') ) + sin( radians('.$this->latitude.') ) * sin( radians( latitude ) ) ) ) AS dist')
+        if (!is_null($this->latitude) && !is_null($this->longitude)) {
+            $groupsNearbyQuery = Group::select(
+                DB::raw('*, ( 6371 * acos( cos( radians('.$this->latitude.') ) * cos( radians( latitude ) ) * cos( radians( longitude ) - radians('.$this->longitude.') ) + sin( radians('.$this->latitude.') ) * sin( radians( latitude ) ) ) ) AS dist')
         )->where(function ($q) {
             $q->whereNull('archived_at');
 
-            // Only show approved groups.
-            $q->where('approved', true);
-        })->having('dist', '<=', $nearby)
-            ->groupBy('idgroups');
+                // Only show approved groups.
+                $q->where('approved', true);
+            })->having('dist', '<=', $nearby)
+                ->groupBy('idgroups');
 
-        if ($createdSince) {
-            $groupsNearbyQuery->whereDate('created_at', '>=', date('Y-m-d', strtotime($createdSince)));
-        }
+            if ($createdSince) {
+                $groupsNearbyQuery->whereDate('created_at', '>=', date('Y-m-d', strtotime($createdSince)));
+            }
 
-        $groups = $groupsNearbyQuery->orderBy('dist', 'ASC')
-            ->take($numberOfGroups)
-            ->get();
+            $groups = $groupsNearbyQuery->orderBy('dist', 'ASC')
+                ->take($numberOfGroups)
+                ->get();
+        } else if ($this->country_code) {
+            // We have no city, but we do have a country.  So all groups with this country code are nearby.
+            $groupsInCountry = Group::where('country_code', $this->country_code)
+                ->where('approved', true);
+
+            if ($createdSince) {
+                $groupsInCountry->whereDate('created_at', '>=', date('Y-m-d', strtotime($createdSince)));
+            }
+
+            $groups = $groupsInCountry
+                ->orderBy('name', 'ASC')
+                ->take($numberOfGroups)
+                ->get();
+        }
 
         // Expand the image
         $groupsNearby = [];
diff --git a/database/migrations/2024_11_25_124911_group_image.php b/database/migrations/2024_11_25_124911_group_image.php
new file mode 100644
index 000000000..39f80c664
--- /dev/null
+++ b/database/migrations/2024_11_25_124911_group_image.php
@@ -0,0 +1,43 @@
+<?php
+
+use App\Group;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('groups', function (Blueprint $table) {
+            $table->string('image', 255)->nullable();
+        });
+
+        $groups = Group::all();
+
+        foreach ($groups as $group) {
+            $group_image = $group->groupImage;
+
+            $group->image = (is_object($group_image) && is_object($group_image->image)) ?
+                $group_image->image->path : null;
+            $group->save();
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('groups', function (Blueprint $table) {
+            $table->dropColumn('image');
+        });
+    }
+};
diff --git a/lang/de/groups.php b/lang/de/groups.php
index 1629d89db..cea5df597 100644
--- a/lang/de/groups.php
+++ b/lang/de/groups.php
@@ -3,8 +3,6 @@
 return [
   'group' => 'Group',
   'groups' => 'Groups',
-  'all_groups' => 'All groups',
-  'search_name' => 'Search name',
   'add_groups' => 'Add a group',
   'add_groups_content' => 'Tell us more about your group, so we can create a page for you and help you publicise to potential volunteers and participants.',
   'create_groups' => 'Create new group',
diff --git a/lang/en/groups.php b/lang/en/groups.php
index 65fc4d793..5cf87297e 100644
--- a/lang/en/groups.php
+++ b/lang/en/groups.php
@@ -5,16 +5,14 @@
   'headline_stats_dropdown' => 'Headline stats',
   'co2_equivalence_visualisation_dropdown' => 'CO<sub>2</sub> equivalence visualisation',
   'group_admin_only' => 'Admin only',
-  'search_name' => 'Search name',
   'group' => 'Group',
   'groups' => 'Groups',
-  'all_groups' => 'All Groups',
   'add_groups' => 'Add a group',
   'add_groups_content' => 'Tell us more about your group, so we can create a page for you and help you publicise to potential volunteers and participants.',
   'create_groups' => 'Add a new group',
   'create_group' => 'Create group',
   'groups_title1' => 'Your Groups',
-  'groups_title2' => 'Other groups nearby',
+  'groups_title2' => 'Other groups',
   'groups_name' => 'Name',
   'groups_name_of' => 'Name of group',
   'groups_about_group' => 'Tell us about your group',
@@ -103,7 +101,6 @@
   'repairable_items' => 'Repairable items',
   'end_of_life_items' => 'End-of-life items',
   'no_unpowered_stats' => 'At the moment, these stats are only displayed for powered items. We hope to include unpowered items soon.',
-  'all_groups_mobile' => 'All',
   'create_groups_mobile2' => 'Add new',
   'groups_title1_mobile' => 'Yours',
   'groups_title2_mobile' => 'Nearest',
@@ -111,13 +108,7 @@
   'no_groups_mine' => '<b>If you can\'t see any here yet, why not <a href="/group/nearby">follow your nearest group</a> to hear about their upcoming repair events?</b>',
   'no_groups_nearest_no_location' => '<b><p>You do not currently have a town/city set.  You can set one in <a href="/profile/edit">your profile</a>.</p><p>You can also <a href="/group/all">view all groups</a>.</p></b>',
   'no_groups_nearest_with_location' => '<p>There are no groups within 50 km of your location. You can <a href="/group/all">see all groups here</a>. Or why not start your own? <a href="https://talk.restarters.net/t/how-to-run-a-repair-event-the-restart-party-kit/324">Learn what running your own repair event involves.</a></p>',
-  'group_count' => 'There is <b>:count group</b>.|There are <b>:count groups</b>.',
-  'search_name_placeholder' => 'Search name...',
-  'search_location_placeholder' => 'Search location...',
-  'search_country_placeholder' => 'Country...',
-  'search_tags_placeholder' => 'Tag',
-  'show_filters' => 'Show Filters',
-  'hide_filters' => 'Hide Filters',
+  'group_count' => 'There is <b>:count group</b>.  Zoom out to see more.|There are <b>:count groups</b>.  Zoom out to see more.',
   'leave_group_button' => 'Unfollow group',
   'leave_group_button_mobile' => 'Unfollow',
   'leave_group_confirm' => 'Please confirm that you want to unfollow this group.',
@@ -140,7 +131,6 @@
   'archive_group_confirm' => 'Please confirm that you want to archive :name.',
   'delete_succeeded' => 'Group <strong>:name</strong> has been deleted.',
   'nearest_groups' => 'These are the groups that are within 50 km of :location',
-  'nearest_groups_change' => '(change)',
   'invitation_pending' => 'You have an invitation to this group.  Please click <a href=":accept">here</a> if you would like to join.',
   'geocode_failed' => 'Location not found. If you are unable to find the location of your group, please try a more general location (such as village/town), or a specific street address, rather than a building name.',
   'discourse_title' => 'This is a discussion group for anyone who follows :group.
@@ -180,4 +170,7 @@
   'export.events.items_end_of_life' => 'Items end-of-life',
   'export.events.items_kg_waste_prevented' => 'kg waste prevented',
   'export.events.items_kg_co2_prevent' => 'kg CO2 prevented',
+  'marker_title' => 'Click for more information',
+  'goto_group' => 'Go to group',
+  'next_event' => 'Next event',
 ];
diff --git a/lang/fr-BE/groups.php b/lang/fr-BE/groups.php
index 712a888b0..11ee7636f 100644
--- a/lang/fr-BE/groups.php
+++ b/lang/fr-BE/groups.php
@@ -4,13 +4,12 @@
   'group' => 'Repair Café',
   'groups' => 'Repair Cafés',
   'all_groups' => 'Tous les Repair Cafés',
-  'search_name' => 'Chercher nom',
   'add_groups' => 'Ajouter un nouveau Repair Café',
   'add_groups_content' => 'Dites-en nous plus sur votre repair café, afin que nous puissions vous créer une page et vous aider à trouver de potentiels nouveaux bénévoles et participants',
   'create_groups' => 'Créer nouveau Repair Café',
   'create_group' => 'Créer un nouveau Repair Café',
   'groups_title1' => 'Vos Repair Cafés',
-  'groups_title2' => 'Repair Cafés proches de chez vous',
+  'groups_title2' => 'Autres Repair Cafés',
   'groups_name' => 'Nom',
   'groups_name_of' => 'Nom du Repair Café',
   'groups_about_group' => 'Parlez-nous de votre Repair Café',
@@ -104,12 +103,10 @@
   'volunteers_attended' => 'Bénévoles ayant participé',
   'volunteers_confirmed' => 'Bénévoles confirmés',
   'volunteers_invited' => 'Bénévoles invités',
-  'all_groups_mobile' => 'Tous',
   'create_groups_mobile2' => 'Ajouter nouveau',
   'groups_title1_mobile' => 'Le vôtre',
   'groups_title2_mobile' => 'Le plus proche',
-  'group_count' => 'Il y a <b>:count Repair Café. Il y a <b>:count Repair Cafés.',
-  'hide_filters' => 'Cacher les filtres',
+  'group_count' => 'Il y a <b>:count Repair Café. Zoom arrière pour en voir plus.|Il y a <b>:count Repair Cafés. Zoom arrière pour en voir plus.',
   'join_group_button_mobile' => 'Suivre',
   'leave_group_button' => 'Ne plus suivre ce Repair Café',
   'leave_group_button_mobile' => 'Ne plus suivre',
@@ -120,11 +117,6 @@
   'no_groups_nearest_no_location' => '<b><p>Vous n\'avez  pas défini de village/ville. Vous pouvez en ajouter un.e dans <a href="/profile/edit">votre profil</a>.</p><p>Vous pouvez aussi <a href="/group/all">voir tous les Repair Cafés</a>.</p></b>',
   'no_groups_nearest_with_location' => '<b><p>Il n\'y a apparemment pas encore de Repair Cafés listé proche de chez vous.</p><p>Voulez-vous créer ou ajouter un Repair Café?  Regardez comment faire dans <a href="https://talk.restarters.net/t/how-to-power-up-community-repair-with-restarters-net/1228/2">nos ressources</a>.</p></b>',
   'no_unpowered_stats' => 'Pour l\'instant, ces statistiques sont seulement affichées pour les appareils électriques. Nous espérons pouvoir inclure les appareils non-électriques sous peu.',
-  'search_country_placeholder' => 'Pays',
-  'search_location_placeholder' => 'Rechercher localisation...',
-  'search_name_placeholder' => 'Rechercher nom...',
-  'search_tags_placeholder' => 'Tag',
-  'show_filters' => 'Montrer les filtres',
   'all' => 'Tous',
   'nearby' => 'Proche',
   'no_other_events' => 'Il n\'y a actuellement aucun autre événement à venir',
@@ -149,7 +141,6 @@
 Apprenez à utiliser ce groupe ici : :help.',
   'invitation_pending' => 'Vous avez une invitation à rejoindre ce Repair Café. Cliquez <a href=":accept">ici</a> si vous voulez le rejoindre.',
   'nearest_groups' => 'Ce sont les Repair Cafés qui se trouvent dans un rayon de 50km autour de :location',
-  'nearest_groups_change' => '(change)',
   'talk_group' => 'Voir la conversation de Repair Café',
   'talk_group_add_title' => 'Bienvenue sur :group_name',
   'editing' => 'Modification de',
@@ -183,4 +174,7 @@
   'export.events.items_end_of_life' => 'Total des appareils en fin de vie',
   'export.events.items_kg_waste_prevented' => 'kg déchets évités',
   'export.events.items_kg_co2_prevent' => 'kg emissions de CO2 évitées',
+  'marker_title' => 'Cliquez pour plus d\'informations',
+  'goto_group' => 'Aller au Repair Café',
+  'next_event' => 'Prochain événement',
 ];
diff --git a/lang/fr/groups.php b/lang/fr/groups.php
index b336b6474..58bf4cf74 100644
--- a/lang/fr/groups.php
+++ b/lang/fr/groups.php
@@ -4,13 +4,12 @@
   'group' => 'Repair Café',
   'groups' => 'Repair Cafés',
   'all_groups' => 'Tous les Repair Cafés',
-  'search_name' => 'Chercher nom',
   'add_groups' => 'Ajouter un nouveau Repair Café',
   'add_groups_content' => 'Dites-en nous plus sur votre repair café, afin que nous puissions vous créer une page et vous aider à trouver de potentiels nouveaux bénévoles et participants',
   'create_groups' => 'Créer nouveau Repair Café',
   'create_group' => 'Créer un nouveau Repair Café',
   'groups_title1' => 'Vos Repair Cafés',
-  'groups_title2' => 'Repair Cafés proches de chez vous',
+  'groups_title2' => 'Autres Repair Cafés',
   'groups_name' => 'Nom',
   'groups_name_of' => 'Nom du Repair Café',
   'groups_about_group' => 'Parlez-nous de votre Repair Café',
@@ -104,12 +103,10 @@
   'volunteers_attended' => 'Bénévoles ayant participé',
   'volunteers_confirmed' => 'Bénévoles confirmés',
   'volunteers_invited' => 'Bénévoles invités',
-  'all_groups_mobile' => 'Tous',
   'create_groups_mobile2' => 'Ajouter nouveau',
   'groups_title1_mobile' => 'Le vôtre',
   'groups_title2_mobile' => 'Le plus proche',
-  'group_count' => 'Il y a <b>:count Repair Café. Il y a <b>:count Repair Cafés.',
-  'hide_filters' => 'Cacher les filtres',
+    'group_count' => 'Il y a <b>:count Repair Café. Zoom arrière pour en voir plus.|Il y a <b>:count Repair Cafés. Zoom arrière pour en voir plus.',
   'join_group_button_mobile' => 'Suivre',
   'leave_group_button' => 'Ne plus suivre ce Repair Café',
   'leave_group_button_mobile' => 'Ne plus suivre',
@@ -120,11 +117,6 @@
   'no_groups_nearest_no_location' => '<b><p>Vous n\'avez  pas défini de village/ville. Vous pouvez en ajouter un.e dans <a href="/profile/edit">votre profil</a>.</p><p>Vous pouvez aussi <a href="/group/all">voir tous les Repair Cafés</a>.</p></b>',
   'no_groups_nearest_with_location' => '<b><p>Il n\'y a apparemment pas encore de Repair Cafés listé proche de chez vous.</p><p>Voulez-vous créer ou ajouter un Repair Café?  Regardez comment faire dans <a href="https://talk.restarters.net/t/how-to-power-up-community-repair-with-restarters-net/1228/2">nos ressources</a>.</p></b>',
   'no_unpowered_stats' => 'Pour l\'instant, ces statistiques sont seulement affichées pour les appareils électriques. Nous espérons pouvoir inclure les appareils non-électriques sous peu.',
-  'search_country_placeholder' => 'Pays',
-  'search_location_placeholder' => 'Rechercher localisation...',
-  'search_name_placeholder' => 'Rechercher nom...',
-  'search_tags_placeholder' => 'Tag',
-  'show_filters' => 'Montrer les filtres',
   'all' => 'Tous',
   'nearby' => 'Proche',
   'no_other_events' => 'Il n\'y a actuellement aucun autre événement à venir',
@@ -149,7 +141,6 @@
 Apprenez à utiliser ce groupe ici : :help.',
     'invitation_pending' => 'Vous avez une invitation à rejoindre ce Repair Café. Cliquez <a href=":accept">ici</a> si vous voulez le rejoindre.',
   'nearest_groups' => 'Ce sont les Repair Cafés qui se trouvent dans un rayon de 50km autour de :location',
-  'nearest_groups_change' => '(change)',
   'talk_group' => 'Voir la conversation de Repair Café',
   'talk_group_add_title' => 'Bienvenue sur :group_name',
   'editing' => 'Modification de',
@@ -183,4 +174,7 @@
   'export.events.items_end_of_life' => 'Total des appareils en fin de vie',
   'export.events.items_kg_waste_prevented' => 'kg déchets évités',
   'export.events.items_kg_co2_prevent' => 'kg emissions de CO2 évitées',
+  'marker_title' => 'Cliquez pour plus d\'informations',
+  'goto_group' => 'Aller au Repair Café',
+  'next_event' => 'Prochain événement',
 ];
diff --git a/lang/it/groups.php b/lang/it/groups.php
index 2a453fcb6..df51cc197 100644
--- a/lang/it/groups.php
+++ b/lang/it/groups.php
@@ -4,7 +4,6 @@
   'group' => 'Gruppo',
   'groups' => 'Gruppi',
   'all_groups' => 'Tutti i gruppi',
-  'search_name' => 'Cerca nome',
   'add_groups' => 'Aggiungi un gruppo',
   'add_groups_content' => 'Raccontaci di più sul tuo gruppo, in modo che possiamo creare una pagina per te e aiutarti a trovare volontari e partecipanti.',
   'create_groups' => 'Crea nuovo gruppo',
diff --git a/lang/ne/groups.php b/lang/ne/groups.php
index f8e5f293b..f6d39cb80 100644
--- a/lang/ne/groups.php
+++ b/lang/ne/groups.php
@@ -41,7 +41,6 @@
   'message_example_text' => '<voeg hier eventueel een eigen bericht toe>',
   'message_header' => 'Uitnodiging',
   'restarter_column_table' => 'Restarter',
-  'search_name' => 'Naam zoeken',
   'send_invite_button' => 'Uitnodigingen versturen',
   'share_stats_header' => 'Je statistieken delen',
   'share_stats_message' => 'Door kapotte toestellen te repareren :group heel wat CO<sub>2</sub> uitstoot en afval vermeden. Help ons om dit goede nieuws te verspreiden en deel het op je website.',
diff --git a/lang/nl-BE/groups.php b/lang/nl-BE/groups.php
index b2cd84bf2..ebebf12fd 100644
--- a/lang/nl-BE/groups.php
+++ b/lang/nl-BE/groups.php
@@ -41,7 +41,6 @@
   'message_example_text' => '<voeg hier eventueel een eigen bericht toe>',
   'message_header' => 'Uitnodiging',
   'restarter_column_table' => 'Restarter',
-  'search_name' => 'Naam zoeken',
   'send_invite_button' => 'Uitnodigingen versturen',
   'share_stats_header' => 'Je statistieken delen',
   'share_stats_message' => 'Door kapotte toestellen te repareren heeft :group heel wat CO<sub>2</sub> uitstoot en afval vermeden. Help ons om dit goede nieuws te verspreiden en deel het op je website.',
diff --git a/lang/no/groups.php b/lang/no/groups.php
index 2607fc6e1..bc0d4ca5e 100644
--- a/lang/no/groups.php
+++ b/lang/no/groups.php
@@ -3,8 +3,6 @@
 return [
   'group' => 'Group',
   'groups' => 'Groups',
-  'all_groups' => 'All groups',
-  'search_name' => 'Search name',
   'add_groups' => 'Add a group',
   'add_groups_content' => 'Tell us more about your group, so we can create a page for you and help you publicise to potential volunteers and participants.',
   'create_groups' => 'Create new group',
diff --git a/package-lock.json b/package-lock.json
index 09a81bc72..3ad0abd04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
             "dependencies": {
                 "@sentry/tracing": "^6.7.2",
                 "@sentry/vue": "^6.7.2",
+                "@vectorial1024/leaflet-color-markers": "^2.0.4",
                 "ajv": "^6.12.3",
                 "babel-plugin-istanbul": "^6.1.1",
                 "bootstrap-fileinput": "^4.4.9",
@@ -27,6 +28,7 @@
                 "js-cookie": "^2.2.0",
                 "lang.js": "^1.1.14",
                 "leaflet": "^1.4.0",
+                "leaflet-control-geocoder": "^1.13.0",
                 "moment": "^2.29.4",
                 "moment-timezone": "^0.5.35",
                 "npm": "^9.4.0",
@@ -40,7 +42,7 @@
                 "sortablejs": "^1.7.0",
                 "text-clipper": "^2.1.0",
                 "tokenfield": "^0.9.10",
-                "vue-awesome": "^4.5.0",
+                "vue-awesome": "^4.1.0",
                 "vue-clipboard2": "^0.3.1",
                 "vue-cookies": "^1.7.4",
                 "vue-google-autocomplete": "^1.1.1",
@@ -83,6 +85,8 @@
                 "resolve-url-loader": "^5.0.0",
                 "sass": "^1.56.1",
                 "sass-loader": "^12.6.0",
+                "ts-loader": "^9.5.1",
+                "typescript": "^5.6.3",
                 "v8-to-istanbul": "^8.0.0",
                 "vue": "^2.7.14",
                 "vue-loader": "^15.10.1",
@@ -3845,6 +3849,14 @@
             "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
             "dev": true
         },
+        "node_modules/@vectorial1024/leaflet-color-markers": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@vectorial1024/leaflet-color-markers/-/leaflet-color-markers-2.0.4.tgz",
+            "integrity": "sha512-lAYvIG/FXMQjNR7SjN0uGowpGkEwJobrmnUUH4q/ViRyhw/3n1K03a2GW0TTgLpi2OVLOFJfVJz4j+NZeXYj5A==",
+            "peerDependencies": {
+                "leaflet": "^1.0.0"
+            }
+        },
         "node_modules/@vue/compiler-sfc": {
             "version": "2.7.14",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
@@ -5408,6 +5420,19 @@
                 "node": ">=8.0.0"
             }
         },
+        "node_modules/browser-sync-client/node_modules/typescript": {
+            "version": "4.9.5",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+            "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+            "dev": true,
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=4.2.0"
+            }
+        },
         "node_modules/browser-sync-ui": {
             "version": "2.27.11",
             "resolved": "https://registry.npmjs.org/browser-sync-ui/-/browser-sync-ui-2.27.11.tgz",
@@ -12969,6 +12994,14 @@
             "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
             "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
         },
+        "node_modules/leaflet-control-geocoder": {
+            "version": "1.13.0",
+            "resolved": "https://registry.npmjs.org/leaflet-control-geocoder/-/leaflet-control-geocoder-1.13.0.tgz",
+            "integrity": "sha512-mgYGx/2WA5CcvhP+IJtw7VvJwSGAe5zxX+TKe6ruYkLj2W5I5V/K/nQiLvsUtqifBojBGoKIPNZ8m0mXJNIudg==",
+            "optionalDependencies": {
+                "open-location-code": "^1.0.0"
+            }
+        },
         "node_modules/leven": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -16693,6 +16726,12 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/open-location-code": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/open-location-code/-/open-location-code-1.0.3.tgz",
+            "integrity": "sha512-DBm14BSn40Ee241n80zIFXIT6+y8Tb0I+jTdosLJ8Sidvr2qONvymwqymVbHV2nS+1gkDZ5eTNpnOIVV0Kn2fw==",
+            "optional": true
+        },
         "node_modules/open/node_modules/is-wsl": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -19728,6 +19767,35 @@
             "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
             "dev": true
         },
+        "node_modules/ts-loader": {
+            "version": "9.5.1",
+            "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
+            "integrity": "sha512-rNH3sK9kGZcH9dYzC7CewQm4NtxJTjSEVRJ2DyBZR7f8/wcta+iV44UPCXc5+nzDzivKtlzV6c9P4e+oFhDLYg==",
+            "dev": true,
+            "dependencies": {
+                "chalk": "^4.1.0",
+                "enhanced-resolve": "^5.0.0",
+                "micromatch": "^4.0.0",
+                "semver": "^7.3.4",
+                "source-map": "^0.7.4"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "typescript": "*",
+                "webpack": "^5.0.0"
+            }
+        },
+        "node_modules/ts-loader/node_modules/source-map": {
+            "version": "0.7.4",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+            "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 8"
+            }
+        },
         "node_modules/tsconfig": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-7.0.0.tgz",
@@ -19792,16 +19860,16 @@
             }
         },
         "node_modules/typescript": {
-            "version": "4.9.4",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
-            "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+            "version": "5.6.3",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+            "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
             "dev": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
             },
             "engines": {
-                "node": ">=4.2.0"
+                "node": ">=14.17"
             }
         },
         "node_modules/ua-parser-js": {
diff --git a/package.json b/package.json
index 45285b216..4ba830631 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,8 @@
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.56.1",
         "sass-loader": "^12.6.0",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.6.3",
         "v8-to-istanbul": "^8.0.0",
         "vue": "^2.7.14",
         "vue-loader": "^15.10.1",
@@ -48,6 +50,7 @@
     "dependencies": {
         "@sentry/tracing": "^6.7.2",
         "@sentry/vue": "^6.7.2",
+        "@vectorial1024/leaflet-color-markers": "^2.0.4",
         "ajv": "^6.12.3",
         "babel-plugin-istanbul": "^6.1.1",
         "bootstrap-fileinput": "^4.4.9",
@@ -68,6 +71,7 @@
         "js-cookie": "^2.2.0",
         "lang.js": "^1.1.14",
         "leaflet": "^1.4.0",
+        "leaflet-control-geocoder": "^1.13.0",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.35",
         "npm": "^9.4.0",
diff --git a/resources/global/css/_global.scss b/resources/global/css/_global.scss
index 951313952..a9cc4080c 100644
--- a/resources/global/css/_global.scss
+++ b/resources/global/css/_global.scss
@@ -141,4 +141,20 @@ h2 {
 .fa-fw {
   width: 1rem;
   height: 1rem;
-}
\ No newline at end of file
+}
+
+.fa-spin {
+  animation-name: spin;
+  animation-duration: 4s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes spin {
+  0%  {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 45ebcedd5..17c4b7593 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -54,6 +54,9 @@ import RichTextEditor from './components/RichTextEditor'
 import Notifications from './components/Notifications'
 import GroupTimeZone from './components/GroupTimeZone'
 import StatsShare  from './components/StatsShare.vue'
+import GroupMapAndList from './components/GroupMapAndList.vue'
+import GroupMarker from './components/GroupMarker.vue'
+import GroupInfoModal from './components/GroupInfoModal.vue'
 
 // Without this, the default map marker doesn't appear in production.  Fairly well-known problem.
 // eslint-disable-next-line
@@ -1325,6 +1328,9 @@ jQuery(document).ready(function () {
         'notifications': Notifications,
         'grouptimezone': GroupTimeZone,
         'statsshare': StatsShare,
+        'groupmapandlist': GroupMapAndList,
+        'groupmarker': GroupMarker,
+        'groupinfomodal': GroupInfoModal,
       }
     })
   })
diff --git a/resources/js/components/GroupInfoModal.vue b/resources/js/components/GroupInfoModal.vue
new file mode 100644
index 000000000..24f1e158d
--- /dev/null
+++ b/resources/js/components/GroupInfoModal.vue
@@ -0,0 +1,93 @@
+<template>
+  <b-modal
+      id="groupInfoModal"
+      v-model="showModal"
+      no-stacking
+  >
+    <template slot="modal-title">
+      <div class="d-flex w-100">
+        <b-img @error="brokenGroupImage" :src="groupImage" class="groupImage mr-4" />
+        <div>
+          <div>{{ group.name }}</div>
+          <div class="small text-muted" v-if="group.location">{{ group.location.location }}</div>
+        </div>
+      </div>
+    </template>
+    <template slot="default">
+      <div class="d-flex flex-wrap">
+        {{  __('groups.next_event') }}:&nbsp;
+        <span v-if="nextEventDate">
+          {{ nextEventDate }} {{ group.next_event.title}}
+        </span>
+        <span v-else>
+           {{ __('groups.upcoming_none_planned') }}
+        </span>
+      </div>
+    </template>
+    <template slot="modal-footer" slot-scope="{ cancel }">
+      <div class="w-100 d-flex justify-content-between">
+        <b-button variant="primary" :to="'/group/view/' + group.id">
+          {{ __('groups.goto_group') }}
+        </b-button>
+        <b-button variant="secondary" @click="cancel">
+          {{ __('partials.close') }}
+        </b-button>
+      </div>
+    </template>
+  </b-modal>
+</template>
+<script>
+import map from '../mixins/map'
+import {DEFAULT_PROFILE} from "../constants";
+import moment from 'moment'
+
+export default {
+  components: {},
+  mixins: [map],
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    group() {
+      return this.$store.getters['groups/get'](this.id)
+    },
+    nextEventDate() {
+      return this.group && this.group.next_event ? new moment(this.group.next_event.start).format('ddd Do MMM YYYY') : null
+    },
+    groupImage() {
+      return this.group && this.group.image ? ('/uploads/mid_' + this.group.group_image) : DEFAULT_PROFILE
+    },
+  },
+  data: function() {
+    return {
+      showModal: true
+    }
+  },
+  watch: {
+    showModal(newVal) {
+      if (!newVal) {
+        this.$emit('close')
+      }
+    }
+  },
+  methods: {
+    show() {
+      this.showModal = true
+    },
+    hide() {
+      this.showModal = false
+    },
+    brokenGroupImage(event) {
+      event.target.src = DEFAULT_PROFILE
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+.groupImage {
+  width: 67px;
+}
+</style>
diff --git a/resources/js/components/GroupMap.vue b/resources/js/components/GroupMap.vue
new file mode 100644
index 000000000..fc9f1c95a
--- /dev/null
+++ b/resources/js/components/GroupMap.vue
@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <l-map
+        ref="map"
+        :min-zoom="minZoom"
+        :max-zoom="maxZoom"
+        :bounds.sync="bounds"
+        :style="'width: 100%; height: 400px'"
+        :options="mapOptions"
+        @ready="ready"
+        @update:bounds="idle"
+        @zoomend="idle"
+        @moveend="idle"
+        @dragend="dragEnd"
+    >
+      <GroupMarker :key='"marker-" + group.id' v-for="group in allGroups" :id="group.id" :highlight="yourGroup(group.id)" :hover="group.id === hover" />
+      <l-tile-layer :url="tiles" :attribution="attribution" />
+    </l-map>
+  </div>
+</template>
+<script>
+import map from '../mixins/map'
+import { Geocoder } from 'leaflet-control-geocoder/src/control'
+import { Photon } from 'leaflet-control-geocoder/src/geocoders/photon'
+import GroupMarker from './GroupMarker.vue'
+
+export default {
+  components: {
+    GroupMarker,
+  },
+  mixins: [map],
+  props: {
+    initialBounds: {
+      type: Array,
+      required: true,
+    },
+    minZoom: {
+      type: Number,
+      required: false,
+      default: 5,
+    },
+    maxZoom: {
+      type: Number,
+      required: false,
+      default: 15,
+    },
+    network: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    yourGroups: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    hover: {
+      type: Number,
+      required: false,
+      default: null,
+    }
+  },
+  data() {
+    return {
+      moved: false,
+      mapObject: null,
+      zoom: props.minZoom,
+      destroyed: false,
+      mapIdle: 0,
+      center: null,
+      bounds: null,
+      zoomedToGroups: false
+    }
+  },
+  computed: {
+    mapOptions() {
+      return {
+        zoomControl: true,
+        dragging: process.client && window?.L?.Browser?.mobile,
+        touchZoom: true,
+        scrollWheelZoom: false,
+        bounceAtZoomLimits: true,
+        gestureHandling: true,
+      }
+    },
+    allGroups() {
+      const groups = this.$store.getters['groups/list']
+      return groups.filter((g) => {
+        if (!this.network) {
+          return true
+        }
+
+        let found = false
+        g.networks.forEach((n) => {
+          if (n.id === this.network) {
+            found = true
+          }
+        })
+
+        return found
+      })
+    },
+  },
+  created() {
+    this.bounds = this.initialBounds
+  },
+  beforeUnmount() {
+    this.destroyed = true
+  },
+  watch: {
+    allGroups: {
+      handler(newVal, oldVal) {
+        if (!oldVal.length && newVal.length) {
+          this.zoomToGroups()
+        }
+      },
+      deep: true,
+      immediate: true,
+    }
+  },
+  methods: {
+    async ready() {
+      const self = this
+
+      this.$emit('update:ready', true)
+      this.mapObject = this.$refs.map.mapObject
+
+      if (this.mapObject) {
+        try {
+          new Geocoder({
+            placeholder: 'Search for a place...',
+            defaultMarkGeocode: false,
+            geocoder: new Photon({
+              nameProperties: [
+                'name',
+                'street',
+                'suburb',
+                'hamlet',
+                'town',
+                'city',
+              ],
+              serviceUrl: 'https://photon.komoot.io/api'
+            }),
+            collapsed: false,
+          })
+              .on('markgeocode', async function (e) {
+                if (e && e.geocode && e.geocode.bbox) {
+                  // Empty out the query box so that the dropdown closes.  Note that "this" is the control object,
+                  // which is why this isn't in a separate method.
+                  this.moved = true
+                  this.setQuery('')
+
+                  self.mapObject.flyToBounds(e.geocode.bbox)
+
+                  self.$emit('searched')
+                }
+              })
+              .addTo(this.mapObject)
+        } catch (e) {
+          // This is usually caused by leaflet.
+          console.log('Ignore leaflet exception', e)
+        }
+      }
+
+      this.idle()
+    },
+    idle() {
+      this.mapObject = this.$refs.map.mapObject
+      this.mapIdle++
+      this.zoomToGroups()
+
+      try {
+        if (this.mapObject) {
+          const bounds = this.mapObject.getBounds()
+          this.bounds = bounds
+          let groupsInBounds = []
+
+          if (this.bounds) {
+            groupsInBounds = this.allGroups.filter(function (group) {
+              // We might either have the group names format (lat/lng at the top level) or the group summary format
+              // (lat/lng in location).
+              if (group.location) {
+                return (group.location.lat || group.location.lng) &&
+                    bounds.contains(new L.LatLng(group.location.lat, group.location.lng))
+              } else {
+                return (group.lat || group.lng) &&
+                    bounds.contains(new L.LatLng(group.lat, group.lng))
+              }
+            })
+          }
+
+          this.$emit(
+              'groups',
+              groupsInBounds.map((g) => g.id)
+          )
+
+          this.$emit('update:bounds', this.mapObject.getBounds())
+          this.$emit('update:zoom', this.mapObject.getZoom())
+          this.$emit('update:centre', this.mapObject.getCenter())
+        }
+      } catch (e) {
+        console.error('Error in map idle', e)
+      }
+    },
+    toJSON(bounds) {
+      return [
+        [bounds.getSouthWest().lat, bounds.getSouthWest().lng],
+        [bounds.getNorthEast().lat, bounds.getNorthEast().lng],
+      ]
+    },
+    dragEnd(e) {
+      this.moved = true
+      this.$emit('update:moved', true)
+      this.idle()
+    },
+    zoomToGroups() {
+      try {
+        if (!this.zoomedToGroups && this.mapObject && this.allGroups.length) {
+          const center = this.mapObject.getCenter()
+
+          this.zoomedToGroups = true
+
+          // Find the smallest box which contains 5 groups around the center.
+          const groups = this.allGroups
+
+          // Find the 5 closest groups.
+          const closest = groups
+              .map((group) => {
+                const lat = group.location.lat || group.lat
+                const lng = group.location.lng || group.lng
+                const distance = Math.sqrt((lat - center.lat) ** 2 + (lng - center.lng) ** 2)
+                return { group, distance }
+              })
+              .sort((a, b) => a.distance - b.distance)
+              .slice(0, 5)
+              .map((a) => a.group)
+
+          // Get the bounding box containing these groups.
+          const bounds = new L.LatLngBounds()
+          closest.forEach((group) => {
+            const lat = group.location.lat || group.lat
+            const lng = group.location.lng || group.lng
+            bounds.extend(new L.LatLng(lat, lng))
+          })
+
+          this.bounds = bounds.pad(0.1)
+          this.mapObject.flyToBounds(this.bounds)
+        }
+      } catch (e) {
+        console.error('Zoom to groups error', e)
+      }
+    },
+    yourGroup(id) {
+      return this.yourGroups.includes(id)
+    }
+  },
+}
+</script>
+<style scoped lang="scss">
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/_breakpoints';
+
+.mapbox {
+  width: 100%;
+  top: 0px;
+  left: 0;
+  border: 1px solid grey;
+}
+
+:deep(.leaflet-control-geocoder) {
+  right: 30px;
+}
+
+@media screen and (max-width: 360px) {
+  :deep(.leaflet-control-geocoder-form input) {
+    max-width: 200px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  :deep(.leaflet-control-geocoder-form input) {
+    height: calc(1.25em + 1rem + 2px);
+    padding: 0.5rem 1rem;
+    font-size: 1rem !important;
+    line-height: 1.25;
+    border-radius: 0.3rem;
+  }
+}
+
+:deep(.top) {
+  z-index: 1000 !important;
+}
+
+</style>
diff --git a/resources/js/components/GroupMapAndList.vue b/resources/js/components/GroupMapAndList.vue
new file mode 100644
index 000000000..a54fdfb81
--- /dev/null
+++ b/resources/js/components/GroupMapAndList.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div class="loader d-flex justify-content-around" v-if="loading">
+      <div class="d-flex flex-column justify-content-around">
+        <v-icon name="sync" scale=4 class="fa-spin" />
+      </div>
+    </div>
+    <div v-else>
+      <GroupMap
+          v-model:ready="mapready"
+          :initial-bounds="initialBounds"
+          :min-zoom="minZoom"
+          :max-zoom="maxZoom"
+          :bounds.sync="bounds"
+          :network="network"
+          :your-groups="yourGroups"
+          :hover="hover"
+          @groups="groupsChanged($event)"
+      />
+      <GroupsTable
+          :groupids="groupidsInBounds"
+          class="mt-3"
+          count
+          v-if="groupidsInBounds.length"
+          your-area="yourArea"
+          :your-groups="yourGroups"
+          :hover.sync="hover"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import {MAX_MAP_ZOOM, MIN_MAP_ZOOM} from "../constants";
+import GroupMap from "./GroupMap";
+import GroupsTable from "./GroupsTable.vue";
+import VIcon from 'vue-awesome/components/Icon'
+
+export default {
+  components: {
+    GroupsTable,
+    GroupMap,
+    VIcon,
+  },
+  props: {
+    initialBounds: {
+      type: Array,
+      required: true,
+    },
+    minZoom: {
+      type: Number,
+      required: false,
+      default: MIN_MAP_ZOOM,
+    },
+    maxZoom: {
+      type: Number,
+      required: false,
+      default: MAX_MAP_ZOOM,
+    },
+    network: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    yourGroups: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      infiniteId: +new Date(),
+      groupidsInBounds: [],
+      mapready: false,
+      bounds: null,
+      hover: null,
+      loading: true
+    }
+  },
+  async mounted() {
+    await this.$store.dispatch('groups/list', {
+      details: true
+    })
+
+    this.loading = false
+  },
+  methods: {
+    groupsChanged(groupids) {
+      this.groupidsInBounds = groupids
+    },
+  },
+}
+</script>
+<style scoped lang="scss">
+.loader {
+  height: 400px;
+  width: 100%;
+  opacity: .1;
+  pointer-events: none;
+  color: lightgrey;
+}
+</style>
diff --git a/resources/js/components/GroupMarker.vue b/resources/js/components/GroupMarker.vue
new file mode 100644
index 000000000..4befada9a
--- /dev/null
+++ b/resources/js/components/GroupMarker.vue
@@ -0,0 +1,80 @@
+<template>
+  <div v-if="group">
+    <l-marker
+        :lat-lng="[lat, lng]" :interactive="false" :options="{
+          title: group.name + ' - ' + __('groups.marker_title'),
+        }" :icon="icon"
+        @click="openModal"
+        @mouseover="hovering = true"
+        @mouseout="hovering = false"
+    />
+    <GroupInfoModal v-if="showModal" ref="modal" :id="group.id" @close="showModal = false "/>
+  </div>
+</template>
+<script>
+import map from '../mixins/map'
+import GroupInfoModal from "./GroupInfoModal.vue";
+
+export default {
+  components: {GroupInfoModal},
+  mixins: [map],
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+    highlight: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    hover: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      showModal: false,
+      hovering: false
+    }
+  },
+  watch: {
+    hover(val) {
+      this.hovering = val
+    }
+  },
+  computed: {
+    icon() {
+      let icon = "/images/vendor/leaflet/dist/marker-icon.png"
+
+      if (this.hovering) {
+        icon = "/images/vendor/leaflet/dist/marker-icon-red.png"
+      } else if (this.highlight) {
+        icon = "/images/vendor/leaflet/dist/marker-icon-green.png"
+      }
+
+      return L.icon({
+        iconUrl: icon,
+      })
+    },
+    group() {
+      return this.$store.getters['groups/get'](this.id)
+    },
+    lat() {
+      return this.group.location ? this.group.location.lat : this.group.lat
+    },
+    lng() {
+      return this.group.location ? this.group.location.lng : this.group.lng
+    }
+  },
+  methods: {
+    openModal() {
+      this.showModal = true
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+</style>
diff --git a/resources/js/components/GroupPage.vue b/resources/js/components/GroupPage.vue
index deb47cd64..8f852cd1e 100644
--- a/resources/js/components/GroupPage.vue
+++ b/resources/js/components/GroupPage.vue
@@ -177,6 +177,7 @@ export default {
     this.initialGroup.candemote = this.candemote
     this.initialGroup.ingroup = this.ingroup
 
+    console.log('Group page initial group', this.initialGroup)
     this.$store.dispatch('groups/set', this.initialGroup)
 
     this.events.forEach(e => {
diff --git a/resources/js/components/GroupsPage.vue b/resources/js/components/GroupsPage.vue
index e4f1693a1..494f19690 100644
--- a/resources/js/components/GroupsPage.vue
+++ b/resources/js/components/GroupsPage.vue
@@ -27,7 +27,7 @@
         <div class="pt-2 pb-2">
           <div v-if="yourGroups.length">
             <GroupsTable
-                :groups="yourGroups"
+                :groupids="yourGroups"
                 class="mt-3"
                 :tab="currentTab"
                 @nearest="currentTab = 1"
@@ -43,50 +43,23 @@
           <b class="text-uppercase d-none d-lg-block">{{ __('groups.groups_title2') }}</b>
         </template>
         <div v-if="nearbyGroups.length">
-          <p class="mt-1">
-            {{ nearestGroups }}
-            <a href="/profile/edit" class="small">{{ __('groups.nearest_groups_change') }}</a>.
-          </p>
-          <GroupsTable
-              :groups="nearbyGroups"
-              class="mt-3"
-              :tab="currentTab"
-              @all="currentTab = 2"
-              your-area="yourArea"
-          />
+          <GroupMapAndList :initial-bounds="nearbyGroups" :yourGroups="yourGroups"/>
         </div>
         <div v-else class="mt-2 mb-2 text-center">
           <div v-if="yourArea" v-html="__('groups.no_groups_nearest_with_location')" />
           <div v-else v-html="__('groups.no_groups_nearest_no_location')" />
         </div>
       </b-tab>
-      <b-tab class="pt-2" lazy>
-        <template slot="title">
-          <b class="text-uppercase d-block d-md-none">{{ __('groups.all_groups_mobile') }}</b>
-          <b class="text-uppercase d-none d-md-block">{{ __('groups.all_groups') }}</b>
-        </template>
-        <GroupsTable
-            :groups="groups"
-            class="mt-3"
-            count
-            search
-            :networks="networks"
-            :network="network"
-            :all-group-tags="allGroupTags"
-            :show-tags="showTags"
-            :tab="currentTab"
-            your-area="yourArea"
-        />
-      </b-tab>
     </b-tabs>
   </div>
 </template>
 <script>
 import GroupsTable from './GroupsTable'
 import auth from '../mixins/auth'
+import GroupMapAndList from "./GroupMapAndList.vue";
 
 export default {
-  components: {GroupsTable},
+  components: {GroupMapAndList, GroupsTable},
   mixins: [ auth ],
   props: {
     network: {
@@ -99,12 +72,25 @@ export default {
       required: false,
       default: 'mine'
     },
-    allGroups: {
+    yourGroups: {
       type: Array,
+      required: true
+    },
+    nearbyGroups: {
+      type: Array,
+      required: true
+    },
+    yourArea: {
+      type: String,
       required: false,
       default: null
     },
-    yourArea: {
+    yourLat: {
+      type: String,
+      required: false,
+      default: null
+    },
+    yourLng: {
       type: String,
       required: false,
       default: null
@@ -128,6 +114,7 @@ export default {
       type: Array,
       required: true
     },
+    // TODO Check whether all these parameters are now used or can be removed
     allGroupTags: {
       type: Array,
       required: true
@@ -146,18 +133,6 @@ export default {
         return a.name.localeCompare(b.name)
       }) : []
     },
-    yourGroups() {
-      return this.groups.filter(g => {
-        return g.following
-      })
-    },
-    nearbyGroups() {
-      return this.groups.filter(g => {
-        return g.nearby && !g.following
-      }).sort((a, b) => {
-        return a.distance - b.distance
-      })
-    },
     nearestGroups() {
       return this.$lang.get('groups.nearest_groups', {
         location: this.yourArea
@@ -165,49 +140,60 @@ export default {
     }
   },
   watch: {
-    currentTab(newVal) {
-      // We want to update the URL in the browser.  In a full app this would be done by the router, but hack it in
-      // here.
-      try {
-        let tag = '';
+    currentTab: {
+      handler: function (newVal) {
+        // We want to update the URL in the browser.  In a full app this would be done by the router, but hack it in
+        // here.
+        try {
+          let tag = '';
 
-        switch (newVal) {
-          case 1: tag = 'nearby'; break;
-          case 2: tag = 'all'; break;
-          default: tag = 'mine'; break;
-        }
+          switch (newVal) {
+            case 1:
+              tag = 'other';
+              break;
+            case 2:
+              tag = 'all';
+              break;
+            default:
+              tag = 'mine';
+              break;
+          }
 
-        if (!this.network) {
-          // If we are vieiwng a specific network, don't mess with the URL as it's confusing.
-          window.history.pushState(null, "Groups", "/group/" + tag);
+          if (!this.network) {
+            // If we are vieiwng a specific network, don't mess with the URL as it's confusing.
+            window.history.pushState(null, "Groups", "/group/" + tag);
+          }
+        } catch (e) {
+          console.error("Failed to update URL")
         }
-      } catch (e) {
-        console.error("Failed to update URL")
-      }
+      },
+      immediate: true
     }
   },
   created() {
-    // Data is passed from the blade template to us via props.  We put it in the store for all components to use,
-    // and so that as/when it changes then reactivity updates all the views.
-    //
-    // Further down the line this may change so that the data is obtained via an AJAX call and perhaps SSR.
-    this.$store.dispatch('groups/setList', {
-      groups: Object.values(this.allGroups)
-    })
-
-    // We have three tabs, and might be asked to start on a specific one.
+    // We have two tabs, but we want to support old URLs for backwards compatibility.
     switch (this.tab) {
-      case 'nearby':
-        this.currentTab = 1;
-        break;
       case 'all':
       case 'network':
-        this.currentTab = 2;
+      case 'nearby':
+      case 'other':
+        this.currentTab = 1;
         break;
       default:
         this.currentTab = 0;
         break;
     }
+  },
+  mounted() {
+    if (this.currentTab === 0) {
+      // Fetch our own groups.  We fetch them individually because there aren't that many.
+      this.yourGroups.forEach((g) => {
+        this.$store.dispatch('groups/fetch', {
+          id: g,
+          includeStats: false
+        })
+      })
+    }
   }
 }
 </script>
diff --git a/resources/js/components/GroupsRequiringModeration.vue b/resources/js/components/GroupsRequiringModeration.vue
index 6dfa2aeb8..7719c3be6 100644
--- a/resources/js/components/GroupsRequiringModeration.vue
+++ b/resources/js/components/GroupsRequiringModeration.vue
@@ -2,7 +2,8 @@
   <div v-if="loaded && groups.length">
     <h2 class="mt-4">{{ __('groups.groups_title_admin') }}</h2>
     <section class="table-section" id="groups-1">
-      <GroupsTable :groups="groups" approve />
+      TODO
+<!--      <GroupsTable :groups="groups" approve />-->
     </section>
   </div>
 </template>
diff --git a/resources/js/components/GroupsTable.vue b/resources/js/components/GroupsTable.vue
index da6d0519f..2ec01e98e 100644
--- a/resources/js/components/GroupsTable.vue
+++ b/resources/js/components/GroupsTable.vue
@@ -1,70 +1,37 @@
 <template>
   <div>
     <p v-if="count" v-html="translatedGroupCount" />
-    <div class="pl-4 pr-4 pt-2 pb-2 d-none d-md-block">
-      <GroupsTableFilters
-          v-if="search"
-          :name.sync="searchName"
-          :location.sync="searchLocation"
-          :network.sync="searchNetwork"
-          :country.sync="searchCountry"
-          :tags.sync="searchTags"
-          :networks="networks"
-          :groups="groups"
-          :all-group-tags="allGroupTags"
-          :show-tags="showTags"
-      />
-    </div>
-    <div class="d-block d-md-none" v-if="search">
-      <div class="clickme d-flex justify-content-end pr-3 text-uppercase" v-if="!searchShow" @click="toggleFilters">
-        <a href="#">{{ __('groups.show_filters') }}</a>&nbsp;<b-img class="plusminusicon" src="/images/add-icon.svg" />
-      </div>
-      <div class="clickme d-flex justify-content-end pr-3 text-uppercase" v-if="searchShow" @click="toggleFilters">
-        <b-img class="plusminusicon" src="/images/minus-icon.svg" /><a href="#">&nbsp;{{ __('groups.hide_filters') }}</a>
-      </div>
-      <GroupsTableFilters
-          v-if="searchShow"
-          class="pl-1 pr-1 pt-2 pb-2"
-          :name.sync="searchName"
-          :location.sync="searchLocation"
-          :network.sync="searchNetwork"
-          :country.sync="searchCountry"
-          :networks="networks"
-          :groups="groups"
-          :all-group-tags="allGroupTags"
-          :show-tags="showTags"
-      />
-    </div>
-    <hr class="d-block d-md-none" />
-    <b-table :fields="fields" :items="itemsToShow" sort-null-last thead-tr-class="d-none d-md-table-row" :sort-compare="sortCompare">
+    <b-table :fields="fields" :items="itemsToShow" sort-null-last thead-tr-class="d-none d-md-table-row" :sort-compare="sortCompare"
+             @row-hovered="rowHovered" @row-unhovered="rowUnhovered"
+    >
       <template slot="head(group_image)">
         <span />
       </template>
       <template slot="cell(group_image)" slot-scope="data">
-        <b-img-lazy :src="data.item.group_name.image" class="profile" @error.native="brokenProfileImage" v-if="data.item.group_name.image" />
+        <b-img-lazy :src="data.item.image" class="profile" @error.native="brokenProfileImage" v-if="data.item.image" />
         <b-img-lazy :src="defaultProfile" class="profile" v-else />
       </template>
       <template slot="head(group_name)">
         <b-img src="/icons/group_name_ico.svg" class="mt-3 icon" />
       </template>
       <template slot="cell(group_name)" slot-scope="data">
-        <a :href="'/group/view/' + data.item.group_name.idgroups">{{ data.item.group_name.name }}</a>
-        <GroupArchivedBadge :idgroups="data.item.group_name.idgroups" />
+        <a :href="'/group/view/' + data.item.id">{{ data.item.name }}</a>
+        <GroupArchivedBadge :idgroups="data.item.id" />
       </template>
       <template slot="head(location)">
         <b-img src="/icons/map_marker_ico.svg" class="mt-3 icon " />
       </template>
       <template slot="cell(location)" slot-scope="data">
-        <div class="d-none d-md-block">
-          {{ data.item.location.location.location }} <span class="text-muted small" v-if="data.item.location.location.distance">{{ distance(data.item.location.location.distance )}}&nbsp;km</span>
+        <div class="d-none d-md-block" v-if="data.item.location && data.item.location.location">
+          {{ data.item.location.location }} <span class="text-muted small" v-if="data.item.location.distance">{{ distance(data.item.location.distance )}}&nbsp;km</span>
           <br />
-          <span class="small text-muted">{{ data.item.location.location.country }}</span>
+          <span class="small text-muted">{{ data.item.location.country }}</span>
         </div>
       </template>
-      <template slot="head(all_confirmed_hosts_count)">
+      <template slot="head(hosts)">
         <b-img src="/icons/user_ico.svg" class="mt-3 iconsmall" />
       </template>
-      <template slot="head(all_confirmed_restarters_count)">
+      <template slot="head(restarters)">
         <b-img src="/icons/volunteer_ico-thick.svg" class="mt-3 icon" />
       </template>
       <template slot="head(next_event)">
@@ -73,7 +40,7 @@
       <template slot="cell(next_event)" slot-scope="data">
         <div>
           <div v-if="data.item.next_event">
-            {{ data.item.next_event }}
+            {{ formatDate(data.item.next_event.start) }}
           </div>
           <div v-else>
             {{ __('groups.upcoming_none_planned') }}
@@ -85,9 +52,9 @@
       </template>
       <template slot="cell(following)" slot-scope="data">
         <div v-if="approve" class="cell-warning d-flex justify-content-around p-2">
-          <a :href="'/group/edit/' + data.item.idgroups">{{ __('groups.group_requires_moderation') }}</a>
+          <a :href="'/group/edit/' + data.item.id">{{ __('groups.group_requires_moderation') }}</a>
         </div>
-        <b-btn variant="primary" class="text-nowrap mr-2" v-else-if="!data.item.following" :to="'/group/join/' + data.item.idgroups">
+        <b-btn variant="primary" class="text-nowrap mr-2" v-else-if="!yourGroup(data.item.id)" :to="'/group/join/' + data.item.id">
           <span class="d-block d-md-none">
             {{ __('groups.join_group_button_mobile') }}
           </span>
@@ -95,7 +62,7 @@
             {{ __('groups.join_group_button') }}
           </span>
         </b-btn>
-        <b-btn variant="primary" class="text-nowrap mr-2" v-else @click="leaveGroup(data.item.idgroups)">
+        <b-btn variant="primary" class="text-nowrap mr-2" v-else @click="leaveGroup(data.item.id)">
           <span class="d-block d-md-none">
             {{ __('groups.leave_group_button_mobile') }}
           </span>
@@ -103,22 +70,27 @@
             {{ __('groups.leave_group_button') }}
           </span>
         </b-btn>
-        <ConfirmModal :key="'leavegroupmodal-' + data.item.idgroups" :ref="'confirmLeave-' + data.item.idgroups" @confirm="leaveConfirmed(data.item.idgroups)" :message="__('groups.leave_group_confirm')" />
+        <ConfirmModal :key="'leavegroupmodal-' + data.item.id" :ref="'confirmLeave-' + data.item.id" @confirm="leaveConfirmed(data.item.id)" :message="__('groups.leave_group_confirm')" />
       </template>
     </b-table>
+    <infinite-loading @infinite="loadMore">
+      <span slot="no-results" />
+      <span slot="no-more" />
+    </infinite-loading>
   </div>
 </template>
 <script>
 import { DATE_FORMAT, DEFAULT_PROFILE } from '../constants'
 import moment from 'moment'
-import GroupsTableFilters from './GroupsTableFilters'
 import ConfirmModal from './ConfirmModal'
 import GroupArchivedBadge from "./GroupArchivedBadge.vue";
+import InfiniteLoading from 'vue-infinite-loading'
+
 
 export default {
-  components: {GroupArchivedBadge, ConfirmModal, GroupsTableFilters},
+  components: {GroupArchivedBadge, ConfirmModal, InfiniteLoading},
   props: {
-    groups: {
+    groupids: {
       type: Array,
       required: true
     },
@@ -127,31 +99,6 @@ export default {
       required: false,
       default: false
     },
-    search: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    network: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    networks: {
-      type: Array,
-      required: false,
-      default: null
-    },
-    allGroupTags: {
-      type: Array,
-      required: false,
-      default: null
-    },
-    showTags: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     tab: {
       type: Number,
       required: false,
@@ -162,6 +109,11 @@ export default {
       required: false,
       default: null
     },
+    yourGroups: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     approve: {
       type: Boolean,
       required: false,
@@ -174,17 +126,11 @@ export default {
         { key: 'group_image', label: 'Group Image', tdClass: 'image'},
         { key: 'group_name', label: 'Group Name', sortable: true },
         { key: 'location', label: 'Location', tdClass: "hidecell", thClass: "hidecell" },
-        { key: 'all_confirmed_hosts_count', label: 'Hosts', sortable: true, tdClass: "hidecell text-center", thClass: "hidecell text-center pl-3" },
-        { key: 'all_confirmed_restarters_count', label: 'Restarters', sortable: true, tdClass: "hidecell text-center", thClass: "hidecell text-center pl-3" },
+        { key: 'hosts', label: 'Hosts', sortable: true, tdClass: "hidecell text-center", thClass: "hidecell text-center pl-3" },
+        { key: 'restarters', label: 'Restarters', sortable: true, tdClass: "hidecell text-center", thClass: "hidecell text-center pl-3" },
         { key: 'next_event', label: 'Next Event', sortable: true, tdClass: "hidecell event", thClass: "hidecell" },
         { key: 'following' , label: 'Follow' }
       ],
-      searchName: null,
-      searchLocation: null,
-      searchNetwork: null,
-      searchCountry: null,
-      searchShow: false,
-      searchTags: null,
       show: 3,
       left: []
     }
@@ -193,95 +139,52 @@ export default {
     defaultProfile() {
       return DEFAULT_PROFILE
     },
-    filteredGroups() {
-      return this.groups.filter(g => {
-        // Groups can be in multiple networks.
-        let match = true
-
-        if (this.searchNetwork) {
-          match &= typeof g.networks.find(n => {
-            return parseInt(this.searchNetwork) === parseInt(n)
-          }) !== 'undefined'
-        }
-
-        if (this.searchName) {
-          match &= g.name.toLowerCase().indexOf(this.searchName.toLowerCase()) !== -1
-        }
-
-        if (this.searchLocation) {
-          if (g.location && g.location.location) {
-            match &= g.location.location.toLowerCase().indexOf(this.searchLocation.toLowerCase()) !== -1
-          }
-        }
-
-        if (this.searchCountry) {
-          match &= g.location && g.location.country && g.location.country.toLowerCase().indexOf(this.searchCountry.country.toLowerCase()) !== -1
-        }
-
-        if (this.searchTags) {
-          // Tag in common?
-          if (this.searchTags.length) {
-            const tagsInCommon = this.searchTags.filter(t => {
-              return g.group_tags.indexOf(t.id) !== -1
-            })
-
-            match &= tagsInCommon.length > 0
-          }
-        }
-
-        if (this.left.includes(g.idgroups)) {
-          match = false
-        }
-
-        return match
-      })
-    },
     items() {
-      return this.filteredGroups.map(g => {
-        return {
-          idgroups: g.idgroups,
-          group_image: g.group_image ? g.group_image : DEFAULT_PROFILE,
-          group_name: g,
-          location: g,
-          next_event: g.next_event ? (new moment(g.next_event).format(DATE_FORMAT)) : null,
-          all_hosts_count: g.all_hosts_count,
-          all_restarters_count: g.all_restarters_count,
-          all_confirmed_hosts_count: g.all_confirmed_hosts_count,
-          all_confirmed_restarters_count: g.all_confirmed_restarters_count,
-          following: g.following
-        }
+      const ret = this.$store.getters['groups/list'].filter((g) => {
+        return this.groupids.includes(g.id)
       })
+      return ret
     },
     itemsToShow() {
-      return this.items.slice(0, this.show)
+      const items = this.items.slice(0, this.show)
+
+      items.sort((a, b) => {
+        return a.name.localeCompare(b.name)
+      })
+
+      return items
     },
     translatedGroupCount() {
-      return this.$lang.choice('groups.group_count', this.filteredGroups.length, {
-        count: this.filteredGroups.length
+      return this.$lang.choice('groups.group_count', this.items.length, {
+        count: this.items.length
       })
     },
-},
-  created() {
-    // We might arrive on the page to filter by network.
-    this.searchNetwork = this.network
   },
-  mounted() {
-    this.loadMore()
+  watch: {
+    async itemsToShow(newVal) {
+      // We may need to fetch the group over the API if not in store.
+      //
+      // This is for the "your groups" or "other groups nearby" case.  For "all groups" it would result in too
+      // many API calls, so we fetch those in a single slow API call.
+      newVal.forEach(async (g) => {
+        const group = this.$store.getters['groups/get'](g.id)
+
+        if (!group || !group.location) {
+          await this.$store.dispatch('groups/fetch', {
+            id: g.id,
+            includeStats: false
+          })
+        }
+      })
+    }
   },
   methods: {
+    formatDate(date) {
+      return new moment(date).format('ddd Do MMM YYYY')
+    },
     brokenProfileImage(event) {
       event.target.src = DEFAULT_PROFILE
     },
-    toggleFilters() {
-      this.searchShow = !this.searchShow
-
-      // Reset the search filters so that we don't end up filtered if we switch screen sizes.  It might be nice
-      // to preserve the filter values, but that would be a bit of a faff with some two-way props bindings.
-      this.searchName = null
-      this.searchLocation = null
-      this.searchNetwork = this.network
-      this.searchCountry = null
-    },
     sortCompare(aRow, bRow, key, sortDesc, formatter, compareOptions, compareLocale) {
       const a = aRow[key]
       const b = bRow[key]
@@ -300,7 +203,7 @@ export default {
         } else {
           return new moment(aRow.group_name.next_event).unix() - new moment(bRow.group_name.next_event).unix()
         }
-      } else if (key === 'all_hosts_count' || key === 'all_restarters_count') {
+      } else if (key === 'hosts' || key === 'restarters') {
         if (parseInt(a) < parseInt(b)) {
           return -1
         } else if (parseInt(a) > parseInt(b)) {
@@ -312,12 +215,12 @@ export default {
         return toString(a).localeCompare(toString(b), compareLocale, compareOptions)
       }
     },
-    loadMore() {
-      // We can't use a genuine infinite scroll because we need the data loaded into the table for filtering.  But
-      // we can load it gradually so that the page looks more responsive.
+    loadMore($state) {
       if (this.show < this.items.length) {
-        this.show += 10
-        setTimeout(this.loadMore, 1)
+        this.show++
+        $state.loaded()
+      } else {
+        $state.complete()
       }
     },
     leaveGroup(idgroups) {
@@ -336,8 +239,17 @@ export default {
       } else {
         return Math.round(dist)
       }
+    },
+    yourGroup(id) {
+      return this.yourGroups.includes(id)
+    },
+    rowHovered(item, index, event) {
+      this.$emit('update:hover', item.id)
+    },
+    rowUnhovered(item, index, event) {
+      this.$emit('update:hover', null)
     }
-  }
+  },
 }
 </script>
 <style scoped lang="scss">
diff --git a/resources/js/components/GroupsTableFilters.vue b/resources/js/components/GroupsTableFilters.vue
deleted file mode 100644
index 6a3c71dfd..000000000
--- a/resources/js/components/GroupsTableFilters.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-  <div class="gt-layout">
-    <b-form-input
-        v-model="searchName"
-        type="search"
-        :placeholder="__('groups.search_name_placeholder')"
-        class="mb-1 mb-md-0"
-    />
-    <multiselect
-        v-if="showTags"
-        v-model="searchTags"
-        :placeholder="__('groups.search_tags_placeholder')"
-        :options="allGroupTags"
-        track-by="id"
-        label="tag_name"
-        :multiple="true"
-        :allow-empty="false"
-        deselect-label=""
-        :taggable="true"
-        selectLabel=""
-        class="m-0 mb-1 mb-md-0"
-        allow-empty
-        :selectedLabel="__('partials.remove')"
-        open-direction="bottom"
-    />
-    <b-form-input
-        v-model="searchLocation"
-        type="search"
-        :placeholder="__('groups.search_location_placeholder')"
-        class="mb-1 mb-md-0"
-    />
-    <multiselect
-        v-model="searchCountry"
-        :placeholder="__('groups.search_country_placeholder')"
-        :options="countryOptions"
-        track-by="country"
-        label="country"
-        :multiple="false"
-        :allow-empty="false"
-        deselect-label=""
-        :taggable="false"
-        selectLabel=""
-        class="m-0 mb-1 mb-md-0"
-        allow-empty
-        :selectedLabel="__('partials.remove')"
-        open-direction="bottom"
-    />
-    <multiselect
-        v-model="searchNetwork"
-        :placeholder="__('networks.network')"
-        :options="networkOptions"
-        track-by="id"
-        label="name"
-        :multiple="false"
-        :allow-empty="false"
-        deselect-label=""
-        :taggable="false"
-        selectLabel=""
-        class="m-0 mb-1 mb-md-0"
-        allow-empty
-        :selectedLabel="__('partials.remove')"
-        open-direction="bottom"
-    />
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    groups: {
-      type: Array,
-      required: true
-    },
-    network: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    networks: {
-      type: Array,
-      required: false,
-      default: null
-    },
-    allGroupTags: {
-      type: Array,
-      required: false,
-      default: null
-    },
-    showTags: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data () {
-    return {
-      searchName: null,
-      searchLocation: null,
-      searchNetwork: null,
-      searchCountry: null,
-      searchTags: null
-    }
-  },
-  watch: {
-    searchName(newVal) {
-      this.$emit('update:name', newVal)
-    },
-    searchLocation(newVal) {
-      this.$emit('update:location', newVal)
-    },
-    searchNetwork(newVal) {
-      this.$emit('update:network', newVal ? newVal.id : null)
-    },
-    searchCountry(newVal) {
-      this.$emit('update:country', newVal)
-    },
-    searchTags(newVal) {
-      this.$emit('update:tags', newVal)
-    },
-  },
-  computed: {
-    networkOptions() {
-      return this.networks ? this.networks.map(n => {
-        return {
-          id: n.id,
-          name: n.name
-        }
-      }) : []
-    },
-    countryOptions() {
-      // Return unique countries
-      let ret = []
-
-      if (this.groups) {
-        this.groups.forEach(g => {
-          if (g.location && g.location.country && !ret.find(g2 => {
-            return g2.country && g2.country.localeCompare(g.location.country) === 0
-          })) {
-            ret.push({
-              country: g.location.country
-            })
-          }
-        })
-      }
-
-      return ret.sort((a, b) => {
-        return a.country.localeCompare(b.country)
-      })
-    },
-  },
-  created() {
-    // Multiselect's v-model uses the options object, so find the relevant one.
-    this.searchNetwork = this.networkOptions.find(n => n.id === this.network)
-  },
-}
-</script>
-<style scoped lang="scss">
-@import 'resources/global/css/_variables';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins/_breakpoints';
-
-.gt-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto;
-
-  @include media-breakpoint-up(md) {
-    grid-column-gap: 20px;
-    grid-template-columns: repeat( auto-fit, minmax(0px, 1fr) );
-    grid-template-rows: 1fr;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/resources/js/constants.js b/resources/js/constants.js
index 2e46c355a..23e1de772 100644
--- a/resources/js/constants.js
+++ b/resources/js/constants.js
@@ -47,4 +47,7 @@ export const UNKNOWN_STRINGS = [
     'no brand',
     'no model',
     'none'
-]
\ No newline at end of file
+]
+
+export const MIN_MAP_ZOOM = 1
+export const MAX_MAP_ZOOM = 14
diff --git a/resources/js/store/groups.js b/resources/js/store/groups.js
index e678e0c36..901d536fd 100644
--- a/resources/js/store/groups.js
+++ b/resources/js/store/groups.js
@@ -63,7 +63,7 @@ export default {
   },
   mutations: {
     set(state, params) {
-      Vue.set(state.list, params.idgroups, params)
+      Vue.set(state.list, params.id || params.idgroups, params)
     },
     setList(state, params) {
       let list = {}
@@ -132,9 +132,20 @@ export default {
         commit('setModerate', ret.data)
       }
     },
-    async list({commit}) {
-      let ret = await axios.get('/api/v2/groups/names?locale=' + getLocale())
-      if (ret && ret.data) {
+    async list({commit}, params) {
+      let url
+
+      if (params && params.details) {
+        // We want more details.
+        url = '/api/v2/groups/summary?locale=' + getLocale() + '&includeNextEvent=true&includeCounts=true'
+      } else {
+        // Just the name and lat/lng.
+        url = '/api/v2/groups/names?locale=' + getLocale()
+      }
+
+      let ret = await axios.get(url)
+
+      if (ret) {
         commit('setList', {
           groups: ret.data.data
         })
@@ -205,8 +216,15 @@ export default {
       return id
     },
     async fetch({ rootGetters, commit }, params) {
+      // TODO Handle fetching case.
       try {
-        let ret = await axios.get('/api/v2/groups/' + params.id + '?api_token=' + rootGetters['auth/apiToken'] + '&locale=' + getLocale())
+        let url = '/api/v2/groups/' + params.id + '?api_token=' + rootGetters['auth/apiToken'] + '&locale=' + getLocale()
+
+        if (params.hasOwnProperty('includeStats')) {
+           url += '&includeStats=' + params.includeStats
+        }
+
+        let ret = await axios.get(url)
 
         commit('set', ret.data.data)
 
diff --git a/resources/views/group/index.blade.php b/resources/views/group/index.blade.php
index a8b1a1799..a06457218 100644
--- a/resources/views/group/index.blade.php
+++ b/resources/views/group/index.blade.php
@@ -21,8 +21,6 @@
       @endif
 
       <?php
-        $all_groups = $groups;
-
         // Any logged-in user can create a group.
         $can_create = Auth::user() ? true : false;
 
@@ -59,8 +57,11 @@
       <div class="vue">
         <GroupsPage
           csrf="{{ csrf_token() }}"
-          :all-groups="{{ json_encode($all_groups, JSON_INVALID_UTF8_IGNORE) }}"
+          :your-groups="{{ json_encode($your_groups, JSON_INVALID_UTF8_IGNORE) }}"
+          :nearby-groups="{{ json_encode($nearby_groups, JSON_INVALID_UTF8_IGNORE) }}"
           your-area="{{ $your_area }}"
+          your-lat="{{ $your_lat }}"
+          your-lng="{{ $your_lng }}"
           :can-create="{{ $can_create ? 'true' : 'false' }}"
           :user-id="{{ $myid }}"
           tab="{{ $tab }}"
diff --git a/resources/views/layouts/header.blade.php b/resources/views/layouts/header.blade.php
index 64d052eb2..ea04676fb 100644
--- a/resources/views/layouts/header.blade.php
+++ b/resources/views/layouts/header.blade.php
@@ -21,6 +21,8 @@
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     <link href="{{ asset('global/css/app.css') }}" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"  type="text/css" />
+    <link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css" type="text/css">
 
     @yield('extra-css')
 
diff --git a/resources/views/networks/show.blade.php b/resources/views/networks/show.blade.php
index 68a4c551d..940ef41c4 100644
--- a/resources/views/networks/show.blade.php
+++ b/resources/views/networks/show.blade.php
@@ -103,21 +103,6 @@
             </div>
             <div class="col-lg-9">
 
-                <section style="mt-40 mb-40">
-                    <h2>{{ __('networks.general.groups') }}</h2>
-
-                    <div class="panel">
-                    <p>
-                        {!! __('networks.general.count', [
-                            'count' => $network->groups->count(),
-                            'name' => $network->name,
-                            'id' => $network->id
-                        ]) !!}
-                    </p>
-                    </div>
-
-                </section>
-
                 <div class="vue-placeholder vue-placeholder-large">
                     <div class="vue-placeholder-content">@lang('partials.loading')...</div>
                 </div>
@@ -132,6 +117,16 @@
                     <EventsRequiringModeration :networks="[{{ $network->id }}]" />
                 </div>
 
+                <section style="mt-40 mb-40">
+                    <h2>{{ __('networks.general.groups') }}</h2>
+
+
+                    <div class="panel vue">
+                        <GroupMapAndList :network="{{ $network->id }}" :initial-bounds="{{ json_encode($mapBounds) }}" fetch-groups />
+                    </div>
+
+                </section>
+
             </div>
         </div>
 
diff --git a/routes/api.php b/routes/api.php
index f55d6d3d8..3537b4b03 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -72,6 +72,7 @@
 Route::prefix('v2')->group(function() {
     Route::middleware(\App\Http\Middleware\APISetLocale::class)->group(function() {
         Route::prefix('/groups')->group(function() {
+            Route::get('/summary', [API\GroupController::class, 'listSummaryv2']);
             Route::get('/names', [API\GroupController::class, 'listNamesv2']);
             Route::get('/tags', [API\GroupController::class, 'listTagsv2']);
             Route::get('{id}/events', [API\GroupController::class, 'getEventsForGroupv2']);
diff --git a/routes/web.php b/routes/web.php
index 053e29237..ee9dcdc2d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -309,6 +309,7 @@
         Route::get('/all', [GroupController::class, 'all']);
         Route::get('/mine', [GroupController::class, 'mine']);
         Route::get('/nearby', [GroupController::class, 'nearby']);
+        Route::get('/other', [GroupController::class, 'nearby']);
         Route::get('/network/{id}', [GroupController::class, 'network']);
         Route::get('/nearbyinvite/{groupId}/{userId}', [GroupController::class, 'inviteNearbyRestarter']);
         Route::get('/delete/{id}', [GroupController::class, 'delete']);
diff --git a/tests/Feature/Groups/APIv2GroupTest.php b/tests/Feature/Groups/APIv2GroupTest.php
index 23ce79564..40e181019 100644
--- a/tests/Feature/Groups/APIv2GroupTest.php
+++ b/tests/Feature/Groups/APIv2GroupTest.php
@@ -182,6 +182,23 @@ public function testCreateGroupLoggedOutWithToken()
         $json = json_decode($response->getContent(), true);
         $groups = $json['data'];
         $this->assertGroupFound($groups, $idgroups, true);
+
+        // Group should now appear in the list of groups.
+        $response = $this->get('/api/v2/groups/summary');
+        $response->assertSuccessful();
+        $json = json_decode($response->getContent(), true);
+        $groups = $json['data'];
+        $found = false;
+
+        foreach ($groups as $g)
+        {
+            if ($group->name == $g['name'])
+            {
+                $found = true;
+            }
+        }
+
+        $this->assertTrue($found);
     }
 
     private function assertGroupFound($groups, $id, $shouldBeFound) {
diff --git a/tests/Feature/Groups/BasicTest.php b/tests/Feature/Groups/BasicTest.php
index 3af88c638..1a6f76624 100644
--- a/tests/Feature/Groups/BasicTest.php
+++ b/tests/Feature/Groups/BasicTest.php
@@ -46,19 +46,16 @@ public function testPageLoads($url, $tab)
                 ':show-tags' => 'false',
             ],
         ]);
-
-        $groups = json_decode($props[1][':all-groups'], true);
-        $this->assertEquals($group->idgroups, $groups[0]['idgroups']);
-        $this->assertEquals(0, $groups[0]['location']['distance']);
     }
 
 
     public function tabProvider() {
         return [
             ['', 'mine'],
-            ['/all', 'all'],
+            ['/all', 'other'],
             ['/mine', 'mine'],
-            ['/nearby','nearby'],
+            ['/nearby','other'],
+            ['/other', 'other'],
         ];
     }
 }
diff --git a/tests/Feature/Networks/NetworkTest.php b/tests/Feature/Networks/NetworkTest.php
index 26415767b..53e16b3f9 100644
--- a/tests/Feature/Networks/NetworkTest.php
+++ b/tests/Feature/Networks/NetworkTest.php
@@ -285,10 +285,7 @@ public function network_page()
         ]);
         $response->assertRedirect();
 
-        // Group should now show on network page and in encoded list of networks for a group.
-        $response = $this->get('/group/network/' . $network->id);
-        $response->assertSee($group->name);
-        $response->assertSee('&quot;networks&quot;:[' . $network->id . ']', false);
+        // Group won't show on network page as retrieved via API.
 
         // All networks list visible to admin.
         $this->loginAsTestUser(Role::ADMINISTRATOR);
diff --git a/webpack.mix.js b/webpack.mix.js
index 2b2a4f117..e14288ad7 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -18,7 +18,7 @@ mix.webpackConfig({
         }),
         // Build a JS translation file that corresponds to our PHP lang/ folder.
         new WebpackShellPlugin({onBuildStart:['php artisan lang:js --no-lib resources/js/translations.js'], onBuildEnd:['php artisan translations:check']})
-    ]
+        ]
 });
 /*
  |--------------------------------------------------------------------------
@@ -56,4 +56,5 @@ mix.alias({
 })
 
 mix.copy('resources/js/components/StatsShare.vue', 'public/js/components/StatsShare.vue')
-mix.copy('resources/js/translations.js', 'public/js/translations.js')
\ No newline at end of file
+mix.copy('resources/js/translations.js', 'public/js/translations.js')
+mix.copy('node_modules/@vectorial1024/leaflet-color-markers/img/*', 'public/images/vendor/leaflet/dist')
\ No newline at end of file