js refactoring

OldLauraKrash · Jun 19, 2015 · 409370f · 409370f
1 parent d5da8d7
commit 409370f
Show file tree

Hide file tree

Showing 7 changed files with 314 additions and 97 deletions.
diff --git a/geogekko/settings.py b/geogekko/settings.py
@@ -99,6 +99,14 @@
         'PORT': '5432',
         'USER': 'bitnami',
         'PASSWORD': '78f22aeb2b'
+    },
+    'prototype': {
+        'ENGINE': 'django.db.backends.postgresql_psycopg2',
+        'NAME': 'postgres',
+        'HOST': '192.241.238.146',
+        'PORT': '5432',
+        'USER': 'user',
+        'PASSWORD': 'boston'
     }
 }
 

diff --git a/geogekko/settings.pyc b/geogekko/settings.pyc
diff --git a/static/css/main.css b/static/css/main.css
@@ -0,0 +1,20 @@
+body { margin:0; padding:0; }
+#map { position:absolute; top:0; bottom:0; width:100%; }
+
+div#search-container {
+    position:absolute;
+    top:10px;
+    right:10px;
+    padding:5px 10px;
+    background:rgba(0,0,0,0.5);
+    color:#fff;
+    font-size:11px;
+    line-height:18px;
+    border-radius:3px;
+}
+
+.css-icon {
+    width: 2px;
+    height: 2px;
+    background-color: dodgerblue;
+}
diff --git a/static/js/lib/main.js b/static/js/lib/main.js
@@ -1,3 +1,181 @@
 /**
  * Created by rajiv on 6/11/15.
  */
+
+var GeoGekko = window.GeoGekko || {};
+
+var HastensLocationsGeoJson =  [
+    {
+        "type": "Feature",
+        "geometry": {
+            "type": "Point",
+            "coordinates": [40.7217199, -74.0028646]
+        },
+        "properties": {
+            "title": "Hastens SoHo",
+            "description": "1714 14th St NW, Washington DC",
+            "marker-color": "#fc4353",
+            "marker-size": "medium",
+            "marker-symbol": "store"
+        }
+    },
+    {
+        "type": "Feature",
+        "geometry": {
+            "type": "Point",
+            "coordinates": [40.7379194, -73.9898921]
+        },
+        "properties": {
+            "title": "Hastens Union Square",
+            "description": "155 9th St, San Francisco",
+            "marker-color": "#fc4353",
+            "marker-size": "medium",
+            "marker-symbol": "store"
+        }
+    }
+];
+
+var GG = (function () {
+    var _latitude;
+    var _longitude;
+    var _mapEngine;
+    var _filters;
+
+    var _dataLayers = [
+        {
+            type: 'hastens-locations',
+            data: HastensLocationsGeoJson,
+            active: true,
+            filterable: false,
+            onClick: function () {
+
+            }
+        }, {
+            type: 'nyc-taxi',
+            active : true,
+            dataUrl: '/map/filter',
+            cssIcon:  L.divIcon({
+                // Specify a class name we can refer to in CSS.
+                className: 'css-icon',
+                // Set marker width and height
+                iconSize: [2, 2]
+            })
+        }, {
+            type: 'meetup',
+            dataUrl: '/map/filter',
+            active: false
+        },{
+            type: 'tweets',
+            dataUrl: '/map/filter',
+            active: false
+        }
+    ];
+
+    function _showMap () {
+        _mapEngine = new GeoGekko.MapEngine.Mapbox().renderMap();
+    }
+
+    function _init (lat, lon) {
+        _latitude = lat;
+        _longitude = lon;
+        _showMap();
+        _setupEvents();
+
+        GG.filterLayer(40.7217199, -74.0028646);
+    }
+
+    function _setupEvents () {
+        $('#filter').click(function () {
+            GeoGekko.filterLayer(40.7217199, -74.0028646, $('#filter-form').serialize());
+        })
+    }
+
+    function _showActiveLayers () {
+        for (var layer in dataLayers) {
+            if (layer.data) {
+                _showLayer(layer);
+            }
+        }
+    }
+
+    function _showLayer (layer) {
+        for (var feature in layer.data) {
+            _mapEngine.addMarker(feature);
+        }
+    }
+
+    return {
+        init: function (lat, lon) {
+            _init(lat, lon);
+        },
+
+        filterDataLayer: function (lat, lon, filter) {
+            if (featureLayer)
+                map.removeLayer(featureLayer);
+
+            var url = '/map/filter?lat=' + lat + '&lon=' + lon;
+            if (filter) {
+                url += '&' + filter;
+            }
+            console.log(url);
+            featureLayer = L.mapbox.featureLayer().loadURL(url).addTo(map);
+
+            // Set a custom icon on each marker based on feature properties.
+            featureLayer.on('layeradd', function (e) {
+                var marker = e.layer,
+                        feature = marker.feature;
+
+                marker.setIcon(cssIcon);
+            });
+
+            addStoreMarkers();
+        }
+    };
+})();
+
+GeoGekko.MapEngine.Mapbox = function () {
+    var _map;
+    var _accessToken = 'pk.eyJ1IjoiOHFsYWJzIiwiYSI6IjJYcnhObFEifQ.cqWyVvIXQf0BJp6hatERmw';
+    var _layers = {};
+
+    this.renderMap = function (lat, lon) {
+        L.mapbox.accessToken = _accessToken;
+        _map = L.mapbox.map('map', 'mapbox.light')
+            .setView([lat, lon], 13)
+            .addControl(L.mapbox.geocoderControl('mapbox.places', {autocomplete: true}).on('select', function (e) {
+                var lat = e.feature.center[1];
+                var lon = e.feature.center[0];
+                GeoGekko.filterLayer(lat, lon);
+            })
+        );
+    }
+
+    this.createLayer = function (layerName, geoJson) {
+        _layers[layerName] = {
+            geoJson: geoJson
+        }
+    }
+
+    this.removeLayer = function (layerName) {
+
+    }
+
+    this.addMarker = function (markerJson) {
+        L.marker([40.7217199, -74.0028646]).addTo(_map);  // soho
+    }
+
+    (function () {
+
+    })();
+}
+
+GeoGekko.MapEngine..Google = function () {
+
+    this.renderMap = function () {
+        console.log('Not Implemented');
+    }
+
+    this.addMarker = function () {
+        console.log('Not Implemented');
+    }
+}
diff --git a/ui/templates/mapbox.html b/ui/templates/mapbox.html
@@ -2,101 +2,50 @@
 <html>
 <head>
     <meta charset=utf-8 />
