mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-29 20:51:16 -07:00
Use MapLibre for Map Visualization (#300)
* switching to MapLibre (see more at https://github.com/usds/justice40-tool/issues/299) * Removing traces of OpenLayers * Review comments - removing unused properties, component This is a pre-requisite for addressing issue #280 and other similar control-related tickets
This commit is contained in:
Nat Hillard
GitHub
parent
27d9472326
commit
2257627938
21 changed files with 53 additions and 505 deletions
|
|
@ -4,7 +4,7 @@ describe('LatLng Test', () => {
|
|||
it('Checks that as the map zooms the lat/lng coordinates in the URL update', () => {
|
||||
cy.visit('http://localhost:8000/en/cejst?flags=mb');
|
||||
cy.url().should('include', '#3');
|
||||
cy.get('.mapboxgl-ctrl-zoom-in > .mapboxgl-ctrl-icon').click();
|
||||
cy.get('.maplibregl-ctrl-zoom-in > .maplibregl-ctrl-icon').click();
|
||||
cy.url().should('include', '#4');
|
||||
cy.getMap().then((map) => {
|
||||
cy.panTo(map, [-77.9, 35.04]);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// For some interactions, we need access to the underlying map
|
||||
// Below adapted from https://github.com/codeforcologne/edelgard-map
|
||||
Cypress.Commands.add('getMap', () => {
|
||||
return cy.window().its('mapboxGlMap');
|
||||
return cy.window().its('underlyingMap');
|
||||
});
|
||||
|
||||
Cypress.Commands.add('waitForMove', (map) => {
|
||||
|
|
@ -18,6 +18,6 @@ Cypress.Commands.add('panTo', (map, lngLat) => {
|
|||
});
|
||||
|
||||
Cypress.Commands.add('getMapCanvas', () => {
|
||||
return cy.get('.mapboxgl-canvas');
|
||||
return cy.get('.maplibregl-canvas');
|
||||
});
|
||||
|
||||
|
|
|
|||
144
client/package-lock.json
generated
144
client/package-lock.json
generated
|
|
@ -2344,26 +2344,6 @@
|
|||
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
|
||||
"integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
|
||||
},
|
||||
"@mapbox/mapbox-gl-style-spec": {
|
||||
"version": "13.20.1",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.20.1.tgz",
|
||||
"integrity": "sha512-xVCJ3IbKoPwcPrxxtGAxUqHEVxXi1hnJtLIFqgkuZfnzj0KeRbk3dZlDr/KNo1/doJjIoFgPFUO/HMOT+wXGPA==",
|
||||
"requires": {
|
||||
"@mapbox/jsonlint-lines-primitives": "~2.0.2",
|
||||
"@mapbox/point-geometry": "^0.1.0",
|
||||
"@mapbox/unitbezier": "^0.0.0",
|
||||
"csscolorparser": "~1.0.2",
|
||||
"json-stringify-pretty-compact": "^2.0.0",
|
||||
"minimist": "^1.2.5",
|
||||
"rw": "^1.3.3",
|
||||
"sort-object": "^0.3.2"
|
||||
}
|
||||
},
|
||||
"@mapbox/mapbox-gl-supported": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
|
||||
"integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg=="
|
||||
},
|
||||
"@mapbox/point-geometry": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
|
||||
|
|
@ -2655,12 +2635,6 @@
|
|||
"integrity": "sha512-M2BiThcbxMxSKX8W4z5u9jKZn6datnM3+FpEU+eYw0//l31E2xhqi7vTAuJ/Sf0P3yhp66SDJgPu3bRRpvrdQQ==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/arcgis-rest-api": {
|
||||
"version": "10.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/arcgis-rest-api/-/arcgis-rest-api-10.4.4.tgz",
|
||||
"integrity": "sha512-5NwSfj4po+03fauyr4F5AxYzu8pbbqmxay+pNr5ef2V3Mj+7OylvV48VKuVoO9m799jhZdH3EQgQBHm3Y6q1Sw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/aria-query": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.1.tgz",
|
||||
|
|
@ -2783,9 +2757,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"@types/geojson": {
|
||||
"version": "7946.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
|
||||
"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==",
|
||||
"version": "7946.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
|
||||
"integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/get-port": {
|
||||
|
|
@ -2902,10 +2876,10 @@
|
|||
"integrity": "sha512-bpcvu/MKHHeYX+qeEN8GE7DIravODWdACVA1ctevD8CN24RhPZIKMn9ntfAsrvLfSX3cR5RrBKAbYm9bGs0A+Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/mapbox-gl": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.3.0.tgz",
|
||||
"integrity": "sha512-Vf5f/jWOgSKbQCm1q0KA7n2DrHZHEWT1NvKuWZl5k7LTYaw8LkZXe9AatWD16t5pKFNBVRpg2VVNXX89d7hyPQ==",
|
||||
"@types/maplibre-gl": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/maplibre-gl/-/maplibre-gl-1.13.1.tgz",
|
||||
"integrity": "sha512-AD7gFneLUYOWKhiwUvfD3LmQy4agJ2k2fe2V6XWCmt6R41d1q1H+BuyHJxFg31OTtDCag4u9ZZpQbjUmUG0gjQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/geojson": "*"
|
||||
|
|
@ -2955,18 +2929,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@types/ol": {
|
||||
"version": "6.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ol/-/ol-6.5.1.tgz",
|
||||
"integrity": "sha512-SHQjTKZ0s5EvhSnI0nyXEhmS/Ez+045c0TvSad0bZmwgldOsVTCG4b43G7q9dHjN+FQIET1Y4s/i2JFDsEZqEA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/arcgis-rest-api": "*",
|
||||
"@types/geojson": "*",
|
||||
"@types/rbush": "*",
|
||||
"@types/topojson-specification": "*"
|
||||
}
|
||||
},
|
||||
"@types/parse-json": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
|
||||
|
|
@ -2985,12 +2947,6 @@
|
|||
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/rbush": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-3.0.0.tgz",
|
||||
"integrity": "sha512-W3ue/GYWXBOpkRm0VSoifrP3HV0Ni47aVJWvXyWMcbtpBy/l/K/smBRiJ+fI8f7shXRjZBiux+iJzYbh7VmcZg==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/reach__router": {
|
||||
"version": "1.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.3.8.tgz",
|
||||
|
|
@ -3097,15 +3053,6 @@
|
|||
"integrity": "sha1-EHPEvIJHVK49EM+riKsCN7qWTk0=",
|
||||
"dev": true
|
||||
},
|
||||
"@types/topojson-specification": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.1.tgz",
|
||||
"integrity": "sha512-ZZYZUgkmUls9Uhxx2WZNt9f/h2+H3abUUjOVmq+AaaDFckC5oAwd+MDp95kBirk+XCXrYj0hfpI6DSUiJMrpYQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"@types/unist": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
|
||||
|
|
@ -13083,11 +13030,6 @@
|
|||
"integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
|
||||
"dev": true
|
||||
},
|
||||
"json-stringify-pretty-compact": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
|
||||
"integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
|
||||
},
|
||||
"json-stringify-safe": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
|
||||
|
|
@ -13718,10 +13660,10 @@
|
|||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"mapbox-gl": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.1.tgz",
|
||||
"integrity": "sha512-GSyubcoSF5MyaP8z+DasLu5v7KmDK2pp4S5+VQ5WdVQUOaAqQY4jwl4JpcdNho3uWm2bIKs7x1l7q3ynGmW60g==",
|
||||
"maplibre-gl": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-1.15.0.tgz",
|
||||
"integrity": "sha512-C3Mq7HDTndvAs8w+Ai1QzvVdN7xG2+2iHjtp3Pkmk7tJeSMcqZzQYHKyOCBkpTs7g2P/aFqMU8Tg853RIZxIZg==",
|
||||
"requires": {
|
||||
"@mapbox/geojson-rewind": "^0.5.0",
|
||||
"@mapbox/geojson-types": "^1.0.2",
|
||||
|
|
@ -13746,13 +13688,15 @@
|
|||
"supercluster": "^7.1.0",
|
||||
"tinyqueue": "^2.0.3",
|
||||
"vt-pbf": "^3.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mapbox/mapbox-gl-supported": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
|
||||
"integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"mapbox-to-css-font": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.0.tgz",
|
||||
"integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg=="
|
||||
},
|
||||
"markdown-escapes": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
|
||||
|
|
@ -14727,26 +14671,6 @@
|
|||
"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
|
||||
"dev": true
|
||||
},
|
||||
"ol": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/ol/-/ol-6.5.0.tgz",
|
||||
"integrity": "sha512-a5ebahrjF5yCPFle1rc0aHzKp/9A4LlUnjh+S3I+x4EgcvcddDhpOX3WDOs0Pg9/wEElrikHSGEvbeej2Hh4Ug==",
|
||||
"requires": {
|
||||
"ol-mapbox-style": "^6.1.1",
|
||||
"pbf": "3.2.1",
|
||||
"rbush": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"ol-mapbox-style": {
|
||||
"version": "6.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.3.2.tgz",
|
||||
"integrity": "sha512-itWZuwZHilztRM9983WmJ+ounaXIS0PdXF8h5xJd7cJhSv02M27w4RQkhiUw35/VLlUdTT/ei3KYi0w2TGDw2A==",
|
||||
"requires": {
|
||||
"@mapbox/mapbox-gl-style-spec": "^13.14.0",
|
||||
"mapbox-to-css-font": "^2.4.0",
|
||||
"webfont-matcher": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"on-finished": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
|
||||
|
|
@ -16088,14 +16012,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"rbush": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
|
||||
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
|
||||
"requires": {
|
||||
"quickselect": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"rc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
|
||||
|
|
@ -18017,16 +17933,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"sort-asc": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
|
||||
"integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k="
|
||||
},
|
||||
"sort-desc": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
|
||||
"integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4="
|
||||
},
|
||||
"sort-keys": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
|
||||
|
|
@ -18044,15 +17950,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"sort-object": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
|
||||
"integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
|
||||
"requires": {
|
||||
"sort-asc": "^0.1.0",
|
||||
"sort-desc": "^0.1.1"
|
||||
}
|
||||
},
|
||||
"source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
|
|
@ -19902,11 +19799,6 @@
|
|||
"minimalistic-assert": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"webfont-matcher": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
|
||||
"integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc="
|
||||
},
|
||||
"webidl-conversions": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -34,9 +34,8 @@
|
|||
"@testing-library/react": "^11.2.7",
|
||||
"@types/chroma-js": "^2.1.3",
|
||||
"@types/jest": "^26.0.23",
|
||||
"@types/mapbox-gl": "^2.3.0",
|
||||
"@types/maplibre-gl": "^1.13.1",
|
||||
"@types/node": "^15.3.1",
|
||||
"@types/ol": "^6.5.1",
|
||||
"@types/react": "^17.0.1",
|
||||
"@types/react-dom": "^17.0.1",
|
||||
"@types/react-helmet": "^6.1.1",
|
||||
|
|
@ -72,9 +71,7 @@
|
|||
"dependencies": {
|
||||
"@trussworks/react-uswds": "git+https://www.github.com/nathillardusds/react-uswds#nathillardusds/ssr",
|
||||
"chroma-js": "^2.1.2",
|
||||
"mapbox-gl": "^1.13.0",
|
||||
"ol": "^6.5.0",
|
||||
"ol-mapbox-style": "^6.3.2",
|
||||
"maplibre-gl": ">=1.14.0",
|
||||
"query-string": "^7.0.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
|
|
|
|||
13
client/src/components/J40Map.module.scss.d.ts
vendored
Normal file
13
client/src/components/J40Map.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
declare namespace J40MapModuleScssNamespace {
|
||||
export interface IJ40MapModuleScss {
|
||||
mapContainer: string;
|
||||
j40Popup: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const J40MapModuleScssModule: J40MapModuleScssNamespace.IJ40MapModuleScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: J40MapModuleScssNamespace.IJ40MapModuleScss;
|
||||
};
|
||||
|
||||
export = J40MapModuleScssModule;
|
||||
|
|
@ -1,29 +1,28 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
import React, {useRef, useEffect, useState} from 'react';
|
||||
import {LngLatBoundsLike,
|
||||
import maplibregl, {LngLatBoundsLike,
|
||||
Map,
|
||||
NavigationControl,
|
||||
PopupOptions,
|
||||
Popup,
|
||||
LngLatLike} from 'mapbox-gl';
|
||||
LngLatLike} from 'maplibre-gl';
|
||||
import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
import mapStyle from '../data/mapStyle';
|
||||
import ZoomWarning from './zoomWarning';
|
||||
import PopupContent from './popupContent';
|
||||
import * as constants from '../data/constants';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import * as styles from './mapboxMap.module.scss';
|
||||
import * as styles from './J40Map.module.scss';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
Cypress?: object;
|
||||
mapboxGlMap: Map;
|
||||
underlyingMap: Map;
|
||||
}
|
||||
}
|
||||
type ClickEvent = maplibregl.MapMouseEvent & maplibregl.EventData;
|
||||
|
||||
type ClickEvent = mapboxgl.MapMouseEvent & mapboxgl.EventData;
|
||||
|
||||
const MapboxMap = () => {
|
||||
const J40Map = () => {
|
||||
const mapContainer = React.useRef<HTMLDivElement>(null);
|
||||
const map = useRef<Map>() as React.MutableRefObject<Map>;
|
||||
const [zoom, setZoom] = useState(constants.GLOBAL_MIN_ZOOM);
|
||||
|
|
@ -38,7 +37,6 @@ const MapboxMap = () => {
|
|||
center: constants.DEFAULT_CENTER as LngLatLike,
|
||||
zoom: zoom,
|
||||
minZoom: constants.GLOBAL_MIN_ZOOM,
|
||||
maxZoom: constants.GLOBAL_MAX_ZOOM,
|
||||
maxBounds: constants.GLOBAL_MAX_BOUNDS as LngLatBoundsLike,
|
||||
hash: true, // Adds hash of zoom/lat/long to the url
|
||||
});
|
||||
|
|
@ -52,7 +50,7 @@ const MapboxMap = () => {
|
|||
|
||||
initialMap.on('load', () => {
|
||||
if (window.Cypress) {
|
||||
window.mapboxGlMap = initialMap;
|
||||
window.underlyingMap = initialMap;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -104,4 +102,4 @@ const MapboxMap = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export default MapboxMap;
|
||||
export default J40Map;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.mapControlContainer {
|
||||
margin: 18.5px 42px 23px 42px;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
declare namespace MapControlModuleScssNamespace {
|
||||
export interface IMapControlModuleScss {
|
||||
mapControlContainer: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const MapControlModuleScssModule: MapControlModuleScssNamespace.IMapControlModuleScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: MapControlModuleScssNamespace.IMapControlModuleScss;
|
||||
};
|
||||
|
||||
export = MapControlModuleScssModule;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react';
|
||||
import {Button, ButtonGroup} from '@trussworks/react-uswds';
|
||||
import Feature from 'ol/Feature';
|
||||
import Geometry from 'ol/geom/Geometry';
|
||||
import * as styles from './mapControls.module.scss';
|
||||
|
||||
interface IMapControlsProps {
|
||||
setFeatures: (arg0: Feature<Geometry>[]) => void;
|
||||
}
|
||||
|
||||
const MapControls = ({setFeatures}: IMapControlsProps) => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.mapControlContainer}>
|
||||
<h2>Explore the Tool</h2>
|
||||
<ButtonGroup type="segmented">
|
||||
<Button type="button">Combined</Button>
|
||||
<Button type="button" outline={true}>Poverty</Button>
|
||||
<Button type="button" outline={true}>Linguistic Isolation</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapControls;
|
||||
|
|
@ -1,16 +1,11 @@
|
|||
import * as React from 'react';
|
||||
import {useFlags} from '../contexts/FlagContext';
|
||||
import MapboxMap from './mapboxMap';
|
||||
import OpenLayersMap from './openlayersMap';
|
||||
import J40Map from './J40Map';
|
||||
|
||||
const MapWrapper = () => {
|
||||
const flags = useFlags();
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
flags.includes('mb') ?
|
||||
<MapboxMap /> :
|
||||
<OpenLayersMap features={[]}/>
|
||||
<J40Map />
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
13
client/src/components/mapboxMap.module.scss.d.ts
vendored
13
client/src/components/mapboxMap.module.scss.d.ts
vendored
|
|
@ -1,13 +0,0 @@
|
|||
declare namespace MapboxMapModuleScssNamespace {
|
||||
export interface IMapboxMapModuleScss {
|
||||
mapContainer: string;
|
||||
j40Popup: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const MapboxMapModuleScssModule: MapboxMapModuleScssNamespace.IMapboxMapModuleScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: MapboxMapModuleScssNamespace.IMapboxMapModuleScss;
|
||||
};
|
||||
|
||||
export = MapboxMapModuleScssModule;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.mapContainer {
|
||||
height: 676px;
|
||||
margin-bottom: 29px;
|
||||
max-width: revert;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
declare namespace MapModuleScssNamespace {
|
||||
export interface IMapModuleScss {
|
||||
mapContainer:string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const MapModuleScssModule: MapModuleScssNamespace.IMapModuleScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: MapModuleScssNamespace.IMapModuleScss;
|
||||
};
|
||||
|
||||
export = MapModuleScssModule;
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
import React, {useState, useEffect, useRef} from 'react';
|
||||
import Map from 'ol/Map';
|
||||
import View from 'ol/View';
|
||||
import Feature, {FeatureLike} from 'ol/Feature';
|
||||
import Geometry from 'ol/geom/Geometry';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import VectorSource from 'ol/source/Vector';
|
||||
import {fromLonLat} from 'ol/proj';
|
||||
import {Coordinate} from 'ol/coordinate';
|
||||
import olms from 'ol-mapbox-style';
|
||||
import mapStyle from '../data/mapStyle';
|
||||
import ZoomWarning from './zoomWarning';
|
||||
import OpenlayersPopup from './openlayersPopup';
|
||||
import {transformExtent} from 'ol/src/proj';
|
||||
import * as styles from './openlayersMap.module.scss';
|
||||
import * as constants from '../data/constants';
|
||||
import {Extent} from 'ol/src/extent';
|
||||
|
||||
interface IMapWrapperProps {
|
||||
features: Feature<Geometry>[],
|
||||
}
|
||||
|
||||
// The below adapted from
|
||||
// https://taylor.callsen.me/using-openlayers-with-react-functional-components/
|
||||
const MapWrapper = ({features}: IMapWrapperProps) => {
|
||||
const [map, setMap] = useState<Map>();
|
||||
const [featuresLayer, setFeaturesLayer] = useState<VectorLayer>();
|
||||
const [selectedFeature, setSelectedFeature] = useState<FeatureLike>();
|
||||
const [currentZoom, setCurrentZoom] = useState<number>(4);
|
||||
const [currentOverlayPosition, setCurrentOverlayPosition] = useState<Coordinate>([]);
|
||||
|
||||
const mapElement = useRef() as
|
||||
React.MutableRefObject<HTMLInputElement>;
|
||||
|
||||
// create state ref that can be accessed in OpenLayers onclick callback function
|
||||
// https://stackoverflow.com/a/60643670
|
||||
const mapRef = useRef() as React.MutableRefObject<Map>;
|
||||
if (map) {
|
||||
mapRef.current = map;
|
||||
}
|
||||
|
||||
const transform = (extent: Extent) : Extent => {
|
||||
return transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
|
||||
};
|
||||
|
||||
|
||||
useEffect( () => {
|
||||
const view = new View({
|
||||
center: fromLonLat(constants.DEFAULT_CENTER),
|
||||
zoom: 4,
|
||||
maxZoom: constants.GLOBAL_MAX_ZOOM,
|
||||
minZoom: constants.GLOBAL_MIN_ZOOM,
|
||||
extent: transform(constants.GLOBAL_MAX_BOUNDS.flat()) as [number, number, number, number],
|
||||
});
|
||||
|
||||
// create and add initial vector source layer, to be replaced layer
|
||||
const initialFeaturesLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
});
|
||||
|
||||
const initialMap = new Map({
|
||||
target: mapElement.current,
|
||||
view: view,
|
||||
controls: [],
|
||||
});
|
||||
const currentZoom = Math.floor(initialMap.getView().getZoom() || constants.GLOBAL_MIN_ZOOM);
|
||||
|
||||
initialMap.on('moveend', handleMoveEnd);
|
||||
initialMap.on('click', handleMapClick);
|
||||
setMap(initialMap);
|
||||
setCurrentZoom(currentZoom);
|
||||
setFeaturesLayer(initialFeaturesLayer);
|
||||
olms(initialMap, mapStyle);
|
||||
}, []);
|
||||
|
||||
|
||||
// update map if features prop changes
|
||||
useEffect( () => {
|
||||
if (features.length) { // may be empty on first render
|
||||
// set features to map
|
||||
featuresLayer?.setSource(
|
||||
new VectorSource({
|
||||
features: features,
|
||||
}),
|
||||
);
|
||||
const extent = featuresLayer?.getSource().getExtent();
|
||||
if (extent) {
|
||||
// fit map to feature extent (with 100px of padding)
|
||||
map?.getView().fit(extent, {
|
||||
padding: [100, 100, 100, 100],
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [features]);
|
||||
|
||||
const handleMapClick = (event: { pixel: any }) => {
|
||||
const clickedCoord = mapRef.current.getCoordinateFromPixel(event.pixel);
|
||||
|
||||
let featureFound = false;
|
||||
mapRef.current.forEachFeatureAtPixel(event.pixel, (feature) => {
|
||||
featureFound = true;
|
||||
setSelectedFeature(feature);
|
||||
return true;
|
||||
});
|
||||
|
||||
if (!featureFound) {
|
||||
setSelectedFeature(undefined);
|
||||
}
|
||||
|
||||
setCurrentOverlayPosition(clickedCoord);
|
||||
};
|
||||
|
||||
const handleMoveEnd = () => {
|
||||
const newZoom = Math.floor(mapRef.current.getView().getZoom() || constants.GLOBAL_MIN_ZOOM);
|
||||
if (currentZoom != newZoom) {
|
||||
setCurrentZoom(newZoom);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={mapElement} className={styles.mapContainer}/>
|
||||
{map?
|
||||
<OpenlayersPopup selectedFeature={selectedFeature!} map={map!} position={currentOverlayPosition} /> :
|
||||
''
|
||||
}
|
||||
<ZoomWarning zoomLevel={currentZoom} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapWrapper;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
.popupContainer {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
min-width: 280px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.popupContainer:after,
|
||||
.popupContainer:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popupContainer:after {
|
||||
border-top-color: white;
|
||||
border-width: 10px;
|
||||
left: 48px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.popupContainer:before {
|
||||
border-top-color: #cccccc;
|
||||
border-width: 11px;
|
||||
left: 48px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
|
||||
.popupCloser {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.popupCloser:after {
|
||||
content: "✖";
|
||||
}
|
||||
|
||||
.popupContent {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
declare namespace MapControlModuleScssNamespace {
|
||||
export interface IMapControlModuleScss {
|
||||
popupContainer: string;
|
||||
popupCloser: string;
|
||||
popupContent: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const MapControlModuleScssModule: MapControlModuleScssNamespace.IMapControlModuleScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: MapControlModuleScssNamespace.IMapControlModuleScss;
|
||||
};
|
||||
|
||||
export = MapControlModuleScssModule;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import React, {useRef, useEffect, useState} from 'react';
|
||||
import * as styles from './openlayersPopup.module.scss';
|
||||
import Overlay from 'ol/Overlay';
|
||||
import {Coordinate} from 'ol/Coordinate';
|
||||
import Map from 'ol/Map';
|
||||
import {FeatureLike} from 'ol/Feature';
|
||||
import PopupContent from './popupContent';
|
||||
|
||||
interface IOpenlayersPopupProps {
|
||||
map: Map,
|
||||
selectedFeature: FeatureLike;
|
||||
position: Coordinate;
|
||||
}
|
||||
|
||||
const OpenlayersPopup = ({map, selectedFeature, position}: IOpenlayersPopupProps) => {
|
||||
const popupContainerElement = useRef<HTMLDivElement>(null);
|
||||
const popupCloserElement = useRef<HTMLAnchorElement>(null);
|
||||
const popupContentElement = useRef<HTMLDivElement>(null);
|
||||
const [currentOverlay, setCurrentOverlay] = useState<Overlay>();
|
||||
|
||||
useEffect(() => {
|
||||
popupCloserElement.current!.onclick = function() {
|
||||
overlay.setPosition(undefined);
|
||||
popupCloserElement.current!.blur();
|
||||
return false;
|
||||
};
|
||||
|
||||
const overlay = new Overlay({
|
||||
element: popupContainerElement.current!,
|
||||
autoPan: true,
|
||||
autoPanAnimation: {
|
||||
duration: 250,
|
||||
},
|
||||
});
|
||||
setCurrentOverlay(overlay);
|
||||
map.addOverlay(overlay);
|
||||
}, []);
|
||||
|
||||
useEffect( () => {
|
||||
if (position && currentOverlay && selectedFeature) { // may be empty on first render
|
||||
currentOverlay.setPosition(position);
|
||||
}
|
||||
}, [position]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={popupContainerElement}
|
||||
className={styles.popupContainer}>
|
||||
<a href="#" ref={popupCloserElement} className={styles.popupCloser}></a>
|
||||
<div ref={popupContentElement} className={styles.popupContent}>
|
||||
<PopupContent properties={selectedFeature?.getProperties()} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default OpenlayersPopup;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Style, FillPaint} from 'mapbox-gl';
|
||||
import {Style, FillPaint} from 'maplibre-gl';
|
||||
import chroma from 'chroma-js';
|
||||
import * as constants from '../data/constants';
|
||||
|
||||
|
|
@ -8,27 +8,24 @@ function hexToHSLA(hex:string, alpha:number) {
|
|||
}
|
||||
|
||||
/**
|
||||
* `MakePaint` generates a zoom-faded Mapbox style formatted layer given a set of parameters.
|
||||
* `MakePaint` generates a zoom-faded Maplibre style formatted layer given a set of parameters.
|
||||
*
|
||||
* @param {string} field : the field within the data to consult
|
||||
* @param {number} minRamp : the minimum value this can assume
|
||||
* @param {number} medRamp : the medium value this can assume
|
||||
* @param {number} maxRamp : the maximum value this can assume
|
||||
* @param {boolean} high : whether this is a "high" or "low" layer
|
||||
* @return {FillPaint} a mapboxgl fill layer
|
||||
* @return {FillPaint} a maplibregl fill layer
|
||||
**/
|
||||
function makePaint({
|
||||
field,
|
||||
minRamp,
|
||||
medRamp,
|
||||
maxRamp,
|
||||
high = true,
|
||||
}: {
|
||||
field: string;
|
||||
minRamp: number;
|
||||
medRamp: number;
|
||||
maxRamp: number;
|
||||
high: boolean;
|
||||
}): FillPaint {
|
||||
const paintDescriptor : FillPaint = {
|
||||
'fill-color': [
|
||||
|
|
@ -88,14 +85,12 @@ const mapStyle : Style = {
|
|||
'source': 'carto',
|
||||
'type': 'raster',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM - 1,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM + 1,
|
||||
},
|
||||
{
|
||||
'id': 'geo',
|
||||
'source': 'geo',
|
||||
'type': 'raster',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM - 1,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM + 1,
|
||||
'layout': {
|
||||
// Make the layer visible by default.
|
||||
'visibility': 'none',
|
||||
|
|
@ -115,7 +110,6 @@ const mapStyle : Style = {
|
|||
minRamp: 0,
|
||||
medRamp: 0.6,
|
||||
maxRamp: 0.75,
|
||||
high: true,
|
||||
}),
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
|
|
@ -126,7 +120,6 @@ const mapStyle : Style = {
|
|||
'source-layer': 'blocks',
|
||||
'type': 'line',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM_HIGH,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM_HIGH,
|
||||
'layout': {
|
||||
'visibility': 'visible',
|
||||
'line-join': 'round',
|
||||
|
|
@ -143,7 +136,6 @@ const mapStyle : Style = {
|
|||
'type': 'raster',
|
||||
'source': 'labels',
|
||||
'minzoom': constants.GLOBAL_MIN_ZOOM,
|
||||
'maxzoom': constants.GLOBAL_MAX_ZOOM,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -192,16 +192,16 @@ $j40-max-width: 80ex;
|
|||
}
|
||||
}
|
||||
|
||||
// Mapbox overrides
|
||||
// Maplibre overrides
|
||||
// Note that these need to be here to properly override defaults
|
||||
|
||||
.mapboxgl-popup-close-button {
|
||||
.maplibregl-popup-close-button {
|
||||
font-size: 3em;
|
||||
margin-right: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content {
|
||||
.maplibregl-popup-content {
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important;
|
||||
border-radius: 8px !important;
|
||||
pointer-events: all !important;
|
||||
|
|
|
|||
|
|
@ -15,20 +15,9 @@
|
|||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"ol": ["node_modules/ol/src"],
|
||||
"ol/*": ["node_modules/ol/src/*"],
|
||||
"ol-mapbox-style": ["node_modules/ol-mapbox-style/src"],
|
||||
"ol-mapbox-style/*": ["node_modules/ol-mapbox-style/src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"./src/**/*ts",
|
||||
"./src/**/*tsx",
|
||||
"node_modules/ol/**/*",
|
||||
"node_modules/ol-mapbox-style/**/*"
|
||||
],
|
||||
"typeAcquisition": {
|
||||
"exclude": ["ol", "ol-mapbox-style"]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue