Merge branch 'development' of github.com:motosharpley/googleMaps-offl…

…ine-navigator into preact-skeleton

README.md

@@ -19,7 +19,7 @@ While the first creates a remote that uses `ssh` authentication, the latter uses
 
 # Get Google Maps API key
 
-- In the config subdirectory you will find secrets-*example.json*. Rename this to *secrets.json*. 
+- In the config subdirectory you will find secrets-*example.json. *Copy it's contents to a new file called secrets.json in the same directory*.
 
 - Next get a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key)
 

client/package.json

@@ -49,6 +49,8 @@
     },
     "dependencies": {
         "google-maps-react": "^1.1.2",
+        "leaflet": "^1.3.1",
+        "pouchdb-browser": "^6.4.3",
         "preact": "^8.2.6",
         "preact-compat": "^3.17.0",
         "preact-render-to-string": "^3.7.0",

client/src/components/LeafletOsmMap/index.js

@@ -0,0 +1,76 @@
+import { h, Component } from 'preact';
+import leafletStyle from '../../../node_modules/leaflet/dist/leaflet.css';
+import L from '../../js/leaflet-tileLayer-pouchdb-cached';
+
+// // TODO - remove this module from dependencies
+// import Map, { GoogleApiWrapper, Marker, InfoWindow } from 'google-maps-react';
+
+/**
+ * TIle layer configuration and attribution constants
+ */
+const OSM_URL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+const OSM_ATTRIB = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
+const TILE_LAYER = new L.TileLayer(OSM_URL, {
+    attribution: OSM_ATTRIB,
+    useCache: true,
+    crossOrigin: true,
+});
+
+// redirect marker icon path to assets directory
+L.Icon.Default.imagePath = '../../assets/icons/leaflet/';
+
+export default class MapContainer extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            map: null,
+            lat: null,
+            lng: null,
+            watchID: null,
+        }
+        this.initMap = this.initMap.bind(this);
+      }
+
+      componentDidMount() {
+        // continuously track users position
+        const watchID = navigator.geolocation.watchPosition(this.initMap);
+        this.setState({
+            watchID: watchID,
+        });
+      }
+
+      initMap(position) {
+        const map = new L.Map('map');
+
+        this.setState({
+            map: map,
+            lat: position.coords.latitude || 51.3,
+            lng: position.coords.longitude || 0.7,
+        });
+
+        map.setView(L.latLng(this.state.lat, this.state.lng), 15);
+        map.addLayer(TILE_LAYER);
+
+        L.marker([this.state.lat, this.state.lng])
+          .addTo(map).bindPopup('Current Location').openPopup();
+      }
+
+    render() {
+        const styles = {
+            leaflet: leafletStyle,
+            height: 500,  // HAVE TO SET HEIGHT TO RENDER MAP
+        }
+        return (
+            <div id="map" style={styles}/>
+        )
+    };
+
+    componentWillUnmount() {
+        console.log('begin - componentWillUnmount() ', this.state.map);
+        // stop watching user position when map is unmounted
+        navigator.geolocation.clearWatch(this.state.watchID);
+        this.state.map.remove();
+        console.log('begin - componentWillUnmount() ', this.state.map);
+    }
+}
+

client/src/components/LeafletOsmMap/style.css

@@ -0,0 +1,9 @@
+#map {
+    height: 100%;
+}
+/* Optional: Makes the sample page fill the window. */
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}

client/src/components/Nav/index.js

