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