-    <title>A simple map</title>
+    <title>GeoGekko</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
     <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
-    <style>
-        body { margin:0; padding:0; }
-        #map { position:absolute; top:0; bottom:0; width:100%; }
-
-        div#search-container {
-          position:absolute;
-          top:10px;
-          right:10px;
-          padding:5px 10px;
-          background:rgba(0,0,0,0.5);
-          color:#fff;
-          font-size:11px;
-          line-height:18px;
-          border-radius:3px;
-        }
+    <script src="/static/js/lib/main.js"></script>
 
-        .css-icon {
-            width: 2px;
-            height: 2px;
-            background-color: dodgerblue;
-{#            border-top: 30px solid transparent;#}
-{#            border-bottom: 30px solid transparent;#}
-{#            border-left: 30px solid #ff8888;#}
-        }
-    </style>
+    <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
+    <link href="/static/css/main.css" rel="stylesheet" />
 </head>
 <body>
 <div id='map' class="dark"></div>
 
 <pre id='coordinates' class='ui-coordinates'></pre>
 <div id="search-container">
-    <input name="location" type="text" placeholder="Enter a Location" size="100" />
-    <button>Change Location</button>
+    <form id="filter-form">
+        <input name="location" type="text" placeholder="Enter a Location" size="50" />
+
+        <select name="time_of_week">
+            <option value="-1">Time of Week</option>
+            <option>Weekday</option>
+            <option>Weekend</option>
+        </select>
+
+        <select name="time_of_day">
+            <option value="-1">Time of Day</option>
+            <option>Morning</option>
+            <option>Afternoon</option>
+            <option>Evening</option>
+            <option>Night</option>
+        </select>
+
+        <button type="button" id="filter">Submit</button>
+    </form>
 </div>
 
 </body>
 </html>
 
 <script>
-    // Define an icon called cssIcon
-    var cssIcon = L.divIcon({
-      // Specify a class name we can refer to in CSS.
-      className: 'css-icon',
-      // Set marker width and height
-      iconSize: [2, 2]
-    });
-    var featureLayer;
-    L.mapbox.accessToken = 'pk.eyJ1IjoiOHFsYWJzIiwiYSI6IjJYcnhObFEifQ.cqWyVvIXQf0BJp6hatERmw';
-
-    var map = L.mapbox.map('map', 'mapbox.light')
-            .setView([40.7611095,-73.9913995], 13)
-            .addControl(L.mapbox.geocoderControl('mapbox.places', {autocomplete: true}).on('select', function (e) {
-                console.log(e);
-                var lat = e.feature.center[1];
-                var lon = e.feature.center[0];
-{#                featureLayer.setGeoJSON([]);#}
-                map.removeLayer(featureLayer);
-                addLayer(lat, lon);
-            })
-    );
-
-    function addLayer (lat, lon) {
-        featureLayer = L.mapbox.featureLayer()
-        .loadURL('/map/filter?lat=' + lat + '&lon=' + lon)
-        .addTo(map);
+    $(document).ready(function() {
+        var LATITUDE = {{ start_lat }};
+        var LONGITUDE = {{ start_lon }};
 
-        // Set a custom icon on each marker based on feature properties.
-        featureLayer.on('layeradd', function(e) {
-            var marker = e.layer,
-            feature = marker.feature;
-
-            marker.setIcon(cssIcon);
-        });
-
-        myLayer.on('click', function(e) {
-            resetColors();
-            e.layer.feature.properties['old-color'] = e.layer.feature.properties['marker-color'];
-            e.layer.feature.properties['marker-color'] = '#ff8888';
-            myLayer.setGeoJSON(geoJson);
-        });
-
-        addStoreMarkers();
-    }
-
-    function addStoreMarkers () {
-        L.marker([40.7217199,-74.0028646]).addTo(map);  // soho
-        L.marker([40.7379194,-73.9898921]).addTo(map);  //union square
-    }
-
-    //@40.7217199,-74.0028646
-    addLayer(40.7217199,-74.0028646);
+        GG.init(LATITUDE, LONGITUDE);
+    });
 </script>