diff --git a/src/state/StateContext.ts b/src/state/StateContext.ts
index 6149eada1..d1a375a1d 100644
--- a/src/state/StateContext.ts
+++ b/src/state/StateContext.ts
@@ -9,6 +9,7 @@ import { Transform } from "../geo/Transform";
 import { LngLatAlt } from "../api/interfaces/LngLatAlt";
 import { Image } from "../graph/Image";
 import { StateTransitionMatrix } from "./StateTransitionMatrix";
+import { IGeometryProvider } from "../api/interfaces/IGeometryProvider";
 
 export class StateContext implements IStateContext {
     private _state: StateBase;
@@ -16,6 +17,7 @@ export class StateContext implements IStateContext {
 
     constructor(
         state: State,
+        geometry: IGeometryProvider,
         transitionMode?: TransitionMode) {
         this._transitions = new StateTransitionMatrix();
         this._state = this._transitions.generate(
@@ -24,6 +26,7 @@ export class StateContext implements IStateContext {
                 alpha: 1,
                 camera: new Camera(),
                 currentIndex: -1,
+                geometry,
                 reference: { alt: 0, lat: 0, lng: 0 },
                 trajectory: [],
                 transitionMode: transitionMode == null ? TransitionMode.Default : transitionMode,
diff --git a/src/state/StateService.ts b/src/state/StateService.ts
index 4b8ba7e4e..3b671ee54 100644
--- a/src/state/StateService.ts
+++ b/src/state/StateService.ts
@@ -33,6 +33,7 @@ import { Transform } from "../geo/Transform";
 import { LngLatAlt } from "../api/interfaces/LngLatAlt";
 import { SubscriptionHolder } from "../util/SubscriptionHolder";
 import { Clock } from "three";
+import { IGeometryProvider } from "../api/interfaces/IGeometryProvider";
 
 interface IContextOperation {
     (context: IStateContext): IStateContext;
@@ -73,6 +74,7 @@ export class StateService {
 
     constructor(
         initialState: State,
+        geometry: IGeometryProvider,
         transitionMode?: TransitionMode) {
 
         const subs = this._subscriptions;
@@ -90,7 +92,7 @@ export class StateService {
                 (context: IStateContext, operation: IContextOperation): IStateContext => {
                     return operation(context);
                 },
-                new StateContext(initialState, transitionMode)),
+                new StateContext(initialState, geometry, transitionMode)),
             publishReplay(1),
             refCount());
 
diff --git a/src/state/interfaces/IStateBase.ts b/src/state/interfaces/IStateBase.ts
index e71518e20..14e9a83e5 100644
--- a/src/state/interfaces/IStateBase.ts
+++ b/src/state/interfaces/IStateBase.ts
@@ -2,11 +2,13 @@ import { Camera } from "../../geo/Camera";
 import { LngLatAlt } from "../../api/interfaces/LngLatAlt";
 import { TransitionMode } from "../TransitionMode";
 import { Image } from "../../graph/Image";
+import { IGeometryProvider } from "../../mapillary";
 
 export interface IStateBase {
     alpha: number;
     camera: Camera;
     currentIndex: number;
+    geometry: IGeometryProvider,
     reference: LngLatAlt;
     trajectory: Image[];
     transitionMode: TransitionMode;
diff --git a/src/state/state/StateBase.ts b/src/state/state/StateBase.ts
index af93faf69..4350378e8 100644
--- a/src/state/state/StateBase.ts
+++ b/src/state/state/StateBase.ts
@@ -9,9 +9,12 @@ import { Spatial } from "../../geo/Spatial";
 import { Transform } from "../../geo/Transform";
 import { LngLatAlt } from "../../api/interfaces/LngLatAlt";
 import { Image } from "../../graph/Image";
+import { IGeometryProvider } from "../../mapillary";
+import { connectedComponent } from "../../api/CellMath";
 
 export abstract class StateBase implements IStateBase {
     protected _spatial: Spatial;
+    protected _geometry: IGeometryProvider;
 
     protected _reference: LngLatAlt;
 
@@ -35,17 +38,22 @@ export abstract class StateBase implements IStateBase {
     protected _motionless: boolean;
 
     private _referenceThreshold: number;
+    private _referenceCellIds: Set<string>;
     private _transitionThreshold: number;
     private _transitionMode: TransitionMode;
 
     constructor(state: IStateBase) {
         this._spatial = new Spatial();
+        this._geometry = state.geometry;
 
         this._referenceThreshold = 250;
         this._transitionThreshold = 62.5;
         this._transitionMode = state.transitionMode;
 
         this._reference = state.reference;
+        this._referenceCellIds = new Set<string>(
+            connectedComponent(
+                this._geometry.lngLatToCellId(this._reference), 3, this._geometry));
 
         this._alpha = state.alpha;
         this._stateTransitionAlpha = 0;
@@ -107,6 +115,10 @@ export abstract class StateBase implements IStateBase {
         return this._camera;
     }
 
+    public get geometry(): IGeometryProvider {
+        return this._geometry;
+    }
+
     public get zoom(): number {
         return this._zoom;
     }
@@ -327,11 +339,16 @@ export abstract class StateBase implements IStateBase {
             reference.lng,
             reference.lat);
 
-        // do not reset reference if image is within threshold distance
         if (referenceDistance < this._referenceThreshold) {
             return false;
         }
 
+        // do not reset reference if image is within 7 x 7 grid of cells
+        const cellId = this._geometry.lngLatToCellId(currentImage.lngLat);
+        if (this._referenceCellIds.has(cellId)) {
+            return false;
+        }
+
         if (previousImage != null) {
             const transitionDistance = this._spatial.distanceFromLngLat(
                 currentImage.lngLat.lng,
@@ -353,6 +370,9 @@ export abstract class StateBase implements IStateBase {
         this._reference.lat = currentImage.lngLat.lat;
         this._reference.lng = currentImage.lngLat.lng;
         this._reference.alt = currentImage.computedAltitude;
+        this._referenceCellIds = new Set<string>(
+            connectedComponent(
+                this._geometry.lngLatToCellId(this._reference), 3, this._geometry));
 
         return true;
     }
diff --git a/src/viewer/Navigator.ts b/src/viewer/Navigator.ts
index 655884116..9f6b7029f 100644
--- a/src/viewer/Navigator.ts
+++ b/src/viewer/Navigator.ts
@@ -95,6 +95,7 @@ export class Navigator {
         this._stateService = stateService ??
             new StateService(
                 cameraControlsToState(cameraControls),
+                this._api.data.geometry,
                 options.transitionMode);
 
         this._cacheService = cacheService ??
diff --git a/test/helper/StateHelper.ts b/test/helper/StateHelper.ts
index 0e73350e1..ddf2e505a 100644
--- a/test/helper/StateHelper.ts
+++ b/test/helper/StateHelper.ts
@@ -1,3 +1,4 @@
+import { S2GeometryProvider } from "../../src/api/S2GeometryProvider";
 import { Camera } from "../../src/geo/Camera";
 import { IAnimationState } from "../../src/state/interfaces/IAnimationState";
 import { IStateBase } from "../../src/state/interfaces/IStateBase";
@@ -31,6 +32,7 @@ export function generateStateParams(): IStateBase {
         alpha: 1,
         camera: new Camera(),
         currentIndex: -1,
+        geometry: new S2GeometryProvider(),
         reference: { alt: 0, lat: 0, lng: 0 },
         trajectory: [],
         transitionMode: TransitionMode.Default,
diff --git a/test/state/StateService.test.ts b/test/state/StateService.test.ts
index 6fba4c30b..5f09a55aa 100644
--- a/test/state/StateService.test.ts
+++ b/test/state/StateService.test.ts
@@ -3,10 +3,11 @@ bootstrap();
 
 import { StateService } from "../../src/state/StateService";
 import { State } from "../../src/state/State";
+import { S2GeometryProvider } from "../../src/api/S2GeometryProvider";
 
 describe("StateService.ctor", () => {
     it("should be contructed", () => {
-        let stateService: StateService = new StateService(State.Traversing);
+        let stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         expect(stateService).toBeDefined();
     });
diff --git a/test/state/state/StateBase.test.ts b/test/state/state/StateBase.test.ts
index 266fbf2de..985d50972 100644
--- a/test/state/state/StateBase.test.ts
+++ b/test/state/state/StateBase.test.ts
@@ -12,6 +12,7 @@ import { ProjectionService } from "../../../src/viewer/ProjectionService";
 import { ImageCache } from "../../../src/graph/ImageCache";
 import { DataProvider } from "../../helper/ProviderHelper";
 import { TestImage } from "../../helper/TestImage";
+import { S2GeometryProvider } from "../../../src/api/S2GeometryProvider";
 
 class TestStateBase extends StateBase {
     public traverse(): StateBase { return null; }
@@ -42,6 +43,7 @@ let createState: () => IStateBase = (): IStateBase => {
         alpha: 1,
         camera: new Camera(),
         currentIndex: -1,
+        geometry: new S2GeometryProvider(),
         reference: { alt: 0, lat: 0, lng: 0 },
         trajectory: [],
         transitionMode: TransitionMode.Default,
diff --git a/test/state/state/TraversingState.test.ts b/test/state/state/TraversingState.test.ts
index 3a0565440..419d34730 100644
--- a/test/state/state/TraversingState.test.ts
+++ b/test/state/state/TraversingState.test.ts
@@ -14,6 +14,7 @@ import { ImageCache } from "../../../src/graph/ImageCache";
 import { DataProvider } from "../../helper/ProviderHelper";
 import { ProjectionService } from "../../../src/viewer/ProjectionService";
 import { TestImage } from "../../helper/TestImage";
+import { S2GeometryProvider } from "../../../src/api/S2GeometryProvider";
 
 describe("TraversingState.ctor", () => {
     it("should be defined", () => {
@@ -21,6 +22,7 @@ describe("TraversingState.ctor", () => {
             alpha: 1,
             camera: new Camera(),
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -72,6 +74,7 @@ describe("TraversingState.currentCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -106,6 +109,7 @@ describe("TraversingState.currentCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -148,6 +152,7 @@ describe("TraversingState.currentCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -204,6 +209,7 @@ describe("TraversingState.previousCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -238,6 +244,7 @@ describe("TraversingState.previousCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
diff --git a/test/state/state/WaitingState.test.ts b/test/state/state/WaitingState.test.ts
index dc6d9ba1b..77822de57 100644
--- a/test/state/state/WaitingState.test.ts
+++ b/test/state/state/WaitingState.test.ts
@@ -2,7 +2,6 @@ import * as THREE from "three";
 
 import { ImageHelper } from "../../helper/ImageHelper";
 
-import { Image } from "../../../src/graph/Image";
 import { SpatialImageEnt } from "../../../src/api/ents/SpatialImageEnt";
 import { IStateBase } from "../../../src/state/interfaces/IStateBase";
 import { WaitingState } from "../../../src/state/state/WaitingState";
@@ -12,6 +11,7 @@ import { ImageCache } from "../../../src/graph/ImageCache";
 import { DataProvider } from "../../helper/ProviderHelper";
 import { ProjectionService } from "../../../src/viewer/ProjectionService";
 import { TestImage } from "../../helper/TestImage";
+import { S2GeometryProvider } from "../../../src/api/S2GeometryProvider";
 
 describe("WaitingState.ctor", () => {
     it("should be defined", () => {
@@ -19,6 +19,7 @@ describe("WaitingState.ctor", () => {
             alpha: 1,
             camera: new Camera(),
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -70,6 +71,7 @@ describe("WaitingState.currentCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -104,6 +106,7 @@ describe("WaitingState.currentCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -146,6 +149,7 @@ describe("WaitingState.currentCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -205,6 +209,7 @@ describe("WaitingState.previousCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -239,6 +244,7 @@ describe("WaitingState.previousCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
@@ -279,6 +285,7 @@ describe("WaitingState.previousCamera.lookat", () => {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
+            geometry: new S2GeometryProvider(),
             reference: { alt: 0, lat: 0, lng: 0 },
             trajectory: [],
             transitionMode: TransitionMode.Default,
diff --git a/test/viewer/CacheService.test.ts b/test/viewer/CacheService.test.ts
index 2ad9391bc..d6ba8a88c 100644
--- a/test/viewer/CacheService.test.ts
+++ b/test/viewer/CacheService.test.ts
@@ -10,7 +10,6 @@ import { APIWrapper } from "../../src/api/APIWrapper";
 import { Graph } from "../../src/graph/Graph";
 import { GraphMode } from "../../src/graph/GraphMode";
 import { GraphService } from "../../src/graph/GraphService";
-import { IAnimationState } from "../../src/state/interfaces/IAnimationState";
 import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { State } from "../../src/state/State";
 import { StateService } from "../../src/state/StateService";
@@ -18,13 +17,14 @@ import { CacheService } from "../../src/viewer/CacheService";
 import { DataProvider } from "../helper/ProviderHelper";
 import { createDefaultState } from "../helper/StateHelper";
 import { StateServiceMockCreator } from "../helper/StateServiceMockCreator";
-import { LngLatAlt } from "../../src/mapillary";
+import { S2GeometryProvider } from "../../src/api/S2GeometryProvider";
+import { LngLatAlt } from "../../src/api/interfaces/LngLatAlt";
 
 describe("CacheService.ctor", () => {
     it("should be defined when constructed", () => {
         const api = new APIWrapper(new DataProvider());
         const graphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const cacheService = new CacheService(graphService, stateService, api);
 
@@ -36,7 +36,7 @@ describe("CacheService.configure", () => {
     it("should configure without errors", () => {
         const api = new APIWrapper(new DataProvider());
         const graphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const cacheService = new CacheService(graphService, stateService, api);
 
@@ -50,7 +50,7 @@ describe("CacheService.started", () => {
     it("should not be started", () => {
         const api = new APIWrapper(new DataProvider());
         const graphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const cacheService = new CacheService(graphService, stateService, api);
 
@@ -60,7 +60,7 @@ describe("CacheService.started", () => {
     it("should be started after calling start", () => {
         const api = new APIWrapper(new DataProvider());
         const graphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const cacheService = new CacheService(graphService, stateService, api);
 
@@ -72,7 +72,7 @@ describe("CacheService.started", () => {
     it("should not be started after calling stop", () => {
         const api = new APIWrapper(new DataProvider());
         const graphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const cacheService = new CacheService(graphService, stateService, api);
 
@@ -87,7 +87,7 @@ class TestStateService extends StateService {
     private _overridingCurrentState$: Subject<AnimationFrame>;
 
     constructor(currentState$: Subject<AnimationFrame>) {
-        super(State.Traversing);
+        super(State.Traversing, new S2GeometryProvider());
 
         this._overridingCurrentState$ = currentState$;
     }
diff --git a/test/viewer/Navigator.test.ts b/test/viewer/Navigator.test.ts
index 7d347f172..e488e5b18 100644
--- a/test/viewer/Navigator.test.ts
+++ b/test/viewer/Navigator.test.ts
@@ -30,6 +30,7 @@ import { CancelMapillaryError } from "../../src/error/CancelMapillaryError";
 import { NavigationDirection } from "../../src/graph/edge/NavigationDirection";
 import { DataProvider } from "../helper/ProviderHelper";
 import * as Common from "../../src/util/Common";
+import { S2GeometryProvider } from "../../src/api/S2GeometryProvider";
 
 const createState: () => IAnimationState = (): IAnimationState => {
     return {
@@ -66,7 +67,7 @@ describe("Navigator.ctor", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         const navigator: Navigator =
@@ -87,7 +88,7 @@ describe("Navigator.moveToKey$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         const loadingSpy: jasmine.Spy = spyOn(loadingService, "startLoading").and.stub();
@@ -115,7 +116,7 @@ describe("Navigator.moveToKey$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         spyOn(loadingService, "startLoading").and.stub();
         const stopLoadingSpy: jasmine.Spy = spyOn(loadingService, "stopLoading").and.stub();
@@ -152,7 +153,7 @@ describe("Navigator.moveToKey$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         spyOn(loadingService, "startLoading").and.stub();
@@ -188,7 +189,7 @@ describe("Navigator.moveToKey$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         spyOn(loadingService, "startLoading").and.stub();
@@ -220,7 +221,7 @@ describe("Navigator.moveToKey$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         spyOn(loadingService, "startLoading").and.stub();
         spyOn(loadingService, "stopLoading").and.stub();
@@ -257,7 +258,7 @@ describe("Navigator.moveToKey$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         spyOn(loadingService, "startLoading").and.stub();
         spyOn(loadingService, "stopLoading").and.stub();
@@ -298,7 +299,7 @@ describe("Navigator.moveToKey$", () => {
             const api: APIWrapper = new APIWrapper(new DataProvider());
             const graphService: GraphService = new GraphService(new Graph(api));
             const loadingService: LoadingService = new LoadingService();
-            const stateService: StateService = new StateService(State.Traversing);
+            const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
             const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
             spyOn(loadingService, "startLoading").and.stub();
@@ -357,7 +358,7 @@ describe("Navigator.movedToKey$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         spyOn(loadingService, "startLoading").and.stub();
@@ -404,7 +405,7 @@ class TestStateService extends StateService {
     private _overridingCurrentState$: Subject<AnimationFrame>;
 
     constructor(currentState$: Subject<AnimationFrame>) {
-        super(State.Traversing);
+        super(State.Traversing, new S2GeometryProvider());
 
         this._overridingCurrentState$ = currentState$;
     }
@@ -426,7 +427,7 @@ describe("Navigator.setFilter$", () => {
         const graph: Graph = new Graph(api);
         const graphService: GraphService = new GraphService(graph);
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         const clearImagesSpy: jasmine.Spy = spyOn(stateService, "clearImages").and.stub();
@@ -468,7 +469,7 @@ describe("Navigator.setFilter$", () => {
         const graph: Graph = new Graph(api);
         const graphService: GraphService = new GraphService(graph);
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         const setFilterSpy: jasmine.Spy = spyOn(graphService, "setFilter$");
@@ -500,7 +501,7 @@ describe("Navigator.setFilter$", () => {
         const graph: Graph = new Graph(api);
         const graphService: GraphService = new GraphService(graph);
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         spyOn(loadingService, "startLoading").and.stub();
@@ -667,7 +668,7 @@ describe("Navigator.setToken$", () => {
         const graph: Graph = new Graph(api);
         const graphService: GraphService = new GraphService(graph);
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         spyOn(cacheService, "start").and.stub();
@@ -798,7 +799,7 @@ describe("Navigator.setToken$", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
         const loadingService: LoadingService = new LoadingService();
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
         const cacheService: CacheService = new CacheService(graphService, stateService, api);
 
         spyOn(loadingService, "startLoading").and.stub();
diff --git a/test/viewer/PlayService.test.ts b/test/viewer/PlayService.test.ts
index fb5fdd8b5..14f381e4f 100644
--- a/test/viewer/PlayService.test.ts
+++ b/test/viewer/PlayService.test.ts
@@ -28,12 +28,13 @@ import { StateService } from "../../src/state/StateService";
 import { PlayService } from "../../src/viewer/PlayService";
 import { NavigationDirection } from "../../src/graph/edge/NavigationDirection";
 import { DataProvider } from "../helper/ProviderHelper";
+import { S2GeometryProvider } from "../../src/api/S2GeometryProvider";
 
 describe("PlayService.ctor", () => {
     it("should be defined when constructed", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const playService: PlayService = new PlayService(graphService, stateService);
 
@@ -43,7 +44,7 @@ describe("PlayService.ctor", () => {
     it("should emit default values", (done: () => void) => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const playService: PlayService = new PlayService(graphService, stateService);
 
@@ -67,7 +68,7 @@ describe("PlayService.playing", () => {
     it("should be playing after calling play", (done: () => void) => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const playService: PlayService = new PlayService(graphService, stateService);
 
@@ -87,7 +88,7 @@ describe("PlayService.playing", () => {
     it("should not be playing after calling stop", (done: () => void) => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const playService: PlayService = new PlayService(graphService, stateService);
 
@@ -123,7 +124,7 @@ describe("PlayService.speed$", () => {
     it("should emit when changing speed", (done: () => void) => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const playService: PlayService = new PlayService(graphService, stateService);
 
@@ -142,7 +143,7 @@ describe("PlayService.speed$", () => {
     it("should not emit when setting current speed", () => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const playService: PlayService = new PlayService(graphService, stateService);
 
@@ -175,7 +176,7 @@ describe("PlayService.speed$", () => {
     it("should clamp speed values to 0, 1 interval", (done: () => void) => {
         const api: APIWrapper = new APIWrapper(new DataProvider());
         const graphService: GraphService = new GraphService(new Graph(api));
-        const stateService: StateService = new StateService(State.Traversing);
+        const stateService: StateService = new StateService(State.Traversing, new S2GeometryProvider());
 
         const playService: PlayService = new PlayService(graphService, stateService);