@@ -27,6 +27,7 @@ export default class Nav extends Component {
 						<a href="/"><Menu.Item>Home</Menu.Item></a>
 						<a href="/profile"><Menu.Item>Profile</Menu.Item></a>
 						<a href="/directions"><Menu.Item>Directions</Menu.Item></a>
+						<a href="/places"><Menu.Item>Places</Menu.Item></a>						
 						<a href="/pins"><Menu.Item>Pins</Menu.Item></a>
 						<a href="/maps"><Menu.Item>Maps</Menu.Item></a>
 						<a href="/signin"><Menu.Item>Sign in</Menu.Item></a>

client/src/components/PlacesMap/index.js

@@ -0,0 +1,116 @@
+import { h, Component } from 'preact';
+import style from './style';
+
+import Map, { GoogleApiWrapper, Marker, InfoWindow, Listing } from 'google-maps-react';
+const { GOOGLE_API_KEY } = require('../../../config');
+
+class PlacesContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showingInfoWindow: false,
+      activeMarker: {},
+      selectedPlace: {},
+      places: [],
+      lat: null,
+      lng: null,
+    }
+    this.onMarkerClick = this.onMarkerClick.bind(this);
+    this.onMapClicked = this.onMapClicked.bind(this);
+    this.geolocatonSuccess = this.geolocatonSuccess.bind(this);
+    navigator.geolocation.getCurrentPosition(this.geolocatonSuccess);
+    this.fetchPlaces = this.fetchPlaces.bind(this);
+    this.update = this.update.bind(this);
+  }
+
+  geolocatonSuccess(position) {
+    this.setState({
+      lat: position.coords.latitude,
+      lng: position.coords.longitude,
+    });
+  }
+
+  onMarkerClick = (props, marker, e) => {
+    this.setState({
+      selectedPlace: props,
+      activeMarker: marker,
+      showingInfoWindow: true
+    });
+  };
+
+  onMapClicked = (props) => {
+    if (this.state.showingInfoWindow) {
+      this.setState({
+        showingInfoWindow: false,
+        activeMarker: null
+      })
+    }
+  };
+
+  fetchPlaces(mapProps, map) {
+    const {google} = mapProps;
+    console.log(mapProps);
+    let curr = new google.maps.LatLng(this.state.lat,this.state.lng);
+    let request = {
+      location: curr,
+      radius: '2000',
+      type: ['food']
+    }
+    let service = new google.maps.places.PlacesService(map);
+    service.nearbySearch(request, function(results, status, res) {
+      if (status == google.maps.places.PlacesServiceStatus.OK) {
+        for (var i = 0; i < results.length; i++) {
+          var place = results[i];
+          addToArr(place);
+          // console.log(place);
+        }
+      }
+    });
+    const addToArr = (place) => this.update(place);
+  }
+
+  update(place) {
+    var arrayvar = this.state.places.slice();
+    arrayvar.push(place);
+    this.setState({ places: arrayvar })
+  }
+
+  render() {
+    const markers = this.state.places.map(place => 
+      <Marker 
+        name={place.name}
+        position={{
+          lat: place.geometry.location.lat(),
+          lng: place.geometry.location.lng()
+        }}
+        onClick={this.onMarkerClick}
+      />
+    );
+
+    return (
+      <Map
+        google={this.props.google}
+        zoom={14}
+        center={{
+          lat: this.state.lat,
+          lng: this.state.lng,
+        }}
+        onClick={this.fetchPlaces}
+      >
+        {markers}
+        <InfoWindow
+          marker={this.state.activeMarker}
+          visible={this.state.showingInfoWindow}
+          >
+          <h1>
+            {this.state.selectedPlace.name}
+          </h1>
+        </InfoWindow>
+      </Map>
+    );
+  }
+}
+
+export default GoogleApiWrapper({
+  apiKey: GOOGLE_API_KEY,
+})(PlacesContainer)

client/src/components/app.js

@@ -2,11 +2,13 @@ import { h, Component } from 'preact';
 import { Router } from 'preact-router';
 import Match from 'preact-router/match';
 import GoogleMap from './GoogleMap';
+import PlacesMap from './PlacesMap';
 import Nav from './Nav';
 import Logo from './Logo';
 import Home from '../routes/home';
 import Profile from '../routes/profile';
 import Directions from '../routes/directions';
+import Places from '../routes/places';
 import Pins from '../routes/pins';
 import Maps from '../routes/maps';
 import Signin from '../routes/signin';
@@ -42,7 +44,7 @@ export default class App extends Component {
 					<Signin path="/signin" />
 					<Signin path="/forgot-password"/>
 					<Signin path="/reset-password"/>
-
+					<Places path="/places" />
 					<Directions path="/directions" />
 					<Pins path="/pins" />
 					<Maps path="/maps" />