+
+
+ );
+ }
+ // Get lat lon coords for SDAP call
+ let coordChecker = {
+ infrastructure: null,
+ plumes: null
+ };
+ if (this.props.infrastructure.size) {
+ let runningInfraMinLat = this.props.infrastructure.get(0).get('metadata').get('LLat');
+ let runningInfraMinLon = this.props.infrastructure.get(0).get('metadata').get('LLon');
+ let runningInfraMaxLat = this.props.infrastructure.get(0).get('metadata').get('LLat');
+ let runningInfraMaxLon = this.props.infrastructure.get(0).get('metadata').get('LLon');
+ this.props.infrastructure.forEach(infra => {
+ if (infra.get('metadata').get('LLat') < runningInfraMinLat) {
+ runningInfraMinLat = infra.get('metadata').get('LLat');
+ }
+ if (infra.get('metadata').get('LLat') > runningInfraMaxLat) {
+ runningInfraMaxLat = infra.get('metadata').get('LLat');
+ }
+ if (infra.get('metadata').get('LLon') < runningInfraMinLon) {
+ runningInfraMinLon = infra.get('metadata').get('LLon');
+ }
+ if (infra.get('metadata').get('LLon') > runningInfraMaxLon) {
+ runningInfraMaxLon = infra.get('metadata').get('LLon');
+ }
+ });
+ coordChecker.infrastructure = {
+ latMax: runningInfraMaxLat,
+ lonMax: runningInfraMaxLon,
+ latMin: runningInfraMinLat,
+ lonMin: runningInfraMinLon
+ };
+ }
+ if (this.props.plumes.size) {
+ let runningPlumeMinLat = this.props.plumes.get(0).get('location').get(0);
+ let runningPlumeMinLon = this.props.plumes.get(0).get('location').get(1);
+ let runningPlumeMaxLat = this.props.plumes.get(0).get('location').get(0);
+ let runningPlumeMaxLon = this.props.plumes.get(0).get('location').get(1);
+ this.props.plumes.forEach(plume => {
+ if (plume.get('location').get(0) < runningPlumeMinLat) {
+ runningPlumeMinLat = plume.get('location').get(0);
+ }
+ if (plume.get('location').get(0) > runningPlumeMaxLat) {
+ runningPlumeMaxLat = plume.get('location').get(0);
+ }
+ if (plume.get('location').get(1) < runningPlumeMinLon) {
+ runningPlumeMinLon = plume.get('location').get(1);
+ }
+ if (plume.get('location').get(1) > runningPlumeMaxLon) {
+ runningPlumeMaxLon = plume.get('location').get(1);
+ }
+ });
+ coordChecker.plumes = {
+ latMax: runningPlumeMaxLat,
+ lonMax: runningPlumeMaxLon,
+ latMin: runningPlumeMinLat,
+ lonMin: runningPlumeMinLon
+ };
+ }
+ let latMax = 0;
+ let lonMax = 0;
+ let latMin = 0;
+ let lonMin = 0;
+ if(coordChecker.plumes && coordChecker.infrastructure) {
+ latMax = Math.max(coordChecker.infrastructure.latMax, coordChecker.plumes.latMax);
+ lonMax = Math.max(coordChecker.infrastructure.lonMax, coordChecker.plumes.lonMax);
+ latMin = Math.min(coordChecker.infrastructure.latMin, coordChecker.plumes.latMin);
+ lonMin = Math.min(coordChecker.infrastructure.lonMin, coordChecker.plumes.lonMin);
+ } else {
+ latMax = coordChecker.infrastructure ? coordChecker.infrastructure.latMax : coordChecker.plumes.latMax;
+ lonMax = coordChecker.infrastructure ? coordChecker.infrastructure.lonMax : coordChecker.plumes.lonMax;
+ latMin = coordChecker.infrastructure ? coordChecker.infrastructure.latMin : coordChecker.plumes.latMin;
+ lonMin = coordChecker.infrastructure ? coordChecker.infrastructure.lonMin : coordChecker.plumes.lonMin;
+ }
+ // SDAP call will fail if min = max, so change values to be a range
+ if (latMax == latMin) {
+ latMax = latMax + 0.25;
+ latMin = latMin - 0.25;
+ }
+ if (lonMax == lonMin) {
+ lonMax = lonMax + 0.25;
+ lonMin = lonMin - 0.25;
+ }
+ const activeLayer = this.props.layers.find(
+ l => l.get("id") === this.props.griddedSettings.get("activeLayer")
+ );
+ let sdapUrl = appConfig.GRIDDED_LAYER_TYPES.find(
+ l => l.name === activeLayer.get("id")
+ ).sdapTimeSeriesSpark;
+ this.props.getSdapChartData(
+ activeLayer.get("palette").get("name"),
+ sdapUrl
+ .replace("{latMax}", latMax)
+ .replace("{lonMax}", lonMax)
+ .replace("{latMin}", latMin)
+ .replace("{lonMin}", lonMin)
+ .replace("{timeStart}", "2015-01-28T00:00:00Z")
+ .replace("{timeEnd}", "2016-12-24T23:59:59Z"),
+ );
+ return (
+ -
+ {this.makePlumeChart()}
+
+ Welcome to Methane Source Finder!
++ To get started, choose which area you would like to use as your Home. You + can change this later using the Settings icon in the upper right. +
+
+ {LOCATION_OPTIONS.map((locationOption) => (
+
+
+
+ {locationOption.label}
+
+
+ ))}
+ Your choice will be saved as a browser-cookie.
+
+
+
+
@@ -93,7 +89,7 @@ export class LandingPage extends Component {
![]()
Methane Source Finder is an interactive map that helps you explore
- methane data and related infrastructure in the state of California. + multi-scale methane data in selected regions.
- methane data and related infrastructure in the state of California. + multi-scale methane data in selected regions.
@@ -121,10 +117,12 @@ export class LandingPage extends Component {
ABOUT
Methane Source Finder helps you explore, analyze, and download
- methane data across a range of scales in California derived from
- airborne remote-sensing, surface monitoring networks and
- satellites on an interactive map alongside infrastructure
- information.
+ methane data across a range of scales derived from airborne
+ remote-sensing, surface monitoring networks and satellites on an
+ interactive map alongside infrastructure information, where
+ available. This prototype is currently limited to California and
+ the Permian basin. Stay tuned for future expansion to other
+ regions!
- Site Contact:{" "}
- Steve Zelinka
+ Site Contact: Riley Duren
- Release number: URS280411-CARB + Release numbers: URS280411, URS298327
- Release number: URS280411-CARB + Release numbers: URS280411, URS298327