Commit 3eb4c959 authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

Map click accessions list

- Using rectangles
parent 2b6f671a
......@@ -21,7 +21,7 @@ import AccessionService from 'service/genesys/AccessionService';
let Map;
let TileLayer;
let Popup;
let Marker;
let Rectangle;
const popupContentLimit = 11;
......@@ -56,7 +56,8 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
];
public state = {
popupPosition: [],
clickLocation: [],
searchBox: null,
geoData: [],
otherCount: 0,
};
......@@ -66,8 +67,8 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
if (typeof window !== 'undefined') {
Map = require('react-leaflet').Map;
TileLayer = require('react-leaflet').TileLayer;
Marker = require('react-leaflet').Marker;
Popup = require('react-leaflet').Popup;
Rectangle = require('react-leaflet').Rectangle;
}
}
......@@ -105,21 +106,27 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
console.log(e);
const width = Math.pow(2, currentZoom - 2);
console.log(`zoom=${currentZoom} width=${width} diff=${ 3 / width}`);
const searchBounds: number[][] = [
[ e.latlng.lat - (3 / width), correctLng - (3 / width) ],
[ e.latlng.lat + (3 / width), correctLng + (3 / width) ],
];
const filterWithGeo = {
...filter,
geo: {
longitude: {
ge: correctLng - (3 / currentZoom),
le: correctLng + (3 / currentZoom),
ge: searchBounds[0][1],
le: searchBounds[1][1],
},
latitude: {
ge: e.latlng.lat - (3 / currentZoom),
le: e.latlng.lat + (3 / currentZoom),
ge: searchBounds[0][0],
le: searchBounds[1][0],
},
},
};
AccessionService.geoJson(filterWithGeo, popupContentLimit)
.then((res) => this.setState({popupPosition: [ e.latlng.lat, e.latlng.lng], geoData: res.geoJson, otherCount: res.otherCount}));
.then((res) => this.setState({clickLocation: [ e.latlng.lat, e.latlng.lng], searchBox: searchBounds, geoData: res.geoJson, otherCount: res.otherCount}));
}, 200);
}
......@@ -131,7 +138,7 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
}
public render() {
const {popupPosition, geoData, otherCount} = this.state;
const { searchBox, geoData, otherCount } = this.state;
const position = [30, 0];
const { mapInfo, mapLayers, currentTab, classes, filterCode, t } = this.props;
......@@ -188,7 +195,6 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
{ mapLayers && mapLayers.filter((layer) => layer.enabled).map((layer, index) => <TileLayer zIndex={ index + 1 } key={ layer.name } { ...layer }/>) }
<TileLayer
zIndex={ mapLayers.length + 1 }
updateInterval={ 1000 }
updateWhenZooming={ false }
......@@ -197,14 +203,17 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
subdomains={ mapInfo.tileServers }
/>
{ geoData && geoData.length > 0 &&
<Marker position={ popupPosition } ref={ (marker) => marker && marker.leafletElement.openPopup() } >
<Rectangle
bounds={ searchBox }
ref={ (marker) => marker && marker.leafletElement.openPopup() }
>
<Popup open>
<div>
{ geoData.map((feature) => (<div><Link to={ `/a/${feature.properties.uuid}` }>{ `${feature.properties.accessionNumber} ${feature.properties.instCode}` }</Link></div>)) }
{ otherCount > 0 && <div>{ t('accessions.public.p.map.andMore', {otherMore: otherCount}) }</div> }
</div>
</Popup>
</Marker>
</Rectangle>
}
</Map>
}
......
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