publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-02 13:04:18 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Parameterize zoom experiments (#339)

Browse source 
* Adding ability to set flags in url
* parameterizing tile layers
This commit is contained in:
Nat Hillard 2021-07-14 11:26:12 -04:00 • committed by GitHub
commit 3cd6e06115
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 188 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/J40Header.tsx
View file

@ -25,7 +25,7 @@ const J40Header = () => {
const toggleMobileNav = (): void =>
setMobileNavOpen((prevOpen) => !prevOpen);
const headerLinks = (flags: string[] | undefined) => {
const headerLinks = (flags: {[key: string] : any} | undefined) => {
// static map of all possible menu items. Originally, it was all strings,
// but we need to handle both onsite and offsite links.
const menuData = new Map<string, JSX.Element>([
@ -64,7 +64,7 @@ const J40Header = () => {
// select which items from the above map to show, right now it's only two
// possibilities so it's simple. Note: strings are used as react keys
const menu =
flags?.includes('sprint3') ?
('sprint3' in flags!) ?
['about', 'cejst', 'methodology', 'contact'] :
['about', 'cejst', 'methodology', 'contact'];
// TODO: make feature flags flags work.

7
client/src/components/J40Map.tsx
View file

@ -7,10 +7,12 @@ import maplibregl, {LngLatBoundsLike,
Popup,
LngLatLike,
MapboxGeoJSONFeature} from 'maplibre-gl';
import mapStyle from '../data/mapStyle';
import {makeMapStyle} from '../data/mapStyle';
import PopupContent from './popupContent';
import * as constants from '../data/constants';
import ReactDOM from 'react-dom';
import {useFlags} from '../contexts/FlagContext';
import 'maplibre-gl/dist/maplibre-gl.css';
import * as styles from './J40Map.module.scss';
@ -27,11 +29,12 @@ const J40Map = () => {
const mapRef = useRef<Map>() as React.MutableRefObject<Map>;
const selectedFeature = useRef<MapboxGeoJSONFeature>();
const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM);
const flags = useFlags();
useEffect(() => {
const initialMap = new Map({
container: mapContainer.current!,
style: mapStyle,
style: makeMapStyle(flags),
center: constants.DEFAULT_CENTER as LngLatLike,
zoom: zoom,
minZoom: constants.GLOBAL_MIN_ZOOM,