Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: New Basemap Switcher and Pin Selection State #343

Merged
merged 34 commits into from
Jan 15, 2025
Merged
Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
8854d55
This may be a good 'Reacty' way to create a new control
popkinj Jan 8, 2025
d086db8
Unstyled with some weird behaviour
popkinj Jan 8, 2025
65223cc
Styled but with some double rendering
popkinj Jan 8, 2025
a2c3b1b
Working as expected now
popkinj Jan 8, 2025
0a0c798
Cleaning up a little
popkinj Jan 8, 2025
6530794
Tweaks
popkinj Jan 8, 2025
8bab319
That's enough examples for now
popkinj Jan 8, 2025
53cc52e
Enough basemapping for now
popkinj Jan 9, 2025
0491a28
Adding CORS to tile requests
popkinj Jan 9, 2025
71a302d
Merge branch 'main' into map/search-231
popkinj Jan 9, 2025
07cc156
Different cors setting
popkinj Jan 9, 2025
633bf2b
Different cors setting
popkinj Jan 9, 2025
0417700
Adding basemaps to the Caddy configuration
popkinj Jan 9, 2025
63c8b8b
Anonymous it is
popkinj Jan 9, 2025
7562fc2
Back to using OSM
popkinj Jan 9, 2025
0631fc1
No key now
popkinj Jan 9, 2025
cc519c7
URL param approach
popkinj Jan 9, 2025
f247583
Selection and hover working as expected
popkinj Jan 11, 2025
bbbd79a
Don't need this file anymore
popkinj Jan 11, 2025
769a005
Switching the location names to the top of the results
popkinj Jan 11, 2025
4f84dc1
Merge branch 'main' into map/search-231
popkinj Jan 11, 2025
f00154d
Some styling adjustments
popkinj Jan 13, 2025
057c372
Matching existing leaflet css breakpoints
popkinj Jan 13, 2025
7abe2dc
Mobile friendly button
popkinj Jan 13, 2025
130f21d
The halo
popkinj Jan 14, 2025
3ebe121
Taking care of some smells
popkinj Jan 14, 2025
909e806
Tweaking some css here
popkinj Jan 14, 2025
fa43341
New basemap defaults
popkinj Jan 15, 2025
6698ce1
Removing the underline in the sidebar
popkinj Jan 15, 2025
005e14b
Message for Organic Matter Composting
popkinj Jan 15, 2025
dd58c90
Basemap switching looking like the mockup
popkinj Jan 15, 2025
12b7ad5
Maybe this will pass
popkinj Jan 15, 2025
6ed1966
Merge branch 'main' into map/search-231
popkinj Jan 15, 2025
7797a73
New e2e tests passing
popkinj Jan 15, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/Caddyfile
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
script-src 'self' https://www2.gov.bc.ca https://*.openstreetmap.org;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://use.fontawesome.com https://*.openstreetmap.org;
font-src 'self' https://fonts.gstatic.com https://*.openstreetmap.org;
img-src 'self' data: https://fonts.googleapis.com http://www.w3.org https://*.gov.bc.ca https://*.openstreetmap.org;
img-src 'self' data: https://fonts.googleapis.com http://www.w3.org https://*.gov.bc.ca https://*.openstreetmap.org https://*.stadiamaps.com https://server.arcgisonline.com https://api.maptiler.com;
frame-ancestors 'none';
form-action 'self' {$BACKEND_URL};
frame-src 'none';
Expand Down
7 changes: 7 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"axios": "^1.4.0",
"clsx": "^2.1.1",
"leaflet": "^1.9.4",
"leaflet-switch-basemap": "^1.0.6",
"leaflet.markercluster": "^1.5.3",
"match-sorter": "^8.0.0",
"react": "^18.3.1",
Expand Down
Binary file added frontend/public/custom-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/custom-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/custom-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/custom-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/imagery.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/pale-osm.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/public/streets.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions frontend/src/assets/svgs/pin-default-1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions frontend/src/assets/svgs/pin-hover-1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions frontend/src/assets/svgs/pin-selected-1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions frontend/src/constants/marker-icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import shadowIcon1x from '@/assets/marker-shadow-1x.png'
import markerIcon2x from '@/assets/marker-icon-2x-blue.png'
import shadowIcon2x from '@/assets/marker-shadow-2x.png'
import crosshairsSvg from '@/assets/svgs/crosshairs.svg'
import pinDefault from '@/assets/svgs/pin-default-1.svg'
import pinSelected from '@/assets/svgs/pin-selected-1.svg'

