punkish · katkamrachana · Dec 10, 2015 · Dec 10, 2015
diff --git a/complete-app/credentials.example.js b/complete-app/credentials.example.js
@@ -0,0 +1,11 @@
+/* Fill in your credentials here and rename the file
+   to credentials.js
+
+   Tip: ssh -L 5439:127.0.0.1:5432 maps.metastudio.org
+*/
+module.exports.pg = {
+  user: 'you',
+  host: 'localhost',
+  database: 'your_database',
+  port: '5432'
+}
diff --git a/complete-app/package.json b/complete-app/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "complete-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "dependencies": {
+    "express": "^4.13.3",
+    "pg": "^4.4.3",
+    "socket.io": "^1.3.7"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "John J Czaplewski <[email protected]> and Puneet Kishor <[email protected]>",
+  "license": "CC0 Public Domain Dedication"
+}
diff --git a/complete-app/public/css/styles.css b/complete-app/public/css/styles.css
@@ -0,0 +1,71 @@
+body {
+    padding: 0;
+    margin: 0;
+}
+html, body, #map {
+    height: 100%;
+}
+.on {
+    top: 0;
+}
+.off {
+    top: -1000px;
+}
+#form {
+    padding: 10px;
+    background-color: rgba(255,255,255,0.7);
+    position: absolute;
+    height: 50%;
+    z-index: 9999;
+}
+.cache-map {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 10px;
+    height: 40px;
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 4px;
+    z-index: 999;
+}
+.cache-map-button {
+    font-weight: bold;
+}
+.cache-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    padding: 50px;
+    position: absolute;
+    height: 50%;
+    width: 50%;
+    left: 15%;
+    top: 15%;
+    border-radius: 6px;
+    font-size: 25px;
+    margin: 0 auto;
+    z-index: 9999;
+    display: none;
+}
+#cache-map {
+    position: absolute;
+    top: 80px;
+    left: 10px;
+    width: 30px;
+    height: 30px;
+    text-decoration: none;
+    background-color: white;
+    z-index: 1000;
+    border-radius: 4px 4px 4px 4px;
+    -moz-border-radius: 4px 4px 4px 4px;
+    -webkit-border-radius: 4px 4px 4px 4px;
+    border: 1px solid #000000;
+    text-align: center;
+    font-size: x-large;
+}
diff --git a/complete-app/public/img/favicon.ico b/complete-app/public/img/favicon.ico
diff --git a/complete-app/public/index.html b/complete-app/public/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Mapping for Citizen Science</title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="A simple mapping app with the capability to view maps and add points while offline and then sync to a server when back in network">
+    <meta name="author" content="Puneet Kishor and John Czaplewski">
+    <meta name="copyright" content="all right waived via the CC0 Public Domain Dedication">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="//14.139.123.7/lib/skeleton/Skeleton-2.0.4/css/normalize.css">
+    <link rel="stylesheet" href="//14.139.123.7/lib/skeleton/Skeleton-2.0.4/css/skeleton.css">
+    <link rel="stylesheet" href="//14.139.123.7/lib/leaflet/Leaflet-1.0.0-b2/leaflet.css">
+    <link rel="stylesheet" href="css/styles.css">
+
+    <link rel="icon" type="image/png" href="img/favicon.png">
+</head>
+<body>
+
+    <div id="map"></div>
+
+    <a href="" id="cache-map">📲</a>
+
+    <form id="form">
+        <input type="hidden" id="id">
+        <input type="hidden" id="lat">
+        <input type="hidden" id="lng">
+
+    	<label for="name">Name</label>
+        <input class="u-full-width" type="text" placeholder="name of observation" id="name">
+
+    	<label for="desc">Description</label>
+    	<textarea class="u-full-width" placeholder="description of observation" id="desc"></textarea>
+
+    	<button class="button-primary" id="undo">Undo</button>
+    	<button class="button-primary" id="submit">Submit</button>
+    </form>
+
+	<script src="//14.139.123.7/lib/leaflet/Leaflet-1.0.0-b2/leaflet.js"></script>
+	<script src="js/L.TileLayer.PouchDBCached.js"></script>
+	<script src="//14.139.123.7/lib/async/Async-1.5.1/async.min.js"></script>
+	<script src="//14.139.123.7/lib/tile-cover/tile-cover.js"></script>
+    <script src="//14.139.123.7/lib/pouchdb/pouchdb-5.1.0.min.js"></script>
+    <script src="//14.139.123.7/lib/socket.io/Socket.io-1.3.7/socket.io.js"></script>
+    <script src="js/script.js"></script>
+
+	<script>
+
+    	// via https://gist.github.com/missinglink/7620340
+    	L.Map.prototype.panToOffset = function (latlng, offset, options) {
+    	    var x = this.latLngToContainerPoint(latlng).x - offset[0]
+    	    var y = this.latLngToContainerPoint(latlng).y - offset[1]
+    	    var point = this.containerPointToLatLng([x, y])
+    	    return this.setView(point, this._zoom, { pan: options })
+    	}
+
+        window.onload = function() {
+
+            CSE.socket.on('new point', function(point) {
+
+                // Only add it if it wasn't ours
+                if (!CSE.markers[point.id]) {
+                    var marker = L.marker([point.lat, point.lng])
+                        .bindPopup('A point was added at ' + point.lat + ', ' + point.lng + '!')
+                        .addTo(map);
+                }
+            });
+
+            CSE.socket.on('remove point', function(point) {
+                CSE.removeMarker(point.id);
+            });
+
+            // Add an event listener to the submission of the form
+        	CSE.$("#form").addEventListener("submit", CSE.submitForm);
+
+        	// Toggle the form off
+        	CSE.$("#form").className = "off";
+
+        	// Initialize the map
+        	CSE.makeMap();
+
+        	CSE.$("#cache-map").addEventListener('click', function() {
+        	    tiles.seed(
+        	        CSE.map.getBounds(), 
+        	        CSE.map.getZoom(), 
+        	        CSE.map.getZoom() + 2
+        	    );
+        	});
+        }
+	</script>
+</body>
+</html>