supabase/examples/nextjs-live-tracker-map/components/MapView.js

import { useEffect, useReducer } from "react";
import { MapContainer, TileLayer, Polyline } from "react-leaflet";
import { RoundToFixDecimals } from "lib/utils";
import { supabase } from "lib/api";
import TextLog from "components/TextLog";

export default function MapView({ center, zoom }) {
  const [state, dispatch] = useReducer(mapReducer, initialState);

  useEffect(() => {
    // Listen to INSERT event on locations table
    const subscription = supabase
      .from("locations")
      .on("INSERT", (payload) => {
        console.log("New Position received!", payload);
        dispatch({ payload: payload.new });
      })
      .subscribe();

    return () => {
      if (subscription) supabase.removeSubscription(subscription);
    };
  }, []);

  function drawPolylines() {
    let result = Object.keys(state.userPositions).map((key, idx) => {
      const item = state.userPositions[key];
      if (!item) return;

      const { color, data } = item;
      const polyline = data.map((item) => {
        if (!item) return;
        const { lat, lng } = item;
        return [lat, lng];
      });

      return (
        <Polyline
          key={`line-${idx}`}
          pathOptions={{ color: color }}
          positions={polyline}
        />
      );
    });

    return result;
  }

  return (
    <div className="map-view">
      <MapContainer center={center} zoom={zoom || 15} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {drawPolylines()}
      </MapContainer>
      <TextLog log={state.log} />
    </div>
  );
}

function randomColor() {
  var array = ["black", "magenta", "blue", "indigo", "green", "blueviolet"];
  return array[Math.floor(Math.random() * array.length)];
}

const initialState = {
  log: "Start listerning...",
  userPositions: {},
};

const mapReducer = (state, action) => {
  const { id, user_id, latitude: lat, longitude: lng } = action.payload;
  const position = { id, user_id, lat, lng };

  let positions = state.userPositions[user_id];
  if (positions) positions.data = [...positions.data, position];
  else positions = { color: randomColor(), data: [position] };
  const userPositions = { ...state.userPositions, [user_id]: positions };

  let log = state.log;
  log += `\nuser_id=${user_id}`;
  log += ` lat=${RoundToFixDecimals(lat)}`;
  log += ` long=${RoundToFixDecimals(lng)}`;

  return {
    log,
    userPositions,
  };
};