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

Working mapbox popup

Browse source
This commit is contained in:
Nat Hillard 2021-06-30 00:15:33 -04:00
parent 4dbe05275f
commit d75a0888c3
3 changed files with 19 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/src/components/mapboxMap.module.scss
View file

@ -21,8 +21,13 @@ $sidebar-color: #ffffff;
border-radius: 4px; border-radius: 4px;
} }
.mapboxgl-popup { .j40Popup {
background-color: red;
max-height: 300px; max-height: 300px;
max-width: 300px;
overflow: scroll; overflow: scroll;
pointer-events: all !important;
}
.j40Popup .mapboxgl-popup-content {
pointer-events: all;
} }

2
client/src/components/mapboxMap.module.scss.d.ts vendored
View file

@ -2,7 +2,7 @@ declare namespace MapboxMapModuleScssNamespace {
export interface IMapboxMapModuleScss { export interface IMapboxMapModuleScss {
sidebar: string; sidebar: string;
mapContainer: string; mapContainer: string;
mapboxglPopup: string; j40Popup: string;
} }
} }

21
client/src/components/mapboxMap.tsx
View file

@ -4,21 +4,21 @@ import {LngLatBoundsLike,
Map, Map,
NavigationControl, NavigationControl,
PopupOptions, PopupOptions,
Popup} from 'mapbox-gl'; Popup,
LngLatLike} from 'mapbox-gl';
import mapStyle from '../data/mapStyle'; import mapStyle from '../data/mapStyle';
import ZoomWarning from './zoomWarning'; import ZoomWarning from './zoomWarning';
import PopupContent from './popupContent'; import PopupContent from './popupContent';
import * as styles from './mapboxMap.module.scss'; import * as styles from './mapboxMap.module.scss';
import * as constants from '../data/constants'; import * as constants from '../data/constants';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import 'mapbox-gl/dist/mapbox-gl.css';
type ClickEvent = mapboxgl.MapMouseEvent & mapboxgl.EventData; type ClickEvent = mapboxgl.MapMouseEvent & mapboxgl.EventData;
const MapboxMap = () => { const MapboxMap = () => {
const mapContainer = React.useRef<HTMLDivElement>(null); const mapContainer = React.useRef<HTMLDivElement>(null);
const map = useRef<Map>() as React.MutableRefObject<Map>; const map = useRef<Map>() as React.MutableRefObject<Map>;
const [lat, setLat] = useState(constants.DEFAULT_CENTER[0]);
const [lng, setLng] = useState(constants.DEFAULT_CENTER[1]);
const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM); const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM);
useEffect(() => { useEffect(() => {
@ -28,7 +28,7 @@ const MapboxMap = () => {
const initialMap = new Map({ const initialMap = new Map({
container: mapContainer.current!, container: mapContainer.current!,
style: mapStyle, style: mapStyle,
center: [lng, lat], center: constants.DEFAULT_CENTER as LngLatLike,
zoom: zoom, zoom: zoom,
minZoom: constants.GLOBAL_MIN_ZOOM, minZoom: constants.GLOBAL_MIN_ZOOM,
maxZoom: constants.GLOBAL_MAX_ZOOM, maxZoom: constants.GLOBAL_MAX_ZOOM,
@ -51,7 +51,7 @@ const MapboxMap = () => {
ReactDOM.render(<PopupContent properties={features[0].properties} />, placeholder); ReactDOM.render(<PopupContent properties={features[0].properties} />, placeholder);
const options : PopupOptions = { const options : PopupOptions = {
offset: [0, 0], offset: [0, 0],
className: styles.mapboxglPopup, className: styles.j40Popup,
}; };
new Popup(options) new Popup(options)
.setLngLat(e.lngLat) .setLngLat(e.lngLat)
@ -64,17 +64,18 @@ const MapboxMap = () => {
useEffect(() => { useEffect(() => {
if (!map.current) return; // wait for map to initialize if (!map.current) return; // wait for map to initialize
map.current.on('move', () => { map.current.on('move', () => {
setLng(map.current.getCenter().lng);
setLat(map.current.getCenter().lat);
setZoom(map.current.getZoom()); setZoom(map.current.getZoom());
}); });
map.current.on('mouseenter', 'score-low', () => {
map.current.getCanvas().style.cursor = 'pointer';
});
map.current.on('mouseleave', 'score-low', () => {
map.current.getCanvas().style.cursor = '';
});
}); });
return ( return (
<div> <div>
<div className={styles.sidebar}>
Longitude: {lng.toFixed(4)} | Latitude: {lat.toFixed(4)} | Zoom: {zoom.toFixed(2)}
</div>
<div ref={mapContainer} className={styles.mapContainer}/> <div ref={mapContainer} className={styles.mapContainer}/>
<ZoomWarning zoomLevel={zoom} /> <ZoomWarning zoomLevel={zoom} />
</div> </div>