Commit dc8124fb authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

Multiple instances of LocationMap

renamed position to location
parent dc92f673
import * as React from 'react';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import AccessionGeo from 'model/AccessionGeo';
let Map;
let Marker;
......@@ -9,7 +8,7 @@ let TileLayer;
interface ILocationMapProps extends React.ClassAttributes<any> {
classes: any;
accessionGeo: AccessionGeo;
location: {id: number, lat: number, lng: number};
}
const styles = (theme) => ({
......@@ -47,25 +46,19 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
}
public render() {
const {classes, accessionGeo} = this.props;
const {classes, location} = this.props;
if (!accessionGeo) {
if (!location) {
return null;
}
const position = {
id: accessionGeo.id,
lat: accessionGeo.latitude,
lng: accessionGeo.longitude,
};
return (
<Grid item xs={ 12 }>
{ typeof window !== 'undefined' && position && (
{ typeof window !== 'undefined' && location && (
<div className={ classes.leafletContainer }>
<Map
center={ position }
bounds={ [position, position] }
center={ location }
bounds={ [location, location] }
maxZoom={ 7 }
zoomControl={ false }
dragging={ false }
......@@ -76,7 +69,7 @@ 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' }
/>
<Marker key={ position.id } position={ position }/>
<Marker key={ location.id } position={ location }/>
</Map>
</div>
)
......
......@@ -23,7 +23,7 @@ import SciName from 'ui/genesys/SciName';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import ReduxCheckbox from 'ui/common/checkbox';
import CropChips from 'ui/genesys/crop/CropChips';
import LocationMap from './c/LocationMap';
import LocationMap from 'ui/common/LocationMap';
interface IBrowsePageProps extends React.ClassAttributes<any> {
......@@ -183,7 +183,18 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
))
}
</Properties>
{ hasLatLon && <LocationMap accessionGeo={ accession.geo } classes={ {} } /> }
{ hasLatLon &&
<LocationMap
location={
{
id: accession.geo.id,
lat: accession.geo.latitude,
lng: accession.geo.longitude,
}
}
/>
}
</PageSection>
{ accession.remarks && accession.remarks.length > 0 && <PageSection title="Remarks">
......
......@@ -14,10 +14,10 @@ import PageLayout, {MainSection, PageContents, PageSection} from 'ui/layout/Page
import GridLayout from 'ui/layout/GridLayout';
import PropertiesCard from 'ui/common/PropertiesCard.tsx';
import ContentHeader from 'ui/common/heading/ContentHeader';
import LocationMap from 'ui/common/LocationMap';
import Loading from 'ui/common/Loading';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import LocationMap from './с/LocationMap';
import PieChart from 'ui/common/pie-chart';
import PrettyDate from 'ui/common/time/PrettyDate';
import withWidth from '@material-ui/core/withWidth';
......@@ -97,9 +97,15 @@ class BrowsePage extends React.Component<IBrowsePageProps, any> {
<PropertiesItem title="latitude">{ institute.details.latitude }</PropertiesItem>
<PropertiesItem title="longitude">{ institute.details.longitude }</PropertiesItem>
</Properties>
<div className="p-20">
<LocationMap institute={ institute.details } classes={ {} }/>
</div>
<LocationMap
location={
{
id: institute.details.id,
lat: institute.details.latitude,
lng: institute.details.longitude,
}
}
/>
</PageSection>
}
......
import * as React from 'react';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import FaoInstitute from 'model/FaoInstitute';
let Map;
let Marker;
let TileLayer;
interface ILocationMapProps extends React.ClassAttributes<any> {
classes: any;
institute: FaoInstitute;
}
const styles = (theme) => ({
leafletContainer: {
width: '100%',
height: '300px',
},
locationIcon: {
marginLeft: '20px',
marginRight: '4px',
width: '20px',
height: '20px',
position: 'relative' as 'relative',
top: '4px',
[theme.breakpoints.down('sm')]: {
marginLeft: '0',
},
},
locationIconWrap: {
[theme.breakpoints.down('sm')]: {
display: 'block',
},
},
});
class LocationMap extends React.Component<ILocationMapProps, any> {
constructor(props, context) {
super(props, context);
if (typeof window !== 'undefined') {
Map = require('react-leaflet').Map;
Marker = require('react-leaflet').Marker;
TileLayer = require('react-leaflet').TileLayer;
}
}
public render() {
const {classes, institute} = this.props;
if (!institute) {
return null;
}
const position = {
id: institute.code,
lat: institute.latitude,
lng: institute.longitude,
};
return (
<Grid item xs={ 12 }>
{ typeof window !== 'undefined' && position && (
<div className={ classes.leafletContainer }>
<Map
center={ position }
bounds={ [position, position] }
maxZoom={ 5 }
zoomControl={ false }
dragging={ false }
scrollWheelZoom={ false }
doubleClickZoom={ false }
>
<TileLayer
attribution={ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
url={ 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' }
/>
<Marker key={ position.id } position={ position }/>
</Map>
</div>
)
}
</Grid>
);
}
}
export default withStyles(styles)(LocationMap);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment