Merge branch '221-all-maps-with-same-config' into 'master'

All maps with same config

Closes #221

See merge request genesys-pgr/genesys-ui!231

src/accessions/ui/DisplayPage.tsx

@@ -16,6 +16,7 @@ import { ROLE_USER } from 'constants/userRoles';
 import AccessionDetails from 'model/accession/AccessionDetails';
 import RepositoryFile from 'model/repository/RepositoryFile';
 import AccessionAuditLog from 'model/accession/AccessionAuditLog';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 // UI
 import PrettyDate from 'ui/common/time/PrettyDate';
@@ -71,6 +72,7 @@ interface IBrowsePageProps {
   removeAccessionFromMyList: any;
   applyFilters: any;
   navigateTo: (location: string) => void;
+  mapLayers: MapLayer[];
 }
 
 class BrowsePage extends React.Component<IBrowsePageProps, any> {
@@ -135,7 +137,7 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
   }
 
   public render() {
-    const { t, error, uuid, doi, accessions, auditLog, classes } = this.props;
+    const { t, error, uuid, doi, accessions, auditLog, classes, mapLayers } = this.props;
 
     const { auditAccession, auditAccessionId, auditAccessionCollect, auditAccessionGeo } = auditLog || { auditAccession: {}, auditAccessionId: {}, auditAccessionCollect: {}, auditAccessionGeo: {} };
 
@@ -375,7 +377,10 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
                     </Properties>
 
                     { hasLatLon &&
-                      <LocationMap locations={ [{ id: accession.geo.id, lat: accession.geo.latitude, lng: accession.geo.longitude }] } />
+                      <LocationMap
+                        locations={ [{ id: accession.geo.id, lat: accession.geo.latitude, lng: accession.geo.longitude }] }
+                        mapLayers={ mapLayers }
+                      />
                     }
                   </PageSection>
                 }