export const blueIcon2x = new L.Icon({
iconUrl: markerIcon2x,
Expand All @@ -30,6 +32,57 @@ export const blueIcon1x = new L.Icon({
shadowAnchor: [8, 4],
})

export const pinDefaultIcon = new L.Icon({
iconUrl: pinDefault,
iconSize: [23, 30],
iconAnchor: [11.5, 30],
className: 'pin-default-icon',
// both relative to iconAnchor
popupAnchor: [0, -28],
tooltipAnchor: [0, -28],
shadowUrl: shadowIcon1x,
shadowSize: [16, 8],
shadowAnchor: [8, 4],
})

export const pinSelectedIcon = new L.Icon({
iconUrl: pinSelected,
iconSize: [23, 30],
iconAnchor: [11.5, 30],
className: 'pin-selected-icon',
// both relative to iconAnchor
popupAnchor: [0, -28],
tooltipAnchor: [0, -28],
shadowUrl: shadowIcon1x,
shadowSize: [16, 8],
shadowAnchor: [8, 4],
})
export const pinSelectedHoverIcon = new L.Icon({
iconUrl: pinSelected,
iconSize: [33, 33],
iconAnchor: [16.5, 33],
className: 'pin-selected-hover-icon',
// both relative to iconAnchor
popupAnchor: [0, -28],
tooltipAnchor: [0, -28],
shadowUrl: shadowIcon1x,
shadowSize: [16, 8],
shadowAnchor: [8, 4],
})

export const pinHoverIcon = new L.Icon({
iconUrl: pinDefault,
iconSize: [33, 33],
iconAnchor: [16.5, 33],
className: 'pin-hover-icon',
// both relative to iconAnchor
popupAnchor: [0, -28],
tooltipAnchor: [0, -28],
shadowUrl: shadowIcon1x,
shadowSize: [16, 8],
shadowAnchor: [8, 4],
})

// Used by Polygon and Point search tools
export const crosshairsIcon = new L.Icon({
iconUrl: crosshairsSvg,
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/pages/map/MapView.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

.map-view {
width: 100%;
height: calc(100vh - var(--header-height));
Expand Down Expand Up @@ -46,7 +45,7 @@
height: 18px;
background-color: var(--surface-color-brand-blue-100);
border: 1px solid var(--surface-color-border-light);
box-shadow: var(--box-shadow-small)
box-shadow: var(--box-shadow-small);
}

.point-search-circle,
Expand Down Expand Up @@ -94,4 +93,4 @@

.wl-pod-sources img {
filter: brightness(0.5);
}
}
12 changes: 3 additions & 9 deletions frontend/src/pages/map/MapView.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { LatLngTuple } from 'leaflet'
import { MapContainer, TileLayer } from 'react-leaflet'
import { MapContainer } from 'react-leaflet'
import { useTheme } from '@mui/material/styles'
import useMediaQuery from '@mui/material/useMediaQuery'
import clsx from 'clsx'
Expand All @@ -9,12 +9,12 @@ import { MapSearch } from './search/MapSearch'
import { MapDrawer } from './drawer/MapDrawer'
import { AuthorizationMarkers } from './layers/AuthorizationMarkers'
import { MyLocationMarker } from './layers/MyLocationMarker'
import { BasemapControl } from './layers/BasemapControl'
import { MapControls } from './layers/MapControls'
import { MapDataLayers } from './layers/MapDataLayers'
import { MapZoom } from './layers/MapZoom'
import { PointSearchLayer } from './layers/PointSearchLayer'
import { PolygonSearchLayer } from './layers/PolygonSearchLayer'

import 'leaflet/dist/leaflet.css'
import './MapView.css'

Expand All @@ -27,8 +27,6 @@ const CENTER_OF_BC: LatLngTuple = [53.7267, -127.6476]
function MapView() {
const theme = useTheme()
const isSmall = useMediaQuery(theme.breakpoints.down('md'))
// Feature flag for turning OpenStreetMap tiles gray
const osmGrayscale = env.VITE_OSM_GRAYSCALE_FLAG === 'true'

return (
<div
Expand All @@ -41,11 +39,7 @@ function MapView() {
zoomControl={false}
className="map-container"
>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
className={clsx(osmGrayscale && 'osm--grayscale')}
/>
<BasemapControl />
<MapDataLayers />
<MapControls />
<AuthorizationMarkers />
Expand Down
16 changes: 14 additions & 2 deletions frontend/src/pages/map/layers/AuthorizationMarker.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import { Tooltip } from 'react-leaflet'
import { useSelector } from 'react-redux'
import { RootState } from '@/app/store'

import OmrrData from '@/interfaces/omrr'
import { blueIcon1x, blueIcon2x } from '@/constants/marker-icons'
import {
pinDefaultIcon,
pinSelectedIcon,
pinHoverIcon,
pinSelectedHoverIcon,
} from '@/constants/marker-icons'
import { IconMarker } from './IconMarker'

interface Props {
Expand All @@ -15,11 +22,16 @@ export function AuthorizationMarker({
isSmall,
onClick,
}: Readonly<Props>) {
const selectedItem = useSelector((state: RootState) => state.map.selectedItem)
const isSelected =
selectedItem?.['Authorization Number'] === item['Authorization Number']

const title = item['Regulated Party']
return (
<IconMarker
position={[item.Latitude, item.Longitude]}
icon={isSmall ? blueIcon1x : blueIcon2x}
icon={isSelected ? pinSelectedIcon : pinDefaultIcon}
hoverIcon={isSelected ? pinSelectedHoverIcon : pinHoverIcon}
alt="Authorization marker"
title={title}
riseOnHover
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/pages/map/layers/AuthorizationMarkers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@ export function AuthorizationMarkers() {
const status = useSelector(selectStatus)
const theme = useTheme()
const isSmall = useMediaQuery(theme.breakpoints.down('sm'))
const store = useStore<RootState>()
const selectItem = useSetSelectedItem()
const isShapeSearchInProgressFn = useShapeFilterInProgress()
const selectedItem = useSelector((state: RootState) => state.map.selectedItem)

const hasMarkers =
status === 'succeeded' && Array.isArray(values) && values.length > 0
Expand Down
Loading
Loading