Add marker clusterer and update icons

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .meteor
 settings.json
+dump/

client/main.css

@@ -139,9 +139,9 @@ header {
 }
 
 .infowindow-title, .infowindow-subtitle {
-    text-decoration: underline;
+    /*text-decoration: underline;*/
     font-family: 'Rubik Mono One';
-    text-align: center;
+    /*text-align: center;*/
     text-transform:  uppercase;
     font-weight: 900;
 }

imports/ui/MusicMap/Markers.js

@@ -0,0 +1,35 @@
+import {
+  default as React,
+  Component,
+} from "react";
+import MarkerClusterer from "react-google-maps/lib/addons/MarkerClusterer";
+import PlaceMarker from '../components/common/PlaceMarker';
+
+export const Markers = (props) =>
+  <div>
+    <MarkerClusterer
+      averageCenter
+      enableRetinaIcons
+      gridSize={10}
+      zoomOnClick={false}
+      imagePath="img/resize/cluster"
+      styles={[{
+        textColor: '#313131',
+        url: 'img/resize/cluster1.png',
+        height: 50,
+        width: 50
+      }]}
+      onClick={()=>{console.log("_______ 123123123", 123123123);}}
+    >
+    {props.markers ? props.markers.map((marker, index) => {
+      return <PlaceMarker key={index}
+                          marker={marker}
+                          onMarkerClick={() => props.onMarkerClick(marker)}
+                          onCloseClick={() => props.onCloseClick(marker)}
+                          mediaAtPlace={ props.media ? props.media.filter((e)=>{return e.placeId == marker._id}) : [] }
+                          eventsAtPlace={ props.events ? props.events.filter((e)=>{return e.placeId == marker._id}) : [] }
+      />
+    })
+      : null}
+    </MarkerClusterer>
+  </div>

imports/ui/MusicMap.js → imports/ui/MusicMap/index.js

@@ -4,11 +4,11 @@ import {
   Component,
 } from "react";
 import {withGoogleMap, GoogleMap} from "react-google-maps";
-import mapStylesMagenta from "../../client/map/mapStyles-magenta.json"
+import mapStylesMagenta from "../../../client/map/mapStyles-magenta.json"
 import SearchBox from "react-google-maps/lib/places/SearchBox"; //TODO needed?
-import {Events} from '../api/events.js';
 import RaisedButton from 'material-ui/RaisedButton';
-import PlaceMarker from './components/common/PlaceMarker';
+import { Markers } from './Markers'
+import { MarkerList } from './MarkerList'
 
 const INPUT_STYLE = {
   boxSizing: `border-box`,
@@ -64,17 +64,11 @@ const MusicMapGoogleMap = withGoogleMap(props => {
                    inputStyle={INPUT_STYLE}
                    inputClassName={'searchBox'}
         />
-
-        {props.markers ? props.markers.map((marker, index) => {
-          return <PlaceMarker key={index}
-                              marker={marker}
-                              onMarkerClick={() => props.onMarkerClick(marker)}
-                              onCloseClick={() => props.onCloseClick(marker)}
-                              mediaAtPlace={ props.media ? props.media.filter((e)=>{return e.placeId == marker._id}) : [] }
-                              eventsAtPlace={ props.events ? props.events.filter((e)=>{return e.placeId == marker._id}) : [] }
-          />
-        })
-          : null}
+        <Markers markers={props.markers}
+                 onCloseClick={props.onCloseClick}
+                 onMarkerClick={props.onMarkerClick}
+        />
+        <MarkerList {...props}/>
       </GoogleMap>
     )
   }
@@ -127,7 +121,7 @@ export default class MusicMap extends Component {
 
   handleMarkerClick(targetMarker) {
     this.setState({
-      center: targetMarker.position,
+      center: this.getNewCenter(targetMarker.position),
       markers: this.state.markers.map(marker => {
         return {
           ...marker,
@@ -136,6 +130,13 @@ export default class MusicMap extends Component {
       }),
     });
   }
+
+  getNewCenter(position) {
+    return {
+      lat: position.lat - 0.9,
+      lng: position.lng
+    };
+  }
 
   handleCloseClick(targetMarker) {
     this.setState({

imports/ui/components/common/PlaceInfoWindow.js

@@ -14,8 +14,8 @@ export default class PlaceMarker extends Component {
     })
     return iconsToDisplay.map((icon, index)=>{
       return(
-        <a href={this.props.marker[icon]} target='_blank'>
-          <img key={index} src={`/img/resize/${icon}.png`} />
+        <a href={this.props.marker[icon]} target='_blank' style={{marginLeft: 10}}>
+          <img key={index} src={`/img/resize/${icon}.png`} width="32px" height="32px"/>
         </a>
       )
     })
@@ -32,7 +32,7 @@ export default class PlaceMarker extends Component {
         <div style={{maxWidth: '450px', maxHeight: '550px', marginLeft: '10px'}}>
           <h4 className="infowindow-title">{marker.name}</h4>
           <img src={marker.photo} style={{maxHeight: '300px', maxWidth: '500px', margin: '20px auto', display: 'block'}}/>
-          <div style={{width: '100%', textAlign: 'center'}}>
+          <div style={{width: '100%', textAlign: 'right'}}>
             {this.socialIcons()}
           </div>
           <p>{marker.description}</p>

imports/ui/components/common/PlaceMarker.js

@@ -7,10 +7,16 @@ import PlaceInfoWindow from '../common/PlaceInfoWindow';
 
 export default class PlaceMarker extends Component {
   getIcon(marker) {
+    let url;
     if (marker.mediaType) {
-      return this.getIconForMedia(marker)
+      url = this.getIconForMedia(marker)
+    } else {
+      url = this.getIconForPlace(marker)
+    }
+    return {
+      url,
+      scaledSize: new google.maps.Size(32, 32)
     }
-    return this.getIconForPlace(marker)
   }
 
   getIconForMedia(record){
@@ -43,7 +49,7 @@ export default class PlaceMarker extends Component {
     return (
       <Marker
         position={{ lat: marker.position.lat, lng: marker.position.lng }}
-        key={index}
+        key={marker.name}
         icon = {this.getIcon(marker)}
         title={marker.name}
         onClick={onClick}