diff --git a/app/src/frontend/map/map.tsx b/app/src/frontend/map/map.tsx
index 12de43c3..56a51e97 100644
--- a/app/src/frontend/map/map.tsx
+++ b/app/src/frontend/map/map.tsx
@@ -121,6 +121,8 @@ export const ColouringMap: FC<ColouringMapProps> = ({
       zoom: zoom,
     });
 
+    map.current.addControl(new mapboxgl.NavigationControl());
+
     map.current.on("move", () => {
       setLng(map.current.getCenter().lng.toFixed(4));
       setLat(map.current.getCenter().lat.toFixed(4));
@@ -128,8 +130,6 @@ export const ColouringMap: FC<ColouringMapProps> = ({
     });
   });
 
-  map.addControl(new mapboxgl.NavigationControl());
-
   return (
     <div
       ref={mapContainer}