publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-07-28 11:51:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding low zoom level styling (#334)

Browse source 
* Fixes #201 - As an EVCM, I want the map to make sense at varying zoom levels so that I'm not confused . For now uses a usa_low tileset created as part of #209 for zoom levels 3-7. Will need further iteration
* Adding comments
This commit is contained in:
Nat Hillard 2021-07-12 18:05:11 -04:00 • committed by GitHub
commit 68c345b950
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 117 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,6 @@ import maplibregl, {LngLatBoundsLike,
LngLatLike,
MapboxGeoJSONFeature} from 'maplibre-gl';
import mapStyle from '../data/mapStyle';
import ZoomWarning from './zoomWarning';
import PopupContent from './popupContent';
import * as constants from '../data/constants';
import ReactDOM from 'react-dom';
@ -76,7 +75,7 @@ const J40Map = () => {
const map = e.target;
const clickedCoord = e.point;
const features = map.queryRenderedFeatures(clickedCoord, {
layers: ['score'],
layers: [constants.HIGH_SCORE_LAYER_NAME],
});
const feature = features && features[0];
if (feature) {
@ -107,10 +106,10 @@ const J40Map = () => {
mapRef.current.on('move', () => {
setZoom(mapRef.current.getZoom());
});
mapRef.current.on('mouseenter', 'score', () => {
mapRef.current.on('mouseenter', constants.HIGH_SCORE_LAYER_NAME, () => {
mapRef.current.getCanvas().style.cursor = 'pointer';
});
mapRef.current.on('mouseleave', 'score', () => {
mapRef.current.on('mouseleave', constants.HIGH_SCORE_LAYER_NAME, () => {
mapRef.current.getCanvas().style.cursor = '';
});
}, [mapRef]);
@ -177,7 +176,6 @@ const J40Map = () => {
</button>
</div>
<div ref={mapContainer} className={styles.mapContainer}/>
<ZoomWarning zoomLevel={zoom} />
</div>
);
};