Add Zoom/Lat/Lng to the URL (#293)

* mandatory eslint fix
* Addresses #286 - Adding lat/lng to the URL
* setting zoom on map load
* adding integration tests for zoom

client/cypress/e2e/latlngurl.spec.js

@@ -0,0 +1,15 @@
+// / <reference types="Cypress" />
+
+describe('LatLng Test', () => {
+  it('Checks that as the map zooms the lat/lng coordinates in the URL update', () => {
+    cy.visit('http://localhost:8000/en/cejst?flags=mb');
+    cy.url().should('include', '#3');
+    cy.get('.mapboxgl-ctrl-zoom-in > .mapboxgl-ctrl-icon').click();
+    cy.url().should('include', '#4');
+    cy.getMap().then((map) => {
+      cy.panTo(map, [-77.9, 35.04]);
+      cy.url().should('include', '#4/35.04/-77.9');
+    });
+  });
+});
+

client/cypress/support/commands.js

@@ -1,27 +1,23 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'},
-// (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'},
-// (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+/* MAP */
+
+// For some interactions, we need access to the underlying map
+// Below adapted from https://github.com/codeforcologne/edelgard-map
+Cypress.Commands.add('getMap', () => {
+  return cy.window().its('mapboxGlMap');
+});
+
+Cypress.Commands.add('waitForMove', (map) => {
+  return new Cypress.Promise((resolve) => {
+    map.on('moveend', resolve);
+  });
+});
+
+Cypress.Commands.add('panTo', (map, lngLat) => {
+  map.panTo(lngLat);
+  cy.waitForMove(map);
+});
+
+Cypress.Commands.add('getMapCanvas', () => {
+  return cy.get('.mapboxgl-canvas');
+});
+

client/src/components/mapboxMap.tsx

@@ -14,6 +14,13 @@ import ReactDOM from 'react-dom';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import * as styles from './mapboxMap.module.scss';
 
+declare global {
+  interface Window {
+    Cypress?: object;
+    mapboxGlMap: Map;
+  }
+}
+
 type ClickEvent = mapboxgl.MapMouseEvent & mapboxgl.EventData;
 
 const MapboxMap = () => {
@@ -33,6 +40,7 @@ const MapboxMap = () => {
       minZoom: constants.GLOBAL_MIN_ZOOM,
       maxZoom: constants.GLOBAL_MAX_ZOOM,
       maxBounds: constants.GLOBAL_MAX_BOUNDS as LngLatBoundsLike,
+      hash: true, // Adds hash of zoom/lat/long to the url
     });
     // disable map rotation using right click + drag
     initialMap.dragRotate.disable();
@@ -40,6 +48,14 @@ const MapboxMap = () => {
     // disable map rotation using touch rotation gesture
     initialMap.touchZoomRotate.disableRotation();
 
+    setZoom(initialMap.getZoom());
+
+    initialMap.on('load', () => {
+      if (window.Cypress) {
+        window.mapboxGlMap = initialMap;
+      }
+    });
+
     initialMap.on('click', handleClick);
     initialMap.addControl(new NavigationControl({showCompass: false}), 'top-left');
     map.current = initialMap;