@@ -458,6 +463,7 @@ const mapStateToProps = (state, ownProps) => ({
   uuid: ownProps.match.params.uuid,
   doi: ownProps.match.params.doi,
   accessions: state.list.public.myList.accessions,
+  mapLayers: state.accessions.public.mapLayers,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({

src/datasets/ui/DisplayPage.tsx

@@ -9,6 +9,7 @@ import {loadMoreAccessions, loadDataset} from 'datasets/actions/public';
 import Dataset from 'model/catalog/Dataset';
 import { AccessionRef } from 'model/accession/AccessionRef';
 import Page from 'model/Page';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 import PageLayout from 'ui/layout/PageLayout';
 import BackButton from 'ui/common/buttons/BackButton';
@@ -31,6 +32,7 @@ interface IDatasetDetailProps extends React.ClassAttributes<any> {
   approveDataset: (dataset: Dataset) => void;
   rejectDataset: (dataset: Dataset, needToRedirect?: boolean) => void;
   loadMoreAccessions: (uuid: string, page?: Page<AccessionRef>) => any;
+  mapLayers: MapLayer[];
 }
 
 const styles = (theme) => ({
@@ -62,7 +64,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
   }
 
   public render() {
-    const { t, classes, uuid, dataset, publishDataset, rejectDataset, approveDataset, deleteDataset } = this.props;
+    const { t, classes, uuid, dataset, publishDataset, rejectDataset, approveDataset, deleteDataset, mapLayers } = this.props;
 
     const stillLoading: boolean = (!dataset || (uuid && dataset && dataset.uuid !== uuid));
 
@@ -85,6 +87,7 @@ class DatasetDetail extends React.Component<IDatasetDetailProps, any> {
                 deleteDataset={ deleteDataset }
                 loadAccessions={ this.loadMoreAccessions }
                 accessionRefs={ this.props.accessionRefs }
+                mapLayers={ mapLayers }
               />
             </Grid>
           }
@@ -104,6 +107,7 @@ const mapStateToProps = (state, ownProps) => ({
   dataset: state.datasets.public.dataset,
   accessionRefs: state.datasets.public.accessionRefs,
   uuid: ownProps.match.params.uuid,
+  mapLayers: state.accessions.public.mapLayers,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({

src/datasets/ui/c/DatasetDisplay.tsx

@@ -13,6 +13,7 @@ import { AVAILABLE_LICENSES } from 'model/License';
 import { PublishState } from 'model/common.model';
 import Page from 'model/Page';
 import { AccessionRef } from 'model/accession/AccessionRef';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 import confirm from 'utilities/confirmAlert';
 import Authorize from 'ui/common/authorized/Authorize';
@@ -140,6 +141,7 @@ interface IDetailInfoProps extends React.ClassAttributes<any> {
   deleteDataset?: (dataset: Dataset) => any;
   loadAccessions: (page: Page<AccessionRef>) => any;
   accessionRefs: Page<AccessionRef>;
+  mapLayers: MapLayer[];
 }
 
 class DetailInfo extends React.Component<IDetailInfoProps, any> {
@@ -230,7 +232,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
   }
 
   public render() {
-    const { classes, dataset, publishDataset, deleteDataset, t, accessionRefs } = this.props;
+    const { classes, dataset, publishDataset, deleteDataset, t, accessionRefs, mapLayers } = this.props;
 
     if (!dataset) {
       log('Waiting for dataset.');
@@ -461,7 +463,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
             <Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10" id="dataset-locations">
               <Section title={ t('datasets.public.c.datasetDisplay.locations') }>
                 <div className="p-20">
-                  <LocationMap locations={ dataset.locations } classes={ {} }/>
+                  <LocationMap locations={ dataset.locations } mapLayers={ mapLayers } classes={ {} } />
                 </div>
               </Section>
             </Grid>

src/datasets/ui/c/LocationMap.tsx

@@ -6,6 +6,7 @@ import { translate } from 'react-i18next';
 import { isNumeric } from 'utilities';
 import { IGeoPoint } from 'model/common.model';
 import DatasetLocation from 'model/catalog/DatasetLocation';
+import MapLayer from 'model/genesys/MapTileLayer';
 import { Properties, PropertiesItem } from 'ui/common/Properties';
 import McpdDate from 'ui/common/time/McpdDate';
 import Markdown from 'ui/common/markdown';
@@ -18,6 +19,7 @@ interface ILocationMapProps {
   classes?: any;
   t?: any;
   locations: DatasetLocation[];
+  mapLayers: MapLayer[];
 }
 
 const styles = (theme) => ({
@@ -56,7 +58,7 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
   }
 
   public render() {
-    const { classes, locations, t } = this.props;
+    const { classes, locations, mapLayers, t } = this.props;
 
     if (!(locations && locations.length)) {
       return null;
@@ -107,6 +109,13 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
                 attribution={ `&copy; ${ t('datasets.public.c.locationMap.link', { aOpen: '<a href="http://www.openstreetmap.org/copyright">', aClose: '</a>' }) }` }
                 url={ 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' }
               />
+              { mapLayers &&
+                mapLayers
+                  .filter((layer) => layer.enabled)
+                  .map((layer, index) => {
+                    return <TileLayer zIndex={ index + 1 } key={ layer.name } { ...layer }/>;
+                  })
+              }
               { positions && positions.map((position, i) => (
                   <Marker key={ i } position={ position }/>
                 ),

src/datasets/ui/dashboard/dataset-stepper/steps/location/FormMap.tsx

@@ -4,6 +4,7 @@ import { translate } from 'react-i18next';
 
 import { error } from 'utilities/debug';
 import { isNumeric } from 'utilities';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 let Map;
 let Marker;
@@ -22,6 +23,7 @@ interface IFormMapProps extends React.ClassAttributes<any> {
     countryCode: any,
   }];
   onMouseOut: () => any;
+  mapLayers: MapLayer[];
   checkGeonames: (lat, lng) => Promise<{ countryCode: string, userCountry: string, stateProvince: string, verbatimLocality?: string }>;
 }
 
@@ -98,7 +100,7 @@ class FormMap extends React.Component<IFormMapProps, any> {
       return null;
     }
 
-    const { classes, t } = this.props;
+    const { classes, mapLayers, t } = this.props;
 
     const { decimalLatitude, decimalLongitude } = this.getCurrentLocation();
 
@@ -122,6 +124,13 @@ class FormMap extends React.Component<IFormMapProps, any> {
             attribution={ `&copy; ${ t('datasets.dashboard.p.stepper.location.copyright', { openingTag: '<a href="http://www.openstreetmap.org/copyright">', closingTag: '</a>' }) }` }
             url={ 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' }
           />
+          { mapLayers &&
+            mapLayers
+              .filter((layer) => layer.enabled)
+              .map((layer, index) => {
+                return <TileLayer zIndex={ index + 1 } key={ layer.name } { ...layer }/>;
+              })
+          }
           { position && <Marker onContextmenu={ this.onMarkerRightClick } position={ position }/> }
         </Map>
       </div>

src/datasets/ui/dashboard/dataset-stepper/steps/location/LocationForm.tsx

@@ -11,6 +11,7 @@ import MarkdownField from 'ui/common/markdown/MarkdownField';
 import countries from 'data/countries';
 import FormMap from './FormMap';
 import Dataset from 'model/catalog/Dataset';
+import MapLayer from 'model/genesys/MapTileLayer';
 import DatasetLocation from 'model/catalog/DatasetLocation';
 import { error, log } from 'utilities/debug';
 import { isNumeric } from 'utilities';
@@ -31,6 +32,7 @@ interface ILocationFormProps extends React.ClassAttributes<any> {
   createLocation: () => Promise<DatasetLocation>;
   deleteLocation: (location: Location) => Promise<DatasetLocation>;
   changeFieldValue: (field: string, value: any) => void;
+  mapLayers: MapLayer[];
   t: any;
 }
 
@@ -98,8 +100,7 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
   }
 
   protected renderLocations = ({ fields, meta: { touched, error, submitFailed } }) => {
-    const { t } = this.props;
-
+    const { t, mapLayers } = this.props;
     return (
       <div>
         { fields.map((location, index) => (
@@ -125,6 +126,7 @@ class LocationForm extends React.Component<ILocationFormProps, any> {
               ] }
               checkGeonames={ this.checkGeonames }
               component={ FormMap }
+              mapLayers={ mapLayers }
             />
             <Field
               name={ `${location}.countryCode` }

src/datasets/ui/dashboard/dataset-stepper/steps/location/index.tsx

@@ -13,6 +13,7 @@ import { getFormValues, change } from 'redux-form';
 import { LOCATION_FORM } from 'datasets/constants';
 import * as _ from 'lodash';
 import StepperTemplate from 'ui/common/stepper/StepperTemplate';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 interface ILocationStepProps extends React.ClassAttributes<any> {
   createLocationRequest: () => Promise<DatasetLocation>;
@@ -20,6 +21,7 @@ interface ILocationStepProps extends React.ClassAttributes<any> {
   deleteLocationRequest: (location: Location) => Promise<DatasetLocation>;
   formValues: any;
   change: any;
+  mapLayers: MapLayer[];
 }
 
 class LocationStep extends StepperTemplate<ILocationStepProps> {
@@ -45,6 +47,7 @@ class LocationStep extends StepperTemplate<ILocationStepProps> {
       createLocation={ this.createLocation }
       deleteLocation={ this.props.deleteLocationRequest }
       changeFieldValue={ this.changeFieldValue }
+      mapLayers={ this.props.mapLayers }
     />
   )
 
@@ -63,6 +66,7 @@ class LocationStep extends StepperTemplate<ILocationStepProps> {
 
 const mapStateToProps = (state, ownProps) => ({
   formValues: getFormValues(LOCATION_FORM)(state),
+  mapLayers: state.accessions.public.mapLayers,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({

src/geo/ui/CountryDisplayPage.tsx

@@ -10,6 +10,7 @@ import { applyFilters } from 'accessions/actions/public';
 // Model
 import CountryDetails from 'model/geo/CountryDetails';
 import FaoInstitute from 'model/genesys/FaoInstitute';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 // UI
 import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
@@ -28,6 +29,7 @@ interface ICountryDisplayPageProps extends React.ClassAttributes<any> {
   t: any;
   loadCountryDetails: (isoCode: string) => void;
   applyFilters: any;
+  mapLayers: MapLayer[];
 }
 
 class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
@@ -74,7 +76,7 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
   }
 
   public render() {
-    const {details, isoCode, t} = this.props;
+    const {details, isoCode, mapLayers, t} = this.props;
     const stillLoading: boolean = (! details || details.code3 !== isoCode);
 
     return (
@@ -100,7 +102,10 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
 
               { details.genesysInstitutes && details.genesysInstitutes.length > 0 &&
                 <PageSection title={ t('geo.public.p.countryList.instituteLocations') }>
-                  <LocationMap locations={ this.getLocations(details.genesysInstitutes) } />
+                  <LocationMap
+                    locations={ this.getLocations(details.genesysInstitutes) }
+                    mapLayers={ mapLayers }
+                  />
                 </PageSection>
               }
 
@@ -151,6 +156,7 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
 const mapStateToProps = (state, ownProps) => ({
   details: state.geo.public.countryDetails || undefined,
   isoCode: ownProps.match.params.isoCode,
+  mapLayers: state.accessions.public.mapLayers,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({

src/institutes/ui/DisplayPage.tsx

@@ -10,6 +10,7 @@ import { applyFilters, applyOverviewFilters } from 'accessions/actions/public';
 
 // Models
 import FaoInstituteDetails from 'model/genesys/InstituteDetails';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 // UI
 import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
@@ -46,6 +47,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
   applyFilters: any;
   applyOverviewFilters: any;
   userRoles: string[];
+  mapLayers: MapLayer[];
 }
 const mobile = ['sm', 'xs'] as Breakpoint[];
 
@@ -105,7 +107,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
   }
 
   public render() {
-    const { error, institute, code, width, t } = this.props;
+    const { error, institute, code, width, mapLayers, t } = this.props;
     const slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';
     const stillLoading: boolean = ! error && (! institute || (code && institute && institute.details.code !== code));
     const isMobile = mobile.indexOf(width) !== -1;
@@ -190,6 +192,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                   <PageSection title={ t('geo.common.location') }>
                     <LocationMap
                       locations={ [{ id: institute.details.id, lat: institute.details.latitude, lng: institute.details.longitude }] }
+                      mapLayers={ mapLayers }
                     />
                     <Properties>
                       <PropertiesItem title={ t('geo.common.latitude') }>{ institute.details.latitude }</PropertiesItem>
@@ -300,6 +303,7 @@ const mapStateToProps = (state, ownProps) => ({
   error: state.institutes.public.instituteError,
   code: ownProps.match.params.wiewsCode,
   userRoles: state.login.authorities,
+  mapLayers: state.accessions.public.mapLayers,
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({

src/ui/common/LocationMap.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {withStyles} from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import { IGeoPoint } from 'model/common.model';
+import MapLayer from 'model/genesys/MapTileLayer';
 
 let Map;
 let Marker;
@@ -10,6 +11,7 @@ let TileLayer;
 interface ILocationMapProps extends React.ClassAttributes<any> {
     classes?: any;
     locations: IGeoPoint[];
+    mapLayers: MapLayer[];
 }
 
 const styles = (theme) => ({
@@ -47,7 +49,7 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
     }
 
     public render() {
-        const {classes, locations } = this.props;
+        const { classes, locations, mapLayers } = this.props;
 
         if (!locations) {
             return null;
@@ -69,6 +71,13 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
                                     attribution={ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
                                     url={ 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' }
                                 />
+                                { mapLayers &&
+                                    mapLayers
+                                        .filter((layer) => layer.enabled)
+                                        .map((layer, index) => {
+                                            return <TileLayer zIndex={ index + 1 } key={ layer.name } { ...layer }/>;
+                                        })
+                                }
                                 { locations.map((location) => <Marker key={ location.id } position={ location } />) }
                             </Map>
                         </div>