publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-22 01:31:25 -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;
}
.mapboxgl-popup {
background-color: red;
.j40Popup {
max-height: 300px;
max-width: 300px;
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 {
sidebar: string;
mapContainer: string;
mapboxglPopup: string;
j40Popup: string;
}
}

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

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