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
This commit is contained in:
Nat Hillard 2021-07-06 14:52:35 -04:00 committed by GitHub
commit 27d9472326
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 27 deletions

View file

@ -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;