pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Decrease map page height if banner is enabled (for #272)

Browse source
This commit is contained in:
Paul Bienkowski 2022-09-12 17:16:15 +02:00 • committed by gluap
parent f423cdabfe
commit 7021af8e14
No known key found for this signature in database
1 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/pages/MapPage/index.tsx
View file

@ -1,13 +1,15 @@
import React, { useState, useCallback, useMemo , useRef } from "react"; import React, { useState, useCallback, useMemo } from "react";
import _ from "lodash"; import _ from "lodash";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Button } from "semantic-ui-react"; import { Button } from "semantic-ui-react";
import { Layer, Source } from "react-map-gl"; import { Layer, Source } from "react-map-gl";
import produce from "immer"; import produce from "immer";
import classNames from "classnames";
import type { Location } from "types";
import {Page, Map} from 'components' import {Page, Map} from 'components'
import {useConfig} from 'config' import {useConfig} from 'config'
import {colorByDistance, colorByCount, borderByZone, reds, isValidAttribute, getRegionLayers} from 'mapstyles' import {colorByDistance, colorByCount, borderByZone, reds, isValidAttribute} from 'mapstyles'
import {useMapConfig} from 'reducers/mapConfig' import {useMapConfig} from 'reducers/mapConfig'
import RoadInfo from "./RoadInfo"; import RoadInfo from "./RoadInfo";
@ -45,24 +47,25 @@ const untaggedRoadsLayer = {
const getUntaggedRoadsLayer = (colorAttribute, maxCount) => const getUntaggedRoadsLayer = (colorAttribute, maxCount) =>
produce(untaggedRoadsLayer, (draft) => { produce(untaggedRoadsLayer, (draft) => {
draft.filter = ["!", isValidAttribute(colorAttribute)]; draft.filter = ['!', isValidAttribute(colorAttribute)]
}); })
const getRoadsLayer = (colorAttribute, maxCount) => const getRoadsLayer = (colorAttribute, maxCount) =>
produce(untaggedRoadsLayer, (draft) => { produce(untaggedRoadsLayer, (draft) => {
draft.id = "obs_roads_normal"; draft.id = "obs_roads_normal";
draft.filter = isValidAttribute(colorAttribute); draft.filter = isValidAttribute(colorAttribute)
draft.minzoom = 10 draft.minzoom = 10
draft.paint["line-width"][6] = 6; // scale bigger on zoom draft.paint["line-width"][6] = 6; // scale bigger on zoom
draft.paint["line-color"] = colorAttribute.startsWith("distance_") draft.paint["line-color"] = colorAttribute.startsWith("distance_")
? colorByDistance(colorAttribute) ? colorByDistance(colorAttribute)
: colorAttribute.endsWith("_count") : colorAttribute.endsWith("_count")
? colorByCount(colorAttribute, maxCount) ? colorByCount(colorAttribute, maxCount)
: colorAttribute.endsWith("zone") : colorAttribute.endsWith('zone')
? borderByZone() ? borderByZone()
: "#DDD"; : "#DDD";
// draft.paint["line-opacity"][3] = 12; draft.paint["line-opacity"][3] = 12;
// draft.paint["line-opacity"][5] = 13; draft.paint["line-opacity"][5] = 13;
}); });
const getEventsLayer = () => ({ const getEventsLayer = () => ({
@ -169,6 +172,7 @@ function MapPage({ login }) {
}, },
[viewportRef] [viewportRef]
); );
const onClick = useCallback( const onClick = useCallback(
async (e) => { async (e) => {
// check if we clicked inside the mapInfoBox, if so, early exit // check if we clicked inside the mapInfoBox, if so, early exit
@ -328,7 +332,7 @@ function MapPage({ login }) {
</div> </div>
)} )}
<div className={styles.map}> <div className={styles.map}>
<Map viewportFromUrl onClick={onClick} onViewportChange={onViewportChange}hasToolbar> <Map viewportFromUrl onClick={onClick} onViewportChange={onViewportChange} hasToolbar>
<Button <Button
style={{ style={{
position: "absolute", position: "absolute",