diff --git a/web/components/Main.js b/web/components/Main.js
index 7551d16..ecf73f5 100644
--- a/web/components/Main.js
+++ b/web/components/Main.js
@@ -21,7 +21,6 @@ class Main extends React.Component {
}
dispatch ({type, action = {}}) {
- console.log('DISPATCH', this);
handleMessage({type, action}, this);
}
@@ -33,10 +32,11 @@ class Main extends React.Component {
streetViewControl: false,
mapTypeControl: false
});
- const marker = new google.maps.Marker({
- position: uluru,
- map: map
- });
+
+ //const marker = new google.maps.Marker({
+ //position: uluru,
+ //map: map
+ //});
var control = document.createElement('div');
control.classList.add('filters-btn-toggle');
@@ -81,11 +81,25 @@ class Main extends React.Component {
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
this.map = map;
+ map.addListener('zoom_changed', () => {
+ console.log('zoom_changed');
+ this.removeAllMarkers();
+ this.markers = [];
+ });
+
map.addListener('idle', () => {
+ console.log('idle');
this.refreshListings();
});
}
+ removeAllMarkers () {
+ if (this.markers) {
+ console.log('removeAllMarkers');
+ this.markers.forEach((m) => m.marker.setMap(null));
+ }
+ }
+
onCloseClick(e) {
if (this.state.mapClicked) {
setTimeout(() => {
@@ -98,7 +112,11 @@ class Main extends React.Component {
});
}
+ /*
+ * Refreshes search
+ */
refreshListings() {
+ console.log('refreshListings');
const map = this.map;
const {
rooms,
@@ -109,8 +127,9 @@ class Main extends React.Component {
category
} = this.state.filters;
+ const bounds = map.getBounds();
const properties = loadProperties({
- bounds: map.getBounds().toUrlValue(),
+ bounds: bounds.toUrlValue(),
rooms,
minSize,
maxSize,
@@ -119,30 +138,62 @@ class Main extends React.Component {
category
});
- properties.then(p=> p.text()).then(p => {
+ const markerExists = (id) => {
+ return (this.markers || []).findIndex(m => m.id === id) !== -1;
+ }
+
+ properties.then(p => p.text()).then(p => {
+
const data = JSON.parse(p);
- console.log('props', data)
+ console.log('results_received');
+
+ const listingExists = (id) => {
+ return data.findIndex(l => l._id === id) !== -1
+ };
+
+
+ const newMarkers = [];
+
+ if (this.markers) {
+ this.markers.forEach((m) => {
+ if (!listingExists(m.id)) {
+ m.marker.setMap(null);
+ } else {
+ newMarkers.push(m);
+ }
+ });
+ console.log('markers_removed');
+ }
+
for(const [index, prop] of data.entries()) {
const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
- const marker = new google.maps.Marker({
- position: myLatLng,
- map: map,
- title: prop.title
- });
+ if (!markerExists(p._id)) {
+ const marker = new google.maps.Marker({
+ position: myLatLng,
+ map: map,
+ title: prop.title
+ });
- marker.addListener('click', () => {
- console.log('clicking...')
- this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
- id: prop.url
- }})
- });
+ marker.addListener('click', () => {
+ console.log('clicking...')
+ this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
+ id: prop.url
+ }})
+ });
+
+ newMarkers.push({
+ marker,
+ id: prop._id
+ });
+ }
}
this.dispatch({
type: 'LISTINGS_LOADED',
action: {
- listings: data
+ listings: data,
+ newMarkers
}
});
})
diff --git a/web/lib/handlers.js b/web/lib/handlers.js
index de3b25a..db6ce87 100644
--- a/web/lib/handlers.js
+++ b/web/lib/handlers.js
@@ -52,7 +52,7 @@ const viewListingDetails = ({ type, action }, component) => {
};
const listingsLoaded = ({ type, action }, component) => {
- const currentListings = new Map(); //component.state.listings;
+ const currentListings = new Map();
for (const listing of action.listings) {
currentListings.set(listing.url, listing);
@@ -60,6 +60,8 @@ const listingsLoaded = ({ type, action }, component) => {
component.setState({
listings: currentListings
+ }, () => {
+ component.markers = action.newMarkers;
});
};